画像を使わずに CSSだけでセロテープっぽいものをつくってみた

最近つくったもので、てきとうにパッとやったらそれっぽかったので残してみます。

サンプル

うちの超絶カワカワなマルちゃんの写真に、上部にテープが貼ってあるようにしてみました。

左上にペトッとシールが貼られてて、右下がペロッとめくれてる感を出しました。

コード

HTML

[html]

[/html]

HTMLは 画像本体（img) 、テープ用の要素（class=”tape”）、影用の要素（class=”afterImg”）と、それらを囲むdiv（id=”imgWrapper”）で構成してます。

CSS

[css]

#imgWrapper { /* 要素を囲む要素 */
width: 298px;
height: auto;
margin: 50px auto 0;
padding: 0;
position: relative;
}

#imgWrapper img { /* 画像 */
width: 298px;
height: 400px;
border: none;
background: left top no-repeat url(../sampleImage/IMG_0402.jpg);
position: relative;
z-index: 10;
}

#imgWrapper .tape { /* テープ（CSS3非対応では表示されません） */
width: 40px;
height: 150px;
background: rgba(174,227,236,0.22);
box-shadow: 0 0 1px rgba(0,0,0,.3);
border-top: 1px dashed rgba(0,0,0,.1);
border-bottom: 1px dashed rgba(0,0,0,.1);
position: absolute;
top: -40px;
left: 5px;
z-index: 4;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
}
#imgWrapper .afterImg { /* 画像の影（CSS3非対応では表示されません */
position:absolute;
right: 0; bottom:10px;
width:180px; height: 100px;
z-index: 2;
background: rgba(0, 0, 0, 0.1);
-moz-box-shadow: 20px 30px 17px rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 20px 30px 17px rgba(0, 0, 0, 0.24);
box-shadow: 20px 30px 17px rgba(0, 0, 0, 0.24);
-moz-transform:skew(10deg,10deg) translate(-45px,-15px);
-webkit-transform:skew(10deg,10deg) translate(-45px,-15px);
transform:skew(10deg,10deg) translate(-45px,-15px);
}

[/css]

テープの要素は単純に長方形をナナメに回転し、位置を position: absolute で imgWrapper の左上に来るように調整しているだけです。
見た目は background を rgba で半透明にし、薄くシャドウをかけています。
あと、長方形の短い辺側は border で点線を薄くかけていて、テープが切れたようなギザギザを出してます。

テープと同様にシャドウを右下に設置し、それぞれを z-index で調整して完了です。基本、絶対位置指定をするので position 指定を全ての要素に入れ込みました。

テープ画像などの素材を使用せずにCSSだけで効果を作ってみました。これだと CSS3非対応のIE８などではテープは表示されないので表示が崩れたりすることはありません。