ブログのメニューにCSS3の「box-shadow」プロパティでドロップシャドウを付けてみた【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。
そろそろCSS3を初めてみようシリーズ。今回は「box-shadow」を使ってみようです。
今まで「transition」や「boader-radius」等を紹介してきました。
今回は前回「boader-radius」を使って角丸にした部分に影を入れてみようと思います。
ということで、まずは前回の復習も含めてソースを表示。
div#sub {
/* ここ中略 */
border-radius:10px 10px 0px 0px;
}
div#extra {
/* ここ中略 */
border-radius:0px 0px 10px 10px;
}
おそらく3カラムとの絡みだと思うのですが自分がベースとして使っているライブドアブログのテンプレートでは2カラムにしたときにID=”sub”とID=”extra”とを縦に重ねるという方法をとっているんです。
したがって、それぞれ上の部分のみ角丸、下の部分のみ角丸としたのが上の表記となっています。
で、ここにbox-shadowプロパティを書き加えてあげます。
box-shadowプロパティは以下の様な書き方をします。
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.4) inset;
それぞれ、左から「水平方向の距離」「垂直方向の距離」「ぼかしの距離」「広がりの距離」「影の色」「影の方向」となります。
この中で必須なのは「水平方向の距離」「垂直方向の距離」です。
影の色にはRGBに透明度(アルファ)を加えたRGBA表記を使っています。
□ rgba()-CSS3リファレンス
RGBA表記は「rgba(レッド,グリーン,ブルー,透明度)」といった表記で色は0~255、透明度は0~1の間の少数で指定します。
最後のinsetは記述すると内向きの影になります。
今回は以下の様な記述になりました。
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
ということで、これを2つのDIVに書き込んであげれば終了。
div#sub {
/* ここ中略 */
border-radius:10px 10px 0px 0px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); }
div#extra {
/* ここ中略 */
border-radius:0px 0px 10px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); }
となるはずだったのですが。。
予想はしていたのですが、二つのDIVの境目に影が。。
z-indexを使って前後関係を入れ替えたりもしてみましたがダメでした。
で、最終的にはちょっと手間がかかりましたが二つのDIVを一つのDIVで囲ってそちらにid=”kage”とし、
以下のように書いてあげることで対応しました。
div#kage { background-color: #EBEBEB; border-radius:10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); }
boader-radiusも4辺が一緒なので一つの数値で良くなりました。。
最初からCSS3が使えればもっとシンプルに書けたかもしれませんね。
アドセンス広告メイン
関連記事
-
-
デザイン変えました
1年以上前の記事です。内容が古い可能性があります。livedoor Blog 開 …
-
-
ネットショップはどこで?
1年以上前の記事です。内容が古い可能性があります。お客さんでネットショップをやり …
-
-
デザイナーがiPad必携の時代がやってくる
1年以上前の記事です。内容が古い可能性があります。これは注目のニュースじゃないで …
-
-
バトンで集客
1年以上前の記事です。内容が古い可能性があります。一歩間違えればスパムとさほど変 …
-
-
Googleの検索機能、モバイル(スマホ)版とPC(パソコン)版が完全に分離されるとの情報。SEOは各々行う必要が
1年以上前の記事です。内容が古い可能性があります。どこからでた情報なのかわかりま …
-
-
エイサーASPIRE ONEのモニターは赤の発色が悪い
1年以上前の記事です。内容が古い可能性があります。タイトルどおりです。 ASPI …
-
-
フリー素材紹介記事まとめ ver.2 【無料】
1年以上前の記事です。内容が古い可能性があります。様々なフリー素材を配布している …
-
-
最も原始的なSEO対策
1年以上前の記事です。内容が古い可能性があります。最も原始的なSEOを進行中なの …
-
-
3日目。。
1年以上前の記事です。内容が古い可能性があります。移転3日目です。 忙しいといい …
-
-
昨日の続き
1年以上前の記事です。内容が古い可能性があります。と、いうことで、 いろいろ見て …