Photoshop風インターフェイスで使いやすいCSSグラデーションのジェネレーター
Post on:2010年10月7日
sponsors
Photoshop風のインターフェイスを備えた、とっても使いやすいCSSグラデーションを作成するオンラインジェネレーターを紹介します。
Ultimate CSS Gradient Generator
[ad#ad-2]
生成されるスタイルシートは、moz系（Firefoxなど）、webkit系（Chrome, Safariなど）だけでなく、旧ブラウザやIE用のfilterも生成されます。
生成されたスタイルシートの例
|
1 2 3 4 5 6 7 |
background: #eeeeee; /* old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #5E5E5E 42%, #cccccc 70%, #cccccc 87%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(42%,#5E5E5E), color-stop(70%,#cccccc), color-stop(87%,#cccccc)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */ |
グラデーションには、あらかじめ豊富なプリセットが用意されています。
グラデーションのプリセット
グラデーションを作成する際は、Photoshopのグラデーションエディタと同様の操作感覚で行えます。
カラー分岐点を複数設置することも可能で、ダブルクリックでカラーピッカーが表示されます。
グラデーションのプレビューとスタイルシートは、右側に表示されます。
sponsors
