+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< September 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 【福岡から】地震に関する支援情報まとめてみました 3/14 18:58追記【募金・物資支援】 | main | 【スプー】jsdo.ti javascriptでモーフィング【はいだしょうこ】 >>
CSSジェネレーター【Layer Styles】
20110511.jpg

暑いですね。
すっかり初夏です。お久しぶりです。
諸事情により更新が滞っていましたが、再開いたします。

今回はCSSのドロップシャドウや角丸の設定をブラウザ上で行えるジェネレーターを紹介します。ちょっとすごいです。

サイトはこちら
■Layer Styles
http://www.layerstyles.org/builder.html



20110511_1.jpg
インターフェイスはこんな感じ。
Adobeソフトのようなコントロールパネルと、中央に四角い図形がひとつ。
左下の「CSS Code」をクリックすると、図形に対するCSSのソースを確認することができます。


コントロールパネルは、
  • ドロップシャドウ(Drop Shadow)
  • インナーシャドウ(Inner Shadow)
  • 背景(Background)
  • ボーダー(Border)
  • 角丸(Border Rediua)
の項目があり、それぞれ詳細をコントロールできます。
Adobe製品っぽいので、細かい部分で悩むことなく操作できる感じになっています。


20110511_2.jpg
シャドウ系はほぼそのままphotoshopのフィルターと同じです。


20110511_3.jpg
背景も同様。
グラデーションも線形、放射状など選択でき、角度の調整も行えます。


20110511_4.jpg
カラーのセレクトもほぼphotoshopと同じです。


20110511_5.jpg
ボーダー設定はこんな感じ。
ソリッド、ダッシュ、ドット、ダブルの4つから選択できます。


20110511_6.jpg
角丸は、ピクセルかパーセントで指定できます。
その下のブロックは角丸にしない部分の指定です。



20110511_7.jpg
左上だけ固定すると、こんな感じになります。

設定が完了したら、ソースをコピーして自分のCSS反映できるようになっています。
また、カラーモードをRGB表記、HEX表記どちらでも選択できるので、便利です。


これがCSSだけでコントロールできるってなんだかすごいなあ。
当然、古いブラウザやCSS3の各機能にブラウザが対応していない場合は表示されないところもありますが、iphoneやiPadなどは対応しているので、活用の場は広がりそうです。


| CSS | 11:00 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - CSSジェネレーター【Layer Styles】 | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990269