CSS3のコードを出力したり学習したりするのに便利なジェネレータ7つ

CSS3のコードを出力したり学習したりするのに便利なジェネレータ7つ

7 Useful CSS3 Code Generators

PelFusion.comの上記エントリーにて、CSS3コードジェネレータが7種類まとめられているので、それぞれの概要と補足を加えて紹介します。

CSS3 Generator

CSS3 Generator

CSS3で実現可能な動作を動的に見せてくれるジェネレータ。対応ブラウザがアイコンで表示されている。CSS3の各種プロパティに対応していないブラウザだとアクセスしても無意味なので注意。

CSS3 Gradient Generator

CSS3 Gradient Generator

CSS3でのグラデーションコードを出力してくれる。ジェネレータはページ下部にあり。

CSS3 Sandbox

CSS3 Sandbox

CSS3の直線状のグラデーション、放射状のグラデーション、テキストシャドウ、ボックスシャドウなどをプレビューを見ながらコード出力できる。各項目ごとに対応ブラウザも明示されている。

CSS Border Radius

CSS Border Radius

CSS3の角丸のコードを生成する。四隅別に調節可能。できることはこれだけだが、それだけに分かりやすい。

Font Squirrel | Create Your Own @font-face Kits

Font Squirrel

Webフォント形式のWOFFをTTFファイルから作成してくれる。使い方や解説は「TTFファイルから新しいWebフォントのWOFFファイルを作成する@FONT-FACE GENERATOR - かちびと.net」が詳しい。

border-image-generator

border-image-generator

名前のとおりborder-imageのコードを生成。border-imageに関しては下記の記事が参考になる。

CSS3 Please

CSS3 Please

クロスブラウザに対応のCSS3コードを動的にプレビューしながらいじれる。黄色い文字部分がいじれる項目。ジェネレータというより学習ツールに近い感じ。

▼スポンサードリンク

記事URL | Trackback(0) | Comment(0) | Webサービス
1つ後の記事:素晴らしいロゴがたくさんのサイト『LogoPond』
1つ前の記事:「緑」をメインカラーにした美しいWebサイト40選


















管理者にだけ表示を許可する

トラックバックURL
http://webclipping.blog122.fc2.com/tb.php/69-245341d2
この記事にトラックバックする(FC2ブログユーザー)