制作ノート

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のボックスで囲う構造です。

<div class="tape">
<div class="paper">

ここに内容

</div>
</div>

セロテープのCSS

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

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

.tape {
    position:relative;/*テープの表示位置の基準となる*/
    display:inline-block;/*内容に合わせて幅も伸縮させる*/
}
.tape::before, .tape::after {
    content: "";
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.tape::before {
    left: -5%;
    top: -10%;
    width: 25%;
    height: 50px;
    transform: rotate(-10deg);
}
.tape::after {
    right: -5%;
    top: -10%;
    width: 24%;
    height: 50px;
    transform: rotate(10deg);
}

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

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

 

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

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

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

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

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

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


紙っぽいBoxのCSS

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

そのCSSはこんな感じ。

.paper{
    padding:50px;/*セロテープにかからないように、適宜Paddingをいれる*/
    box-shadow:1px 1px 2px rgba(0,0,0,.3);
    background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(239,239,225,1) 100%); 
}

 


まとめ

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

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


関連記事

LINE STAMPLine Stamp

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

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