「CSS3.0 Maker」で簡単にCSSのコードを作る

s a1380 001021 m 「CSS3.0 Maker」で簡単にCSSのコードを作る
今回は「CSS3.0 Maker」を紹介します。
こちらはプレビューを見ながら値を試すことができ、更に出来上がったCSSのコードをダウンロードできるという優れものです。

CSS3.0 Maker

http://www.css3maker.com/

 「CSS3.0 Maker」で簡単にCSSのコードを作る

その名の通りCSS3.0のコードを作ってくれるサイトです。
今回はその中から3種の機能について紹介します。

※一部機能がブラウザによって使えないことがあります。

 

Border Radius

2013041501 1024x807 「CSS3.0 Maker」で簡単にCSSのコードを作る

Style:線のスタイル
Width:線の幅
Radius T-Left:左上の丸み
Radius T-Right:右上の丸み
Radius B-Left:左下の丸み
Radius B-Right:右下の丸み
Color:線の色

実際に見ながら数値を弄れるというのは本当に便利ですね。

 

Gradient

2013041502 1024x807 「CSS3.0 Maker」で簡単にCSSのコードを作る

Type:線状か円状か
Start Color:始まりの色
Start H Position:始まりの横位置
Start V Position:始まりの縦位置
Angle:角度
End Color:終わりの色
End H Position:始まりの横位置

面倒そうなグラデーションもこの通りお手軽に作れます。

 

text-shadow

2013041503 1024x807 「CSS3.0 Maker」で簡単にCSSのコードを作る

Horizontal Length:影の横位置
Vertical Length:影の縦位置
Blur Radius:影のぼかしサイズ
Shadow Color:影の色

影をつけるのもとっても簡単。
出来上がったら右側のコードの上にある”Download”を押せばhtmlがダウンロードできます。

 

いかがでしょうか。
今回紹介した3つ以外にも

  • CSS Transform
  • CSS Animation
  • CSS Transition
  • RGBA
  • Box Shadow
  • Text Rotation
  • @Font Face

と様々なスタイルが使用できます。

ぜひ一度「CSS3.0 Maker」お試しください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">