https://logic-a.com/wp-content/themes/logica6.9

blog

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

アイキャッチがありません

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

サンプル

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

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

コード

HTML

[html]

<div id="imgWrapper">
<div class="tape"></div> <!– /#tape –>
<img src="images/IMG_0402.jpg" alt="IMG_0402" width="298" height="400">
<div class="afterImg"></div> <!– /.afterImg –>
</div>

[/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非対応のIE8などではテープは表示されないので 表示が崩れたりすることはありません。

テープが画像に自動で貼らさってくれたら楽です

ので、次は JavaScript を使って、ブログにアップした画像全てに 自動でテープを貼る方法を書いてみます。