Website

グラデーションボタンの作成に便利「Grad3」

投稿日:2012.07.31 更新日:

色々なサイトを見ていて、「こんなグラデーションのかかったボタンが作りたいな」と思ったことはありませんか?
直感的に、簡単操作でグラデーションのかかったボタンを作成できるサイト「Grad3」をご紹介します。

※IE等、お使いのブラウザによっては、動作しない場合があります。

スポンサーリンク

Grad3 

色の選択

grad3

色を選択するところから始めます。
まずここでは、「RED」を選択してみます。

grad3-1

サンプルも色々ありますが、シンプルなものを選択してみます。
上図のように、左上のボタンがリアルタイムプレビューになっており、すぐに変化が見れて作業がとてもしやすいです。 

グラデーション

線形グラデーションか、円形グラデーションを選択できます。(初期は線形)

grad3-3

円形、線形ともにグラデーションのかかり位置等細かな設定が可能になっています。

grad3-4

コードの抽出も選択できます。
また、以前「初めてのCSS3!CSS3を使って検索欄カスタマイズ」でも書きましたベンダープレフィックスも選択が可能です。至れり尽くせりの機能がついています。

しかもこれだけではありません。 

その他設定

grad3-5

フォントのカラーや、アイコンを追加できる機能もついています。
※テキストシャドウ等の指定はCSS3の知識が必要です。 

grad3-6

1.font-color:フォントのカラーを指定
2.font-weight:フォントの太さ(normal - bold) 
3.text-shadow:テキストにつける影
4.font-size:フォントの大きさ
5.border:ボーダー(線) 
6.box-shadow:ボックスにつける影
7.border-radius:角丸

を指定することができます。

grad3-7

また、作成するボタンの左側にアイコンを付けることもできます。
アイコン一覧から選択するだけです。

grad3-8

背景に画像を入れることも可能です。
その際は、背景一覧より選択します。

以上、設定が済みませ右上のコードをコピーし、ブログ等のCSSに貼付けて設定すれば終了です。

Sample

 先程の「Grad3」を使用して、ボタンのサンプルを作りました。

sample-bottun

 HTML

<div class="sample">sample-bottun</div>

CSS

.sample{
margin:20px;
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
letter-spacing: 0;
border: 1px solid #555;
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 6px;
text-decoration: none;
padding: 15px 40px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fd9c68), color-stop(0.51, #ea5506), color-stop(0.50, #f17431), color-stop(0.00, #feceb4));
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, -webkit-linear-gradient(top, #feceb4 0%, #f17431 50%, #ea5506 51%, #fd9c68 100%);
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, -moz-linear-gradient(top, #feceb4 0%, #f17431 50%, #ea5506 51%, #fd9c68 100%);
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, -o-linear-gradient(top, #feceb4 0%, #f17431 50%, #ea5506 51%, #fd9c68 100%);
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, -ms-linear-gradient(top, #feceb4 0%, #f17431 50%, #ea5506 51%, #fd9c68 100%);
background: url(http://grad3.ecoloniq.jp/sample/img/icons_117.png) no-repeat 7% center, url(http://grad3.ecoloniq.jp/sample/img/patterns_01.png) repeat, linear-gradient(to bottom, #feceb4 0%, #f17431 50%, #ea5506 51%, #fd9c68 100%);
}

 一つだけ心配なのは、アイコンと背景画像が直リンクになっているところですね。
その他は、言うことなしのジェネレータだと思います。

via:グラデーションに便利!国産CSS3ジェネレータ「Grad3」|Webpark 

おすすめ記事

いいね!をクリックすると
きになるnet 最新情報を
お届けします!

是非お試し下さい

Twitterでフォローしてみませんか?

  • この記事を書いた人

ごーじぃ

iPhone・Mac・WordPress・食べ物…が、気になる年頃です。

-Website
-

注目キーワード

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.