スポンサード リンク
Sunday 2010/09/12

CSS3を使った角丸ボタンを作れるジェネレータ「CSS Corners」

CSS Corners
CSS3を使った角丸ボタンを簡単に作れるジェネレータです。「CSS Corners」は、画像を使わずに背景の付いた角丸ボタンをリアルタイムで表示しながら作成可能。

グラデーションカラーやボタン内の空白、角丸のサイズをカスタマイズできます。

ウェブサイトの中心に角丸ボタンのプレビューがあり、スライダーを動かすとボタンが更新されます。ウェブサイト下にCSS3のコードが表示されます。


↑このようなコードを使ってボタンを表示させます。

少し応用して作ってみました。↓

CSS

<style type="text/css">
.element {
-moz-border-radius: 28px 28px 28px 28px;
-webkit-border-radius: 28px 28px 28px 28px;
padding: 12px;
background: -moz-linear-gradient(center top, #7070cc 18%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #7070cc),color-stop(1, #ffffff));
width: 256px;
text-align: center;
}
</style>

HTML

<div class="element">
<a href="http://blog-parts-navi.seesaa.net/" >Blogparts-NAVI</a>
</div>

プレビューしながら作成できるのが便利です、ただあくまで角丸ボタンを作るのに特化したジェネレータなので、ある程度CSSの知識がないと利用するのは難しそうです。

CSS Corners
http://csscorners.com/



スポンサード リンク
| posted by nao at 2010/09/12 | Comment(0) | TrackBack(0) | 素材・ジェネレータ|
この記事へのコメント
▽ コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。