CSSだけでシャドウ、なんとなく作ってみた
シャドウのかかった画像をいちいち作るのが面倒くさかったので、CSSでなんとかしてみました。
まあ、ソースはgdgdですが、よかったら使ってみてください。
linkタグのhref部分は書き換えてくださいね。
●ＨＴＭＬファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>左右のドロップシャドウをCSSで描画。</title> <link rel="stylesheet" type="text/css" href="test3.css"> </head> <body> <div id="wrapper"> <div> ?<div?class="alpha1"></div> ?<div?class="alpha2"></div> ?<div?class="alpha3"></div> ?<div?class="alpha4"></div> ?<div?class="alpha5"></div> ?<div?class="alpha6"></div> ?<div?class="alpha7"></div> ?<div?class="alpha8"></div> ?<div?class="alpha9"></div> </div> <div id="main"> ??? <div id="header"> ??? <p>シャドウ付きの画像を作らなくてもいいようにCSSの半透明でグラデーションを作る。<br> ??? IE8,FF3,Safari5,Chrome6で確認。(IEtester上のIE6,IE7でも確認）<br></p> ??? </div> ??? ??? <div id="contents"> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? aaaaaaa<br /> ??? </div> ??? ??? <div id="footer"> ??? </div> </div> <div> ?<div class="alpha9"></div> ?<div?class="alpha8"></div> ?<div?class="alpha7"></div> ?<div?class="alpha6"></div> ?<div?class="alpha5"></div> ?<div?class="alpha4"></div> ?<div?class="alpha3"></div> ?<div?class="alpha2"></div> ?<div?class="alpha1"></div> </div> </div> </body> </html>
●CSSファイル
@charset "utf-8";
/* CSS Document */
body {
?margin: 0;
?paddin: 0;
?background-color: #ccffcc;
}
p {
?margin: 0;
?padding: 0;
}
#wrapper {
?width: 820px;
?margin: auto;
?overflow: hidden;
}
#main {
?float: left;
?width: 800px;
?margin: 0;
?padding: 0;
}
#header {
?width: 800px;
?height: 70px;
?margin: 0;
?padding: 0;
?background-color: #ccffff;
}
#contents {
?width: 800px;
?margin: 0;
?padding: 0;
?background-color: #ffccff;
}
#footer {
?width: 800px;
?height: 110px;
?margin: 0;
?padding: 0;
?background-color: #ffffcc;
}
.alpha_box1,
.alpha_box2 {
?float: left;
?width: 10px;
?height: 100%;
?_padding-bottom: 8192px;??
?_margin-bottom: -8192px;
}
.alpha_box1 {
?margin-right:-1px;
}
.alpha1,
.alpha2,
.alpha3,
.alpha4,
.alpha5,
.alpha6,
.alpha7,
.alpha8,
.alpha9 {
?float: left;
?width: 1px;
?height: 100px;
?background-color: #444444;
?padding-bottom: 8192px;??
?margin-bottom: -8192px;
}
.alpha1 {
? filter: alpha(opacity=10);/*IE6,IE7*/
? -moz-opacity:0.01;
? opacity:0.1;
? -ms-filter: "alpha(opacity=10)";/*IE8*/
}
.alpha2 {
? filter: alpha(opacity=15);/*IE6,IE7*/
? -moz-opacity:0.15;
? opacity:0.15;
? -ms-filter: "alpha(opacity=15)";/*IE8*/
}
.alpha3 {
? filter: alpha(opacity=20);/*IE6,IE7*/
? -moz-opacity:0.2;
? opacity:0.2;
? -ms-filter: "alpha(opacity=20)";/*IE8*/
}
.alpha4 {
? filter: alpha(opacity=25);/*IE6,IE7*/
? -moz-opacity:0.25;
? opacity:0.25;
? -ms-filter: "alpha(opacity=25)";/*IE8*/
}
.alpha5 {
? filter: alpha(opacity=30);/*IE6,IE7*/
? -moz-opacity:0.3;
? opacity:0.3;
? -ms-filter: "alpha(opacity=30)";/*IE8*/
}
.alpha6 {
? filter: alpha(opacity=35);/*IE6,IE7*/
? -moz-opacity:0.35;
? opacity:0.35;
? -ms-filter: "alpha(opacity=35)";/*IE8*/
}
.alpha7 {
? filter: alpha(opacity=40);/*IE6,IE7*/
? -moz-opacity:0.4;
? opacity:0.4;
? -ms-filter: "alpha(opacity=40)";/*IE8*/
}
.alpha8 {
? filter: alpha(opacity=45);/*IE6,IE7*/
? -moz-opacity:0.45;
? opacity:0.45;
? -ms-filter: "alpha(opacity=45)";/*IE8*/
}
.alpha9 {
? filter: alpha(opacity=50);/*IE6,IE7*/
? -moz-opacity:0.5;
? opacity:0.5;
? -ms-filter: "alpha(opacity=50)";/*IE8*/
}