お気に入りのアプリ&サービス コラム 自分でホームページを作ろう

コピペで簡単!CSSジェネレータ5選

先ほどサイドメニューの見出しのデザインを変更してみましたが、分かりますか?
CSS3で実現する吹き出しデザインにしてみました。画像を使用していないので、レスポンシブ対応もバッチリ。

吹き出しデザインのCSSコードは『CSSジェネレーター』を利用しました。
便利ですよね。サクッと選んでコピーするだけで完了!

 

今回利用したCSSジェネレーターはこちらのサイトです。

http://cssarrowplease.com

吹き出しの位置、サイズ、背景色、線幅、線の色を選ぶと、右にコードが表示されます。

色の組み合わせや線幅を変えるだけで、かなりイメージが変わりますね。

 

次のCSSジェネレーターは透明感のあるデザイン枠を簡単に作成できる『CSS3 GENERATOR

スクリーンショット 2013-08-13 14.41.23

上から、角を丸める角度、角度、背景色、透明度を設定できます。

『Get the Code』ボタンを押すと、コードが表示されます。

スクリーンショット 2013-08-13 14.40.50

ブラウザーの対応についても選択できます。

あとは、CSSファイルにペーストすれば完了!

 

こちらのサイトは、ボタンも作成できちゃいます。
http://css3gen.com

 

そして、メニューもジェネレーターでサクッと作成
http://cssmenumaker.com

 

最後は、女性にオススメのリボンが作成できるジェネレーターです。
http://www.css3d.net/ribbon-generator/

 

便利なツールはどんどん利用して、Web製作時間も効率化していきましょう。

…ま、あまりにも便利なサービスが増えすぎると、商売上がったりになってしまいますが。

 

 

 

 

 

この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts

No Comments

Leave a Reply