#334 Compass & CSS Sprites RailsCasts
ズルいデザインテクニックスライド
github.com/mahm/zurui-sass-rails
Railsで使う場合の準備
Gemfile
1 2 3 4 | group :assets do gem 'compass-rails' gem 'zurui-sass-rails' end |
bundle
base.css.scss
1 2 3 | @import "compass/utilities" @import "compass/css3" @import "zurui-sass" |
角丸
リファレンス
compass-style.org/reference/compass/css3/border_radius/
1 | @include border-radius(5px); |
6px以内がいいそうです
グラデ
リファレンス
1 | linear-gradient(開始位置と角度, 開始色, 途中色, 終了色); |
下のサイトから引用
www.htmq.com/css3/linear-gradient.shtml
1 | filter-gradient($start-color, $end-color, $orientation) |
compass-style.org/reference/compass/css3/images/#mixin-filter-gradient
for use of ie 6~8
you should place this before any background-image properties that you have specified.
compass-style.org/reference/compass/css3/images/#mixin-background-image
demo
compass-style.org/examples/compass/css3/gradient/
zurui 上明るめ
zuruiソースから引数の参考に
1 2 3 4 | @mixin zurui-gradient-top-lighten($color:#666, $lighten:10%) background-color: $color @include filter-gradient(lighten($color, $lighten), $color, vertical) @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%)) |
$colorは基本色、$lightenは％
カラーコード１桁目で２くらいの差がいいらしい.16進数だから、ff=256 で20=32くらい?だいたい10％なのかな.
正確に計算すると12.5%がいいのかも.
zurui 上暗め
1 2 3 4 | @mixin zurui-gradient-top-darken($color:#666, $darken:10%) background-color: $color @include filter-gradient(darken($color, $darken), $color, vertical) @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%)) |
background_sizeという背景全体に引き伸ばすmixinも ある
compass-style.org/reference/compass/css3/background_size/
半透明
リファレンス
compass-style.org/reference/compass/css3/opacity/
1 | @include opacity(0.8); |
透明度は0~1の間で
すりガラス風のボックスはどうやって作るんだ？
テキストシャドウ
リファレンス
1 | text-shadow $x-offset $y-offset $blur $color; |
CSS3 text-shadow box-shadow の使い方
www.htmq.com/css3/text-shadow.shtml
compass-style.org/reference/compass/css3/text-shadow/
mixin
1 | text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) |
シングルシャドウ
1 | single-text-shadow($hoff, $voff, $blur, $spread, $color) |
demo
compass-style.org/examples/compass/css3/text_shadow/
よくわからないからデモとかズルいテキストシャドウのソースをいじるほうがいいかも
いろんな装飾のパターンが欲しい 特に暗い背景でも明るい背景でも使える黒枠白抜きのやつとか
よくある表現がたくさんmixinになるといいなあ
参考
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
ちょっとやってみたけど、数値の調整が必要ぽい
Using CSS Text-Shadow to Create Cool Text Effects
あたりまえだけど、影の長さのバランスは字の大きさに比例するから、字が大きければ見栄えのいいのができそう
このへんはフォトショぢからが必要ぽい
H1一つでここまで出来るCSS見出しデザインのアイデア9個
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン
ズルいシャドウ
1 2 3 4 5 | @mixin zurui-ts-000($op:.4) text-shadow: 1px -1px rgba(0, 0, 0, $op) @mixin zurui-ts-fff($op:.7) text-shadow: -1px 1px rgba(0, 0, 0, $op) |
$opは透明度(0~1で指定) 透明度は背景色にあわせて透け具合を調整するそうです
ボックスシャドウ
リファレンス
1 | box-shadow: $x-offset $y-offset $blur $color; |
demo
compass-style.org/examples/compass/css3/box_shadow/
zurui
枠線がわりの薄いボケを外側に
1 2 | @mixin zurui-box-outer($op1:2px) @include box-shadow(rgba(0, 0, 0, .15) 0 0 $op1) |
内側にボケて高級感を出す
1 2 | @mixin zurui-box-inner($op1:20px) @include box-shadow(rgba(0, 0, 0, .2) 0 0 $op1 inset) |
凹みボックス
1 2 3 | @mixin zurui-box-deboss($border:.1, $shadow:.1, $highlight:1) border: 1px solid rgba(0, 0, 0, $border) @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 2px inset, rgba(255, 255, 255, $highlight) -1px 1px 0) |
凸ボックス
1 2 3 | @mixin zurui-box-emboss($border:.15, $shadow:.05, $highlight:1) border: 1px solid rgba(0, 0, 0, $border) @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255, 255, $highlight) -1px -1px 0 inset) |
普通の浮いてる風のやつはどうやるんだろう？
あとよくある選択したときぽわって周りに影みたいなのがつくやつとか
＊ktkr これをmixinにしておけば・・・
box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ
一部やってみたけど、すごく簡単だった
