Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

カテゴリ:CSS3関連 2009年12月17日 14:49

PhotoshopライクなCSS3ジェネレーターイメージ
[09/12/22]
Opera でもいよいよ border-radius に対応する ようです。また、W3C の「CSS Backgrounds and Borders Module Level 3」が勧告案(Candidate Recommendation)になったためか、Opera ではプレフィクスがないようです。
なので、プレフィクスのない border-radius プロパティも出力するように修正しました。
[09/12/18]
若干 機能追加を行いました。
作成したものを、IE の独自拡張である filter を用いて、同じような表示になるソースも出力できるようになりました。
ただ、そもそもの実装が違うので完全には再現されません。(グラデーションが最初と最後の色しか指定できない、など)

今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。

メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。

ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6以上か、WebKit 系のブラウザでしか動作しません"。

色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。

Photoshop ライクな CSS3 ジェネレーター

作ってみた感想など

今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたw なので、全体的に CSS3 をめっさ使ってます。

加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。

この記事のカテゴリー一覧を見る⇒CSS3関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/169