たまに見る、写真をセロテープで止めた感じの画像の見せ方。以前は画像でしたが、CSSで表現できるので試してみたのでメモ。

とりあえず、下記のような感じす。　説明はポイントとなりそうな所だけ書いていこうかと。

htmlファイルの準備

とりあえず、htmlファイルを準備しましたが、クラスは下記のような表現の設定です。

yokohama mid night

there are also few ventures that an application will be developed earnestly and, as for it, a game is not an exception, either.

CSSの設定

まずは、画像とテキストの下に敷く紙のような表現をするため下記のようなCSSを設定します。

box-shadowで紙のような質感を作る

背景は白にして幅とかmarginとかpaddingはお好みで。positionについてはセロテープを表現する要素を絶対配置にするため、基準となるように設定しています。

.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:300px;
    margin:40px auto;
    padding: 25px;
}

box-shadowでは外側と内側に微妙に影を作ることで表現しています。上記の書き方は両方設定した書き方で外側、内側両方設定したい場合は、カンマ（,）区切りで記述します。

色に関しては「rgba」で表現する必要があり上記は透過率を0.3と0.1に設定しています。

必須項目として、水平方向 垂直方向 色は最低限設定する必要があります。

詳しい説明は「box-shadow－CSS3リファレンス – HTMLクイックリファレンス」の記事を参照ください。

セロテープのような表現を作る

まず、セロテープに見せたいので、色は白にして少し透明にしたいのでrgbaで0.4に設定しています。後は幅と高さ、positionは絶対配置にしてleftで真ん中よりにしてtopで少し上に設定してはみ出すようにしています。

.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(-8deg);
}

box-shadowで輪郭をだす

box要素でも仕様しましたが、セロテープでは水平方向と垂直方向は0で影のぼかしを5pxで設定することで淡い輪郭を出しています。

borderのdottedを利用してジャギ感を出す

box-shadowでもそれなりなんですが、borderプロパティのdottedを利用して、rgbaで0.1で限りなく透明に近い状態にすると、ジャギ感（セロテープを切った様な感じ）がでるので左右だけに設定します。

transformで回転させる

transformのrotateメソッドで少し回転させ斜めにさせることで自然な表現になります。

rotateでは回転角度を指定するので、例えば90度回転させたい場合は下記のようになります。

.tape{
	-webkit-transform:rotate(45deg); /* 45度回転 */
    -webkit-transform:rotate(90deg); /* 90度回転 */
	-webkit-transform:rotate(125deg); /* 125度回転 */
}

といった感じで、写真をセロテープで止めた感じの画像の見せ方もCSSでそれなりに表現できる世の中になりました　笑