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

    ブラウザに好きな時間のタイマーをセットしてカウントダウンしてくれるE.gg Timerがとても便利

    ブラウザに自分の好きな時間を入れてenterを押すだけでタイマーをセッ…

  2. Web Service

    材料・時間・カロリー指定もできる「Google レシピ検索」

    Google レシピ検索という便利なサービスを試してみました。Goog…

  3. Web Service

    Draftpadのアシスト機能を使えばEvernoteやDropboxはもちろん、するぷろ for …

    前々からDraftpadを入れてたんですが、ほとんど使っていませんでし…

  4. EmChart

    Web Service

    CSSでフォントサイズをem指定する時に便利なEmChart

    レスポンシブWebデザインなどによりem指定をする機会が多くなってきて…

  5. Web Service

    数多くのUIエレメントを検索することができる「UICloud」

    たくさんのUIエレメントを検索することができる「UICloud」がとて…

  6. Web Service

    iPhoneで撮影した写真の個人情報などにモザイクや黒の塗りつぶしで隠すことができるアプリ「hide…

    iPhoneで撮影した写真で顔やメールアドレスなどの個人情報が写ってい…

コメント

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

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

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP