CSS3だけでつくる付箋紙(Post it)風Box
昔話をすれば、インターネット黎明期のころ私は角丸の枠を作りたくて、一生懸命にTableタグと角丸の小さなGif画像を駆使してそれを実現していました。「角が丸いボックスが作れる」それだけでちょっとしたものを作った気分でした・・・
しかしHTMLが5まで進化し、CSSが登場したと思ったらもうバージョン3の今、角丸はborder-radiusの一行で終わりです。いやぁ、世の中便利になった!
それでは本題、CSS3だけでつくる付箋紙の作り方を紹介していきます。この付箋紙デザインは当サイトの「RECENT POSTS」でも利用しています(2016年5月現在)。
まずはサンプル
- 付箋紙っぽいデザインの1
- 付箋紙っぽいデザインの2
- 付箋紙っぽいデザインの3
高さは伸縮自在
です。
HTML
今回はリストタグに応用しています。
<div class="fusen" style="padding-left: 60px;"> <ul> <li>付箋紙っぽいデザインの1</li> <li>付箋紙っぽいデザインの2</li> <li>付箋紙っぽいデザインの3 高さは伸縮自在 です。</li> </ul> </div>
基本のCSS
.fusen{ width:300px;/*幅はお好きなサイズに*/ position:relative; z-index:0; } .fusen ul li { font-size: 0.9em; margin: 1.6em 0; padding: 1em; position: relative; /* グラデーションで折り目がついた感じに */ background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%); } .fusen ul li::after{ /* ドロップシャドウを少し斜めに配置して、立体感を出す */ content:""; display:block; position: absolute; z-index: -1; bottom: 5px; right: 0; height: 15px; width: 99%; background: rgba(0,0,0,0.5); box-shadow: 0 5px 5px rgba(0,0,0,0.3); transform: rotate(2deg); }
追加のCSS
奇数のリストタグと偶数のリストタグで背景色とマージンを変えると、よりバラつきのある雰囲気になります。
.fusen ul li:nth-child(odd) { /* 奇数番のli */ background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%); } .fusen ul li:nth-child(even) { /* 偶数番のli */ background: linear-gradient(to right, #FDF8E6 0%, #F5ECDA 0.5%, #F5ECDA 13%, #FDF8E6 16%); margin: 1.6em 0em !important; }
まとめ
一昔前なら画像でしか表現できなかったものが、background: linear-gradient() や transform: rotate() 、box-shadow などを上手く組み合わせてコードだけで表現できるようになりました。スマートフォンサイトなどでは極力画像の利用を避けたいので、CSS3で表現の幅が広がったことは本当に素敵ですね。