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

執筆者:

関連記事

no image

Carrierwaveでpdfのサムネイルを作成する

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

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

Rubyでウェブサイトを操作してリストをつくる〜mechanize

    By: JoshSemans   以前からRailscastsというRuby on Railsの動画サイトが好きでよく見ているのだが、380近く動画があって気にな …

no image

Rubyでffmpegのラッパーを使う~streamio-ffmpeg

  github.com/streamio/streamio-ffmpeg rubyでffmpegが扱える高機能ラッパー 導入 [crayon-59747da84d799329136058/ …

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …