CSSだけでノート風の罫線を作る | MK2-BLOG～西宮のWEBデザイナー日記

最近レスポンシブ用のCSSを書くことが多く、できるだけCSSだけでコーディングできないものかと色々駆使しているMK2-STYLEのkawamoriです。 レスポンシブでフラットなデザインが主流だけど、そっけない感じにはしたくない。 そんな時に罫線を使った枠でノート風に飾れるCSSを見つけたのでご紹介。 .note{ position: relative; background-color: #ffffe7; background-image: linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em); background-size: 100% 1.5em; line-height:1.5em;} 大元はノートっぽい感じで縦に罫線が入っているものですが、縦の罫線が要らなかったので上に変更しました。 .lined-paper