Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 ジェネレータを使って楽に作る

今回は、CSS3のジェネレータについて書きます。


CSS3のジェネレータは、たくさんあります。使えそうなものをピックアップして、ここにまとめます。
(※ジェネレータって何?という人は、こちらを見てください。)

①CSS3.0 Maker

http://www.css3maker.com/index.html
f:id:gupuru:20140413184754p:plain

Boader Radius , gradienr , animation ,text shadowなどなど、いろいろなプロパティが作れます。

使い方は、左の方にあるバーを動かして調整するだけです。それで、右側にコードがあるので、それをコピペするだけです。
f:id:gupuru:20140413185135p:plain
↑赤丸の部分で調整し、↑青丸の部分コピペするだけです。

②Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/
f:id:gupuru:20140413185534p:plain

綺麗なグラデーションが作れます。

使い方は、下の画像の赤丸の部分で色を調整します。そして、画像の青丸の部分がコードです。
f:id:gupuru:20140413185734p:plain

③CSS3 Button Generator

http://css3button.net/
f:id:gupuru:20140413190132p:plain

角丸ボタンが作れます。

使い方は、下の画像の赤丸の部分で「ボタンの色」や「角丸」を調整します。そして、画像の青丸の部分がコードです。
f:id:gupuru:20140413190251p:plain

④CSS3 Playground by Mike Plate

http://css3.mikeplate.com/
f:id:gupuru:20140413190527p:plain

角丸,テキストシャドウ,背景,枠,テキスト本文などの装飾ができます。

⑤cssarrowplease

http://cssarrowplease.com/
f:id:gupuru:20140413190804p:plain

吹き出しが作れます。

使い方は、下の画像の赤丸の部分で「色」や「吹き出しの方向」を調整します。そして、画像の青丸の部分がコードです。
f:id:gupuru:20140413190931p:plain

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

http://css-eblog.com/eblog_sample/0912/css3-generator/
f:id:gupuru:20140413191200p:plain

日本語のジェネレータです。


以上で、終わります。


参考サイト
【CSS3】これはやばい!覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 - NAVER まとめ