Railsで使えるGem

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

投稿日:

sass-lang.com/

Sassの基礎 (全15回) ドットインストール

ネストを覚えた人のためのSassの便利な使い方

compass-style.org/

Compassの基礎 (全7回) ドットインストール

#334 Compass & CSS Sprites RailsCasts

ズルいデザインテクニックスライド

github.com/mahm/zurui-sass-rails

Railsで使う場合の準備

Gemfile

bundle

base.css.scss

 

角丸

リファレンス

compass-style.org/reference/compass/css3/border_radius/

6px以内がいいそうです

グラデ

リファレンス

下のサイトから引用

www.htmq.com/css3/linear-gradient.shtml

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ソースから引数の参考に

$colorは基本色、$lightenは%

カラーコード1桁目で2くらいの差がいいらしい.16進数だから、ff=256 で20=32くらい?だいたい10%なのかな.

正確に計算すると12.5%がいいのかも.

zurui 上暗め

background_sizeという背景全体に引き伸ばすmixinも ある

compass-style.org/reference/compass/css3/background_size/

 

半透明

リファレンス

compass-style.org/reference/compass/css3/opacity/

透明度は0~1の間で

すりガラス風のボックスはどうやって作るんだ?

 

テキストシャドウ

リファレンス

CSS3 text-shadow box-shadow の使い方

www.htmq.com/css3/text-shadow.shtml

compass-style.org/reference/compass/css3/text-shadow/

mixin

シングルシャドウ

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と擬似要素を使った立体的な見出しデザイン

ズルいシャドウ

$opは透明度(0~1で指定) 透明度は背景色にあわせて透け具合を調整するそうです

 

 

ボックスシャドウ

リファレンス

 box-shadow の使い方

demo

compass-style.org/examples/compass/css3/box_shadow/

zurui

サンプル

枠線がわりの薄いボケを外側に

内側にボケて高級感を出す

凹みボックス

凸ボックス

普通の浮いてる風のやつはどうやるんだろう?

あとよくある選択したときぽわって周りに影みたいなのがつくやつとか

*ktkr これをmixinにしておけば・・・

box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ

一部やってみたけど、すごく簡単だった

 

【CSS】Sassの実践的な使い方 -HTML5カンファレンス等まとめ

地味に使えるCSS小技のメモ&サンプル集

-Railsで使えるGem
-, ,

執筆者:

関連記事

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

simple_formからdatepickerを使うには~ui_datepicker-rails3

  github.com/kristianmandrup/ui_datepicker-rails3 目次1 Gemfile2 js3 css4 initializer5  使う6 できた G …

Rails3で帳票印刷を試す~thinreports

  www.thinreports.org/ github.com/thinreports/thinreports-rails3-example 目次1 とりあえずサンプルを試してみた2 ソ …

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …