前回、各記事を囲むborderに丸みを付けてあげた | MasterPeace 21
でborderの角に丸みを付けてあげました。
また、前記事にて、IEでは丸みが表示できないと記載したのですが、以下のコードを入れれば普通にIEでも動作する事がわかりました。
border-radius: 50px;//IE//
詳しくは前記事を各記事を囲むborderに丸みを付けてあげた | MasterPeace 21を参照してください。
そして、これでは満足出来ずに今度は影を付けてみたいと思い実践してみましたｗ
参照したのは、以下の2つのサイトです。
box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 …
How to create slick effects with CSS3 box-shadow - RedTeamDesign
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending …
両者とも、結構詳しく書かれている(CSS初心者の自分でも出来た)ので、説明は省きます。
僕のCSSの場合、以前borderを追記した
[CSS]
#content article {
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border:solid 2px silver;
padding:20px 30px 10px 30px;
display:block;
clear:both;
margin-bottom:40px;
}
[/CSS]
に
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
を加えてあげました。
なので、CODEはこうなります。
[CSS]
#content article {
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
border:solid 2px silver;
padding:20px 30px 10px 30px;
display:block;
clear:both;
margin-bottom:40px;
}
[/CSS]
これで、左右上下に20px分(上下左右10px分？)の指定した色の影が付きました。
右下だけに影を出したい時は
-webkit-box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.7); box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.7);
とかにすればいいのだと思います。
これで、記事部分だけ立体的な表示になって、さらに見やすくなったんじゃないかな？(*´ω｀*)
コードを付け足すだけで出来ちゃうので結構簡単でした。
CSSって凄いね(・´з`・)
時間があれば、もっと勉強したいと思います。
当分はこれで満足かな！！
では(´∀｀*)ﾉｼ
毎日コミュニケーションズ
売り上げランキング: 3619
