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. Web Service

    ワイヤーフレームを作成するCacoo(カクー)がとても便利

    Cacooを使ってワイヤーフレームを作ってみました。CacooとはWe…

  2. Web Service

    Google マップの地図の埋め込みをするやり方

    以前までGoogle マップの地図をサイト内に埋め込むには歯車アイコン…

  3. Web Service

    カラーコードからRGBコードに変換(その逆も)してくれる「RGB変換」

    カラーコードからRGBコードに変換してくれるサービスを探していたら理想…

  4. Web Service

    ドラッグしたテキストを音声で読み上げてくれるChrome拡張機能「SpeakIt!」を使ってみた

    こういうの欲しかったのでかなり嬉しいです。ドラッグしたテキストを音声で…

  5. Web Service

    CSSで使えるカラーネームの一覧を見やすく表示してくれる「147 Colors」

    覚えておくと便利そうだったのでメモしときます。CSSでも使える147種…

  6. Show Title Tag

    Web Service

    Webページの長いタイトルを画面隅っこに表示させることができるChrome拡張機能「Show Tit…

    Webページを見ている時にタイトルを確認したい時ってありますよね。Ch…

コメント

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP