ゴールデンウィーク中はずっとStylusを触ってた。
CSS3を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。
実際にページ内で使う事を考えると、全部画像にした方が結局出来ることも多いしあんまりCSS3のメリットは無いんだけど、マシンパワーがもっと上がってジャブジャブ使えるようになればこういうアプローチもありかも知れない。
もしくは手軽にデザインを調整出来るメリットはCSS3のほうがあると思うので*1、レンダリングされたものを画像としてキャプチャして本番環境は画像を使うという手もあるかもしれない。
まあ遅いとは言ってもtransition
のアニメーションや、:hover
などの状態の切り替えの描画以外はそこまで気にならないので、スタイルを切り替えないで使うのであれば実用にも耐えられると思う。
スキューモーフィックジェネレータ
マテリアルを定義するファイルとそれらを組み合わせたテーマファイルを用意することで、外観を変えられるような仕組みになっている。
// theme color
$theme_color = #a9a19c
// modulation config
$lightness_mod = -38
$saturation_mod = 0
$spin_mod = -5deg
// text color
$txt_color = #eee
こんな感じのファイルを通常、ホバー、クリック時と3つ組み合わせてテーマを作る。
描画レイヤー
背景に画像を使っている物以外はbox-shadow
とgradient
で描画している。
描画は4つのレイヤーに分かれていて、上から順に
- ビネット効果*2
- ディテール
- 全反射(映り込み)
- テクスチャ
となっている。
その上にあるテキストはtext-shadow
を使っている。
background-image
は複数重ねられる
最初、レイヤーを重ねる度に<div>
が増えるいわゆるdiv芸的な事をしていたけど、調べるうちにbackground-image
が複数重ねられる事を知った。
その代わりに<div>
要素のようにopacity
を設定できないというデメリットもあるにはある。
まだ仕組みがよく分かってないけどliner-gradient
とかradial-gradient
を駆使するとこんなことも出来るらしい。
CSS3 Patterns Gallery
今回はテクスチャとして幾つか画像を使っているけど、替わりにCSS3パターンを入れても面白い物が出来そう。
あとプレビューで使っててFireFoxのCSS3レンダリングがすごい滑らかという事に気づいた、しばらく使ってない間にだいぶパワーアップしている。
そしてSafariの遅いことよ…
デモ
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
テクスチャにパターンを使用してみる、パターンはここで作った。
Plain Pattern
オリジナルのSVG素材も使えるっぽい、便利。
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
テクスチャに布地っぽい画像を使用、こういう質感は画像が向いている。
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
click me
usual
hover
active
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
まだgithubに上げれてないので、上げた時に別記事でもう少し詳しく書こうと思います。