http://logic-a.com/wp-content/themes/logica5.1

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

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

こんにちは! iPhone5に踏ん切りがつかず、未だにiPhone4の いわだて (@dutchisover) です!

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

サンプル

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

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

コード

HTML

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

CSS

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

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

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

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

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

最近の記事

Sponsored