cutmail's blog

write the code

CSSでドロップシャドウをつける

cssだけでドロップシャドウをつけてみます。

ソースは以下。

<html>
<head>
<title>DropShadow with css</title>
<style type="text/css">
<!--
#shadow {
    width: 300px;
    height: 300px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 3px 10px 3px #666666;
    -moz-box-shadow: 3px 10px 3px #666666;
}
-->
</style>
</head>
<body>
<div id="shadow">shadow</div>
</body>
</html>

としてやると、こんな感じにドロップシャドウがつきます。
f:id:invent:20101031023208j:image