StylusでスキューモーフィックなCSS3ジェネレータを作った
ゴールデンウィーク中はずっと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
こんな感じのファイルを通常、ホバー、クリック時と３つ組み合わせてテーマを作る。
描画レイヤー
背景に画像を使っている物以外はbox-shadowとgradientで描画している。
描画は４つのレイヤーに分かれていて、上から順に
- ビネット効果*2
- ディテール
- 全反射（映り込み）
- テクスチャ
となっている。
その上にあるテキストはtext-shadowを使っている。
background-imageは複数重ねられる
最初、レイヤーを重ねる度に<div>が増えるいわゆるdiv芸的な事をしていたけど、調べるうちにbackground-imageが複数重ねられる事を知った。
その代わりに<div>要素のようにopacityを設定できないというデメリットもあるにはある。
まだ仕組みがよく分かってないけどliner-gradientとかradial-gradientを駆使するとこんなことも出来るらしい。
今回はテクスチャとして幾つか画像を使っているけど、替わりにCSS3パターンを入れても面白い物が出来そう。
あとプレビューで使っててFireFoxのCSS3レンダリングがすごい滑らかという事に気づいた、しばらく使ってない間にだいぶパワーアップしている。
そしてSafariの遅いことよ…
デモ
click me
usual
hover
active
yes
no
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
yes
no
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
yes
no
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
yes
no
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
yes
no
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
yes
no
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
yes
no
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に上げれてないので、上げた時に別記事でもう少し詳しく書こうと思います。
