Woven Texture Hero

亜麻布の縦横の糸目を CSS のグラデーションだけで表現した背景の上に、縫い目のような点線の枠で囲んだ見出しを置くヒーローの解説です。写真は使いません。

02 / Swatch

Swatch Switcher

色見本の丸いボタンを押すと、大きな写真の色調が切り替わる仕様の解説です。同じ1枚の写真に、CSS の filter で色味をかけています。

03 / Panels

縫い目の点線で囲んだパネルを、2列で並べる構成の解説です。丸いアイコン枠にも、同じ点線を使います。

丸いアイコン枠と短い説明を横に並べるパネルの解説です。

ホバーで少し浮き上がる、縫い目つきのパネルの解説です。

点線の枠と内側の細い余白で、縫い代を表現する構成の解説です。

2列2段で並べ、高さをそろえる構成の解説です。

左に写真、右に見出しと短い文とリンクを置く、横長の帯の解説です。

写真の左右を入れ替えて、リズムをつける横長の帯の解説です。