［み］CSSだけで写真をテープで貼ったようにする方法

またまたCSSネタです。

DTPではよくある、写真をテープで貼ったような装飾をCSSだけで表現する方法を紹介します。

こういう風にテープでとめてあるようなのを

こんなのをつくります。

ソースはこちら。

HTML

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        .box {
        	background:#fff;
        	box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
        	position:relative;
        	width:400px;
        	margin:40px auto;
        	padding: 25px;
        }

        .tape{
        	background:rgba(255,255,255,0.4);
        	border-left:2px dotted rgba(0,0,0,0.1);
        	border-right:2px dotted rgba(0,0,0,0.1);
        	box-shadow:0 0 5px rgba(0,0,0,0.2);
        	width:85px;
        	height:28px;
        	position:absolute;
        	top:-13px;
        	left:36%;
        	-webkit-transform:rotate(-3deg);
        }
        </style>
    </head>
    <body>
        <div class="box">
        	<span class="tape"></span>
        	<p><img src="https://miha5.com/demo/images/naoki.jpg" width="400px"/></p>
        	<p>やられたらやり返す！倍返しだ!!</p>
        </div>
    </body>
</html>

HTMLはとてもシンプルです。

肝心のCSS

.boxのCSS

boxクラスの装飾は、紙っぽくみせているだけのモノなので、セロテープとは直接関係ありません。こちらで大事なのは、position: relative;だけです。これは、セロテープ部分に当たるtapeクラスをposition: absolute;
にして配置しているためです。それ以外のbox-shadowとかは、ぜんぜん関係ありません。