« 墓参り | トップページ | 引っ越し »

2013年8月13日 (火)

影を慕いて

 まぼろしの影を慕いて雨に日に 月にやるせぬ我が思い

 って事で
 通常使うブラウザは「firefox」。画像検索の時は「Chrome」。
 「InternetExplorer」はWindowsUpdateの時しか使いません。
 だから、「InternetExplorer」が10になってCSS-3の「text-shadow」が実装され、これまで「InternetExplorer」だけが見られなかったブログタイトル文字の影がようやく見られるようになった事に気づきませんでした。

Ie10

 「box-shadow」の方は9で実装されていたんですね、知らなかったなー。

text-shadowの記事

 このブログは、ブラウザのJavaScriptをオンにしておくと、十二枚のバナー背景画像がランダムに切り替わるようになっています。白いタイトル文字が見やすいように「text-shadow」を付けていますが、IEでは表示されないので、文字の表示場所の背景が例えば白い雲など白っぽくない画像を選んでいます。
 これからはそんな心配は要らないかというと、「text-shadow」が実装されていない「InternetExplorer6.7.8.9」で見ていらっしゃる方が四割以上なので、まだまだ気を抜けません。

バナー背景画像の記事

 さて、「box-shadow」の方は「InternetExplorer9」から既に、っていうか9で漸くですが、実装されていたそうなので、ちょっと使ってみました。「InternetExplorer9.10」以外の「InternetExplorer」でご覧の方以外の方には、記事欄の右と下に影がついて見えます。ややこしい書き方でスミマセン(^_^;)

「box-shadow」あり

Boxshadow_on

「box-shadow」なし

Boxshadow_off

 昔はこの影を付けるのが面倒だったんですよねー。暈かした影だと、背景色を変える度に、その色に合わせた影の画像を作り直したりして。

記事を角丸四角で囲うの記事

 今はCSSに赤文字の一行を追加しただけで簡単に出来てしまいます。

div.entry{

    margin: 15px 0 40px 0;
    box-shadow:5px 5px 5px rgba(0,0,0,0.4);
}

div.entry-body{
    margin: 0;
    padding:5px;
}

 数値は左から順に横方向の影幅、縦方向の影幅、影の暈かし値、影の色。このサンプルの色はr(赤)g(緑)b(青)が0なので黒、a(alpha)が0.4で40%の透明度です。これなら背景色を変えても同じ影の色なのでその度に影を作り替える必要がありません。楽っく~。
 paddingは0でしたが、それだと文字の右端に余白なしで影がつくので5px空けてあります。

 うーん、でも何か変だなー。
  しばらくしたら元に戻しますね。

※2013/08/25
 追記した「box-shadow」を消して元に戻しました。

|

« 墓参り | トップページ | 引っ越し »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/507657/57981488

この記事へのトラックバック一覧です: 影を慕いて:

« 墓参り | トップページ | 引っ越し »