Web Service

かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」がすごく便利

とても簡単にかっこいいボタンやフォームが作れちゃうCSSジェネレーター「Live Tools」を使ってみました。テキストの色やグラデーションなんかを指定することでサクっと作れちゃいます。また、パラメータをちょこちょこっと弄るだけでフォントサイズや角丸の強度なんかも好きなように調整できます。簡単ですが、こんなものが作れますよ的なサンプルも作ってみたのでよろしければどうぞ。

[ads_center]

Live Toolsの使い方

以下のURLからアクセスできます。

ツールは3種類あり、以下のものを作ることができます。

  1. Button Builder(ボタン)
  2. Form Builder(フォーム)
  3. Ribbon Builder(リボン)

右上にある「Change Tool」から各ツールへ行くことができます。

Live Tools ツール変更

右側にあるパラメータを操作することで、paddingやfont-size、角丸なんかを調整することができます。とても直感的で使いやすいです。

Live Tools カスタマイズ

テキストカラーや背景のグラデーションなんかも細かく指定することができます。出来上がったら、下にある「Generate HTML」、「Generate CSS」でコードを取得できます。あとはコピペするだけでOKです。

Live Tools コード取得

フォームもこんな感じでサクサク作っていくことができます。

Live Tools Form Builder

サンプル

ということで簡単なサンプルです。

Button

Form

Sign up

Name

Email

Ribbon

A Pure CSS Ribbon

ちょっと適当ですが、こんな感じでとても簡単に作ることができます。今後使う機会がありそうな感じです。

関連記事

  1. iPhoneの天気予報アプリ「そら案内」

    Web Service

    iPhone定番人気の天気予報アプリの「そら案内」を使ってみた

    前回、Mac版の「そら案内」を使ってみたら素晴らしすぎるアプリだったの…

  2. Web Service

    好きな色、パターン、グラデーション、背景画像などを探せる「ColRD」

    好きな色、パターン、グラデーション、背景画像なんかを探すことができる「…

  3. Web Service

    JavaScriptのソースコードを1クリックで簡単に圧縮してくれる「/packer/」を使ってみた…

    JavaScriptのコードを1クリックで簡単に圧縮してくれる便利なツ…

  4. ツイッターへの画像・動画の載せ方

    Web Service

    ツイッターへの画像・動画の載せ方(添付方法)について

    ツイッターでつぶやくときに、ただ文章のみをつぶやくだけではなく画像や動…

  5. ブラウザでストップウォッチ

    Web Service

    ブラウザで手軽にストップウォッチが利用できるサービス

    ブラウザでちょっと何かの時間を計りたい時に役立つストップウォッチのサー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP