cssのtext-shadowとbox-shadowを加えてみました。

最近のページ作成（メインカラムのみ）をした案件で、こういうのがありました。テキストに変なぼかしが入ってんな・・・って思ってたけど、CSS3のtext-shadowが入ってたんですね。

よく見るとタウンネットブログの<h２>にも入ってました。勿論、テキストに。

・・ってことで、このブログタイトルのオンマウスロールオーバーと右カラムに加えてみました。

.blog_title a:hover{

    color:#fcfcfc;

    text-decoration:none;

    text-shadow:0px 0px 10px #f6f;

}

文字通りテキストの影。ドロップシャドウみたいな感じ。

値は、横方向[px]・下方向[px]・ぼかし具合[px]・色

下方向っていうより縦方向ですね。プラスの値を入力すると右方向や下方向に、マイナスの値は左方向や上方向に影が掛かるようです。

.side{

    -moz-box-shadow: 5px 5px 10px #999;/*Firefox*/

    -webkit-box-shadow: 5px 5px 10px #999;/*Safari, Google Chrome*/

}

文字通りボックスの影。値は上記同様。

ちなみにIEでは他のやり方があるようで、IE8では表示されていませんでした。だからIEで当ブログタイトルをポイントすると文字色がかなり薄いです(￣▽￣;)

FirefoxとGoogle Chromeでは表示確認OK。

昨日からグローバルナビにイメージをはめ込んだと思いますが、背景イメージを挿入しても何故か反映されなかったので、省略していた下記赤文字部分を挿入したところ反映されました。

修正したCSSソースは下記の「続きを読む」からどうぞ。今回はCSS3で出来る角丸メニューを追加しました。

まあヘッダー部分を見ればわかると思いますが。

ちなみに今回使用した画像ですが、アメブロでやってる私のブログからパクってきました(笑)

訓練校に通ってるときに制作したものなので大丈夫です。

こちらが通常リンク時（ON）で、

こちらがポイント時（OFF）・アクティブ時です。

追記：角丸が反映されるブラウザは、Firefox、Google Chrome、IE9です。

続きを読む...

headerに簡易的な即席グローバルナビを作ってみました。

全部CSSで出来るから簡単です(^^)

別に意味は無いけど、ずーーーーっとIllustrator触ってたから気晴らしに、という事で作成。

やっぱDTPメインが長いとソースの書き方忘れてヤバいやっさ。TAG indexを参考に、あとに残ったmarginとpaddingの計算は自力でやって完成。

でも配色だけだと詰まらんなぁ・・・(￣.￣;) ま、即席の簡易版なので仕方ないけど。

こちらはおまけ

青が、文字に全部アピアランスで作成したもの（文字の塗りを量産）。
赤が、パスと文字で作成したもの（オブジェクト一つひとつに効果入り）。

追記――――――

枠が角丸になるようCSS3のソースを追加しました。

Firefox4と5、Google Chromeで確認できます。ていうかIE以外。

続きを読む...