自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。>ブログのメニューにCSS3の「box-shadow」プロパティでドロップシャドウを付けてみた【Webデザイン】2014/02/22Tweet1年以上前の記事です。内容が古い可能性があります。CSS3を初めてみようシリーズ。今回は「box-shadow」を使ってみようです。今まで「transition」や「boader-radius」等を紹介してきました。こんな感じにドロップシャドウ(影)を付けてみました。スポンサーリンク今回は前回「boader-radius」を使って角丸にした部分に影を入れてみようと思います。いうことで、まずは前回の復習も含めてソースを表示。10px;}おそらく3カラムとの絡みだと思うのですが自分がベースとして使っているライブドアブログのテンプレートでは2カラムにしたときにID=”sub”とID=”extra”とを縦に重ねるという方法をとっているんです。したがって、それぞれ上の部分のみ角丸、下の部分のみ角丸としたのが上の表記となっています。ここにbox-shadowプロパティを書き加えてあげます。box-shadowプロパティは以下の様な書き方をします。inset;それぞれ、左から「水平方向の距離」「垂直方向の距離」「ぼかしの距離」「広がりの距離」「影の色」「影の方向」となります。この中で必須なのは「水平方向の距離」「垂直方向の距離」です。影の色にはRGBに透明度(アルファ)を加えたRGBA表記を使っています。rgba()-CSS3リファレンスRGBA表記は「rgba(レッド,グリーン,ブルー,透明度)」といった表記で色は0~255、透明度は0~1の間の少数で指定します。最後のinsetは記述すると内向きの影になります。今回は以下の様な記述になりました。rgba(0,0,0,0.4);ということで、これを2つのDIVに書き込んであげれば終了。rgba(0,0,0,0.4);}となるはずだったのですが。予想はしていたのですが、二つのDIVの境目に影が。z-indexを使って前後関係を入れ替えたりもしてみましたがダメでした。以下のように書いてあげることで対応しました。rgba(0,0,0,0.4);}boader-radiusも4辺が一緒なので一つの数値で良くなりました。最初からCSS3が使えればもっとシンプルに書けたかもしれませんね。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取る関連記事gifアニメを作るのは「Flash」?それとも「Photoshop」?1年以上前の記事です。内容が古い可能性があります。...DreamweaverとFC2ホームページで作るサイト定義(後編)1年以上前の記事です。内容が古い可能性があります。#wp1年以上前の記事です。内容が古い可能性があります。...レストランで料理の写真を撮ってブログにアップすると違法?1年以上前の記事です。内容が古い可能性があります。ページランクアゲアゲ大作戦1年以上前の記事です。内容が古い可能性があります。【無料】1年以上前の記事です。内容が古い可能性があります。...GIMP2(ギンプ2)でトリミング1年以上前の記事です。内容が古い可能性があります。...トップページにプルダウンメニューを入れてみた1年以上前の記事です。内容が古い可能性があります。...ネットの犯罪抑止力1年以上前の記事です。内容が古い可能性があります。...WebサイトでSVG画像が普通に使えるようになっていた【Webデザイン】1年以上前の記事です。内容が古い可能性があります。...PREV先日の大雪は人工雪であるとの説。ついて調べてみたこの件が片付くまではブログを積極的に書くのはやめようと思っていました。...ファンと繋がり山口真帆さんへの暴行をそそのかしたと噂差されるNGT48「太野彩香」さんの血液型と星座から見た性格1年以上前の記事です。内容が古い可能性があります。...ファンから受けた暴行をSHOWROOMやツイッターで告発。NGT48「山口真帆」さんの血液型と星座から見た性格1年以上前の記事です。内容が古い可能性があります。...紅白出場からDVスキャンダルで一転、芸能界引退へ。純烈「友井雄亮(ともいゆうすけ)」さんの血液型と星座から見た性格1年以上前の記事です。内容が古い可能性があります。...今年もこの人の年になる?お年玉で夢のあるツイッターユーザー100名に100万、ZOZO社長「前澤友作」さんの血液型と星座から見た性格1年以上前の記事です。内容が古い可能性があります。楽天モーションウィジェットいいね!よろしくお願いします。いいね!よろしくお願いします。自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。