スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

最近知ったグラデーションに特化したCSS3ジェネレータを紹介します。国産ということで何となく嬉しくなりました。

Grad3

grad3-01.png

グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消えます。

grad3

円形グラデーションも作ることができます。こちらも直感的な簡単操作です。

grad3

もちろんリアルタイムでプレビューされます。

grad3

深く考えなくてもサンプルがたくさんあるので、サンプルからいじっていくのもいいですね。

grad3

いい感じの実用的なサンプルが色ごとで分けられています。

通常は背景のグラデーション部分のみのコードが表示されていますが、「All」にすることですべてのコードが表示されます。

grad3

ベンダープレフィックスもブラウザごとで付けることができます。ただしベンダープレフィックスが付くのはbackgroundのみのようです。

テキストシャドウやボックスシャドウは手入力なので、ある程度知識が必要です。

grad3
  • 1. フォントカラー(color)
  • 2. フォントの太さ(font-weight)
  • 3. テキストシャドウ(text-shadow)
  • 4. フォントサイズ(font-size)
  • 5. ボーダー(border)
  • 6. ボックスシャドウ(box-shadow)
  • 7. 角丸(border-radius)

テキストの左にワンポイントのアイコンを入れることもできます。

grad3

このアイコンも次の背景も直リンクですがサーバー大丈夫なのでしょうか?

背景にボーダーやドットの画像を入れることもできます。

grad3

できあがったコードに適当なクラスやID名を付けて表示すれば完了です。

<div id="btn">sample</div>

こんな感じでしょうか。

ということで簡単に解説してみました。

この手のジェネレータで国産は非常に珍しいです。すごい使いやすいですし、ぜひこれからもがんばってほしいです。

自分もこういうのを作る側になりたいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。