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

またまたCSSネタです。

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

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

こんなのをつくります。

ソースはこちら。

<!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="http://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とかは、ぜんぜん関係ありません。

.tapeのCSS

今回のメインのセロテープをCSSだけで表現している部分ですが、

position: absolute;

で絶対配置してやることで位置を決めます。

また、セロテープの透明なカンジは、rgba表記を使って白を透明にしています。そして、切り口のギザギザはborderのdottedを使っています。よーく見ると、ギザギザでなくて点点になっているのがわかると思います。

そして最後に、transformのrotateで少し回転させて自然なカンジになります。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup