CSS3プロパティの勉強になるジェネレータ16個

CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。

CSS3プロパティ全般

ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。

CSS3.0 Maker

CSS3.0 Maker

テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。

  • CSS Transform
  • Box Shadow
  • Text Shadow
  • Text Rotation
  • RGBA
  • @Font Face
  • Outline Offset
  • Transition
  • CSS Gradient

CSS3 Generator

CSS3 Generator

これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。

  • Border Radius
  • Box Shadow
  • Text Shadow
  • RGBA
  • @Font Face
  • Multiple Columns
  • Box Resize
  • Box Sizing
  • Outline
  • Transitions
  • Transform
  • Selectors
  • Gradients

CSS3 Plaground

CSS3 Plaground

枠の角丸、シャドウやフォント関連など様々な要素を同時に指定することができるので実用的だと思います。

  • Border Radius
  • Box Shadow
  • Text Shadow
  • Transforms
  • Columns
  • Gradient Background
  • Outline Offset

CSS3 Please!

CSS3 Please!

コードを直接編集できるジェネレータです。編集したらリアルタイムでプレビューが表示されます。珍しい形ですが自分でコードを触れるので勉強になりそう。

CSS3プロパティジェネレーター

CSS3プロパティジェネレーター

日本語サイトで、テキスト関連、グラデーション、ドロップシャドウ、角丸などの設定がおこなえます。

  • background color (グラデーション)
  • border / padding
  • drop shadow
  • innner shadow
  • text font
  • text shadow

ボタン関係

CSS3で画像のようなボタンを作ることができます。

CSS3 Linear Gradient Buttons Generator

CSS3 Linear Gradient Buttons Generator

かなり細かい設定が可能なボタン作成ジェネレータです。オンマウス時の設定もできて、その場で確認もできます。

  • border
  • border-radius
  • box-shadow
  • padding
  • text-shadow
  • font
  • gradient

CSS3 Button Generator

CSS3 Button Generator

以下の要素を指定して画像のようなボタンを作ることができます。

  • background color (gradient)
  • border radius
  • drop shadow
  • text font
  • text shadow

css3 button generator

css3 button generator

こちらもボタンで、テキスト、背景、ボーダーなどを自由に設定できます。指定できる要素は先ほどのものとほぼ同じですがhover設定もできます。

  • text
  • font-family
  • font-color
  • font-size
  • text-shadow
  • box-shadow
  • padding
  • border-radius
  • background color (gradient)

Button Maker

Button Maker

こちらも指定できる要素はほぼ同じですが、hover設定はこちらの方が豊富です。

  • Top Gradient Color
  • Bottom Gradient Color
  • Top Border Color
  • Hover Background Color
  • Text Color
  • Hover Text Color
  • Active Background Color

ボックス関係

グラデーションや角丸関連のジェネレータが多くなっています。

CSS3 Gradient Generator

CSS3 Gradient Generator

グラデーション作成用のジェネレータです。複数色のグラデーションやグラデーションの方向など詳細に設定することが可能です。

CSS3 Generator - By Eric Hoffman & Peter Funk

CSS3 Generator - By Eric Hoffman & Peter Funk

ボックス系のジェネレータで、かなり使いやすいと思います。グラデーションなどできるだけIEに対応させたコードも取得できます。

  • border-radius
  • box-shadow
  • background-gradient
  • opacity

Layer Styles

Layer Styles

背景グラデーションなども詳細に設定できます。サンプルもあるので作りやすいと思います。コードは左下をクリックすると現れます。

  • Drop Shadow
  • Inner Shadow
  • Background
  • Border
  • Border Radius

CSS Corners

CSS Corners

数は少ないですがシンプルで使いやすいと思います。

  • Border Radius
  • Gradient
  • Padding

その他

westciv - Transform

westciv - Transform

立体的になります。操作が結構難しいですが、アニメーションもあって面白いです。

  • 2D Transforms
  • 3D Transforms
  • Animation

westciv - Text Shadow

westciv - Text Shadow

text-shadowだけですが複数の影を重ねることができます。

  • text-shadow

border-image-generator

border-image-generator

ボーダーに画像を使用するborder-imageのジェネレータです。

  • border-image

Generateur de multi-colonnes en CSS3

G�n�rateur de multi-colonnes en CSS3

カラム関連のジェネレータです。私はまだまだ勉強不足です。

  • column-count
  • column-gap
  • column-rule
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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