Illustration, Graphic design & ◎久々に見たらスタイルがおかしくなっていたので、サンプルもCSSも修正しました！（2022年3月）
付箋紙デザインはcss３だけで表現
昔話をすれば、インターネット黎明期のころ私は角丸の枠を作りたくて、一生懸命にTableタグと角丸の小さなGif画像を駆使してそれを実現していました。「角が丸いボックスが作れる」それだけでちょっとしたものを作った気分でした・・・
しかしHTMLが5まで進化し、CSSが登場したと思ったらもうバージョン3の今、角丸はborder-radiusの一行で終わりです。いやぁ、世の中便利になった！
それでは本題、CSS3だけでつくる付箋紙の作り方を紹介していきます。この付箋紙デザインは画像のように、当サイトの「RECENT POSTS」でも利用していました。
まずはサンプル
- 付箋紙っぽいデザインの1
- 付箋紙っぽいデザインの2
- 付箋紙っぽいデザインの3
高さは伸縮自在
です。
HTML
今回はリストタグに応用しています。
<div class="fusen"> <ul> <li>付箋紙っぽいデザインの1</li> <li>付箋紙っぽいデザインの2</li> <li>付箋紙っぽいデザインの3 高さは伸縮自在 です。</li> </ul> </div>
基本のCSS
.fusen {
width: 300px;/*幅はお好きに*/
position: relative;
z-index: 0;
}
.fusen ul {
list-style: none;
}
.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 {/*BOXを微妙に斜めにして配置、シャドウで立体感を出す*/
content: "";
display: block;
position: absolute;
z-index: -1;
margin: auto;
background: rgba(0, 0, 0, .5);
box-shadow: 0 5px 5px rgb(0 0 0 / 30%);
transform: rotate(1deg);
top: 6%;
right: .5%;
left: 2%;
bottom: 8%;
}
追加の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で表現の幅が広がったことは本当に素敵ですね。
