新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ブログのメニューにCSS3の「box-shadow」プロパティでドロップシャドウを付けてみた【Webデザイン】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

そろそろCSS3を初めてみようシリーズ。今回は「box-shadow」を使ってみようです。
今まで「transition」や「boader-radius」等を紹介してきました。

ドロップシャドウ01
こんな感じにドロップシャドウ(影)を付けてみました。

スポンサーリンク
 

今回は前回「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); }

となるはずだったのですが。。

ドロップシャドウ02
予想はしていたのですが、二つの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が使えればもっとシンプルに書けたかもしれませんね。

参考) box-shadow-CSS3リファレンス / rgba()-CSS3リファレンス 

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

gifアニメを作るのは「Flash」?それとも「Photoshop」?

1年以上前の記事です。内容が古い可能性があります。アニメーションというとFlas …

DreamweaverとFC2ホームページで作るサイト定義(後編)

1年以上前の記事です。内容が古い可能性があります。前編 → 後編 → 公開編 さ …

WordPress(ワードプレス)で「text-indent:-9999」が効かない時の対処法 #wp

1年以上前の記事です。内容が古い可能性があります。先日、久しぶりにWordPre …

レストランで料理の写真を撮ってブログにアップすると違法?

1年以上前の記事です。内容が古い可能性があります。などというドキッとするようなタ …

no image
検索ワード順位アゲアゲ大作戦 #2 ページランクアゲアゲ大作戦

1年以上前の記事です。内容が古い可能性があります。まずはgoogle=ページラン …

フリー素材紹介記事まとめ ver.2 【無料】

1年以上前の記事です。内容が古い可能性があります。様々なフリー素材を配布している …

GIMP2(ギンプ2)でトリミング

1年以上前の記事です。内容が古い可能性があります。GIMP(ギンプ)ってのはフリ …

トップページにプルダウンメニューを入れてみた

1年以上前の記事です。内容が古い可能性があります。デザインリニューアル最終章とし …

no image
ネットの犯罪抑止力

1年以上前の記事です。内容が古い可能性があります。ネットの普及は犯罪抑止になって …

WebサイトでSVG画像が普通に使えるようになっていた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。Web用の画像ファイル形式とし …

血液型オヤジ