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

    カラフルなニュースリーダーがおもしろい!GoogleChromeの拡張機能「HitFT (Japan…

    とても個人的に面白いニュースリーダーがあったので備忘録がてらご紹介しま…

  2. Web Service

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

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

  3. Web Service

    CSSでテキストを円や波のように配置してくれるジェネレーター「CSSWARP」を使ったみた

    面白そうなCSSジェネレーターがあったので使ってみました。好きなテキス…

  4. Web Service

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

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

  5. Web Service

    feedlyの登録者数を取得できる「Feedly Subscribers Checker 2」

    自分のブログをfeedlyに登録してくれている人の数を知りたいという方…

  6. Web Service

    Chromeのダウンロード履歴を自動で消去してくれる拡張機能「Always Clear Downlo…

    ちょっと良さげだったので入れてみました。Google Chromeのダ…

コメント

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

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

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP