制作ノート

2016.05.20

CSS3だけでつくるセロテープ

CSS3でつくるセロテープ

画像を使わずセロテープを貼った感じに

CSS3のtransformを利用して、紙をセロテープで止めた感じのBoxをつくります。

おおまかな構造としては

  1. 薄くグラデーションをつけた背景と薄いドロップシャドウをかけたBoxを作る
  2. 1.のBoxのBeforeに、半透明で薄いドロップシャドウをかけたセロテープっぽいBoxを作り、左斜め上に配置する
  3. 1.のBoxのAfterに、半透明で薄いドロップシャドウをかけたセロテープっぽいBoxを作り、右斜め上に配置する

となります。


まずはサンプル

サンプル1:横幅300pxのボックスです。

 

 

ミラクル猫マンとワンダー犬マンスタンプ「取り込み中だ」

LINEスタンプ絶賛発売中です。

サンプル2:特に幅をしていない場合は、内容物に合わせて伸縮します。画像を配置するなど、内容は好きに使えます。

HTML

HTMLはこんな感じ。 クラス名:paperのボックスを、クラス名:tapeのボックスで囲う構造です。


セロテープのCSS

クラス名:tapeのボックスには position:relative; を与えます。そうしておくことで、内容物の大きさが変わってもセロテープを表現するBeforeとAfterがちゃんと右端上と左端上に配置されます。

また display:inline-block; としておくと、ボックス要素でも内容物に合わせて幅が伸縮します。

上記ではBeforeとAfterの共通項目をある程度まとめて記述していますが、左右の違いをもっと出してもかわいいです。

例:左右のテープに違いを出した場合

 

サンプル3:テープの背景色をパターンにしてみました。

パターンやグラデーションもCSSで

背景のパターンやグラデーションも、CSS3ならコードだけで表現できますが、コードをイチから書くのは中々たいへん。

そんな場合はヘルプツールやコードサンプルを活用します。私がよくお世話になっているのは以下。

【パターンサンプル】CSS3 Patterns Gallery

【グラデーション作成ツール】Ultimate CSS Gradient Generator


紙っぽいBoxのCSS

セロテープで貼るボックスのデザインはなんでもいいのですが、サンプルでは紙っぽいものにしてみました。

そのCSSはこんな感じ。

 


まとめ

CSS3を使えば、画像に頼らずいろいろな表現がコードだけでできるので、サイトの軽量化に大いに役立ちますね❤

しかも上記のコードはボックスが伸縮自在なので、汎用性の高いものになっています。気に入ったら使ってみてください^^


関連記事

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。