グラデーションとドロップシャドー
DIVタグ（division）はブッロク（block）属性の代表格です。
つぎが、上のエレメントのマークアップです。
<div id=”gradientDropShadowEx”> <div class=”parent”> <div class=”child”> <p>DIVタグ（division）はブッロク（block）属性の代表格です。</p> </div> </div> </div> <style> #gradientDropShadowEx { color:#059; text-align:center; line-height:1.4em; } #gradientDropShadowEx .parent { position:relative; height:200px; /*GRADATION*/ background: rgb(242,205,233); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(242,205,233,1) 0%, rgba(255,107,168,1) 16%, rgba(196,117,176,1) 50%, rgba(221,161,195,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(242,205,233,1)), color-stop(16%,rgba(255,107,168,1)), color-stop(50%,rgba(196,117,176,1)), color-stop(100%,rgba(221,161,195,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(242,205,233,1) 0%,rgba(255,107,168,1) 16%,rgba(196,117,176,1) 50%,rgba(221,161,195,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(242,205,233,1) 0%,rgba(255,107,168,1) 16%,rgba(196,117,176,1) 50%,rgba(221,161,195,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(242,205,233,1) 0%,rgba(255,107,168,1) 16%,rgba(196,117,176,1) 50%,rgba(221,161,195,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(242,205,233,1) 0%,rgba(255,107,168,1) 16%,rgba(196,117,176,1) 50%,rgba(221,161,195,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f2cde9′, endColorstr=’#dda1c3′,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #gradientDropShadowEx .child { position:absolute; left:30px; top:30px; width:50%; background-color:#A2C1EE; border:#37b dotted 2px; color:#038; font-weight:bolder; font-family:メイリオ, ＭＳ Ｐゴシック, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, Osaka, sans-serif; /*SHADOW*/ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.80); -moz-box-shadow: 0px 0px 20px rgba(175,0,170,1.00); -webkit-box-shadow: 0px 0px 20px rgba(65,0,208,0.80); } #gradientDropShadowEx .child p { padding:20px; } </style>
グラデーションはこちらから→Ultimate CSS Gradient Generator
ドロップシャドーはこちらから→Css3 drop shadow generator