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

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

jQuery Mobileで簡単に自分のオリジナルテーマカラーを作成できるThemeRollerの使い方前のページ

シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQuery Slider」次のページ

関連記事

  1. Web Service

    テキストや画像はもちろん!手軽にiPhoneからエバノートにメモできるアプリ「Tap2Ever」を使…

    出先でちょっとしたメモなんかをサクっとエバノートにアップロードできるi…

  2. CSS Gradient Animator

    Web Service

    CSSでグラデーション背景を変化させるコード作成ジェネレーター「CSS Gradient Anima…

    CSSで変化するグラデーション背景を作成したい時に役立つジェネレーター…

  3. timeanddate.com
  4. タイマーループ

    Web Service

    複数のタイマーを設定して組み合わせることができるGoogle Chrome拡張機能「タイマーループ」…

    ブラウザの拡張機能で便利なタイマーを探していたんですが、とてもよさげな…

  5. Web Service

    夜フクロウで複数のTwitterアカウントを使うためのアカウント追加方法

    Twitterクライアントで人気の高い夜フクロウを使い始めました。メイ…

  6. Web Service

    住所や建物名を入力するとGoogleマップの座標を取得することができる

    地図上で、ある地点の座標を知りたいといった時があるかと思います。そんな…

コメント

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

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

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP