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

執筆者:

関連記事

Ubuntu ServerのGuardからGrowl for Windowsにネットワーク経由で通知する

github.com/guard/guard 普段はWindows7から仮想環境(VirtualBox)のUbuntu Server 12.04.1へputtyで接続して開発してます. Virtual …

Railsでデータベーススキーマの変更と関連するモデルのフォーム

  gemを公開しました!詳細は記事の最後に!   新規投稿するフォームのラベルが変数を使っていて見苦しいので自分で好きなラベルを付けられるようにした いまのスキーマはこんな感じな …

RubyでWebを操作できるMechanizeの利用例を集めてみた

By: nubobo – CC BY 2.0 目次1 公式2 使い方など3 リンク 公式 mechanize.rubyforge.org/ 使い方など Mechanize について 楽々ス …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

no image

Rubyでxmlの要素の追加など~nokogiri

目次1 はじめに2 文字列をパースしてxmlとして読み込んでそのままxmlとして出力する3 nodeの追加4 nodesetの作成と追加5 DocumentFragmentの作成と追加 はじめに 参考 …