読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

簡単にリボンやボタンを作る! CSSジェネレーター「Live Tools」を使ってみよう!

もうすっかりCSS3も浸透したようですね。

スマホのアプリなんかを見ていても、「おっ、ここはCSS3使ってるな」なんていうデザインをよく見かけたりします。

画像を使わなくてもそれなりに豪華な見栄えを作る事が出来るので重宝しているのですが、グラデーションやら、リボンやら、あれって自分で一から書こうとすると結構面倒くさいですよね。

 

そこで、今日は簡単にリボンやボタンが作成できるCSSジェネレーターの「Live Tools」を紹介します。

 

トップページはこんな感じ。

ここから、自分が作りたいものを選んでクリックします。

f:id:webarekore:20130116172939p:plain

 

試しに一番右端のリボンをクリックすると…。

 

f:id:webarekore:20130116173021p:plain

こんな画面が出てくるかと思います。

このページが作業画面ですね。

この時点で、やっぱり別のを作りたい!という場合は、右上の「Change Tool」というボタンを押すだけで切り替えられるみたいですね。

 

さて、この画面をスクロールしていくと、

「Ribbon Settings」、「Text Settings」、「Ribbon Colors」という項目があるかと思います。

それぞれ、

 

Ribbon Settings … リボンの幅、ギザギザ部分の大きさ、縫い目とシャドウの有無

Text Settings   … テキスト関係。サイズ、カラー、テキストシャドウのカラーの設定

Ribbon Colors … リボンのグラデーションカラー、影の色、ギザギザ部分の色の設定

 

となっていて、ほとんどがクリックとドラッグだけで出来るので、誰でも簡単に作成する事ができるようになっています。

 

f:id:webarekore:20130116173221p:plain

 

気に入ったものができたら、3つの項目の下部に設置されている「Generate HTML」と「Generate CSS」をクリックして、コピー&ペーストするだけです。

 

リボンの他にも、ボタンやフォーム、アイコンも作れるので、是非皆さん使ってみてくださいね!