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
-, ,

執筆者:

関連記事

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

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

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …