-
Notifications
You must be signed in to change notification settings - Fork 1
hands on outline
#ズルいハンズオン すじがき
$ gem install middleman
$ git clone [email protected]:prog4designer/zurui-hands-on.git
$ bundle install
$ bundle exec middleman
-> http://localhost:4567/
https://github.com/mahm/zurui-sass-rails
(by mah_lab）
と同様のSassを使って、ズルいデザインの作り方を体験する
今日帰って zurui-sass-rails をbundle すればすぐにズルいデザインがあなたのRailsアプリに取り入れられる！
source/stylesheets/zurui/_tryout.css.sass
15行目
background: $base-color url(/images/paper.png)//ズルい背景パターン
紙のテクスチャ
http://subtlepatterns.com/paper/
59行目
background: #EACB95 url(/images/purty_wood.png) //ズルい背景パターン
木目のテクスチャ
http://subtlepatterns.com/purty-wood/
51行目
+zurui-line-right($op1: .2, $op2: .2) //ズルい線
$op1:黒い線、 $op2: 白い線
ためしに
+zurui-line-right($op1: .5, $op2: 1)
とかやってみると線の濃さが変わります
背景に彫り込まれているようにみせるには、見えるか見えないかくらいまで薄くするのがコツ
17行目
+zurui-ts-fff(1) //ズルいテキストシャドウ
白い影をつけることで彫り込まれているような立体感
-> 変になってしまった部分がある
40行目
+zurui-ts-000(.3) //ズルいテキストシャドウ
白文字の場合は上の方に黒い影をつける
馴染む透明度に調節
60行目
+zurui-ts-fff(.5) //ズルいテキストシャドウ
透明度をbody よりも薄くすることで木目になじむように
38行目
+zurui-gradient-top-lighten($main-color, 10%) //ズルいグラデーション
ヘッダが10%明るいグラデーション
66行目
+zurui-ts-000(.3)//ズルいテキストシャドウ
64行目
+zurui-gradient-top-lighten($accent-color) //ズルいグラデーション
ちなみに ボタンに使用している $accent-color は $main-color の彩度を200°転換
$accent-color: adjust-hue($main-color, 200)
70行目
+zurui-gradient-top-lighten(lighten($accent-color, 5%)) //ズルいグラデーション
デフォルト時よりベースの色を5%明るく lighten($accent-color, 5%)
67行目
+zurui-box-emboss($border: .3, $shadow: .1, $highlight: .2) //ズルいボックスシャドウ
$border 枠線の濃さ、 $shadow 左下の影の濃さ、 $highlight 右上のハイライトの濃さ
ためしに
+zurui-box-emboss($border: 1, $shadow: 1, $highlight: 1)
とかやってみると濃さが変わるのが体験できます
43行目
+box-shadow(rgba(0,0,0,.2) 0 2px 5px) //ヘッダに影
Compassで影を追加
-> これだけだと影がつかない
z-index でレイヤーを設定してあげる必要がある
body のz-indexを1に
18-19 行目
position: relative //ヘッダに影
z-index: 1 //ヘッダに影
※z-indexにはpositionが必要
headerのz-indexを2に
41-42行目
position: relative //ヘッダに影
z-index: 2 //ヘッダに影
11行目 - 12行目
@import url(http://fonts.googleapis.com/css?family=Lato)
font-family: 'Lato', Arial, 'メイリオ', Meiryo ,'ヒラギノ角ゴPro W3' ,'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif //ズルいフォント
Lato
http://www.google.com/fonts/specimen/Lato
Latoかわいい。Flat UIにも合う
今日やったものが全部適用されたサンプルが
source/stylesheets/zurui/_sample.css.sass
に入ってます
source/stylesheets/application.sass
の
@import zurui/sample
のコメントアウトをはずしてあげると読み込めます