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

執筆者:

関連記事

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …

no image

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …

今度こそRails3.2からdocxを生成する

  前提 Rubyからdocxを生成する 前回、イキオイアマって自分でdocxを生成する簡単なライブラリを作ってしまった.(なんて車輪の再発明 今回はこれをRailsから利用してみる. 目次 …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …