練習してみよう!!!
http://nick-dunn.co.uk/assets/files/dropshadow/index.html
↑このデモ画面を見てみましょう。
これはDivボックス内に文字を書き、Divボックスの背景を白くし、
DivボックスのドロップシャドウをCSSで作成する事で、
まるで画像作成ソフトでつくられたかのような表示をWEB上で行っています。
新規HTMLと新規CSSを作成し、ファイル名を付けて保存。
(例:drop-shadow.html drop-shadow.css)
そしてHTMLとCSSを連動させ、る。
HTML(<body> ~ </body>内に以下をコピーペースト
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS(新規drop-shadow.css内に以下をコピーペースト)
div {
margin: 10em auto;
width: 20em;
font-size: 1.2em;
padding: 1em;
background: #fff;
border: 1px solid #ccc; }
div p { margin: 0;}
div {
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000; }
