ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|
ihaのブログ

DTP・Webデザイン系企業に就職したスタッフIhaのブログテンプレート制作目録です。イラスト、フォト、プログラム、呟きなどいろいろ投稿していきます。基本的にはブログテンプレートデザインを制作した過程を書いています。

現在の位置:TOP >  追加HTML&CSS

cssのtext-shadowとbox-shadow

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

 

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

 

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

 

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

 

.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。

記事URL
1 |

Calendar

<< 2012年01月 >>
1234567
891011121314
15161718192021
22232425262728
293031    

Me

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0