おしゃれ感満載のテキスト入力エリアがCSSでつくれる「Text Input Effects」

先日、WEBでText Input Effectsというテキストボックス用のエフェクトを見つけました。

このText Input Effects、「かつて、こんなオサレなテキスト入力ボックスがあっただろうか?」入力欄が手軽に作成できるので紹介です。

こんな感じの入力ボックスをタグ入力だけで作成することができるようになります。

Kuro

スポンサーリンク
レクタングル(大)広告

Text Input Effectsとは

Text Input Effects

Text Input Effectsとは、おしゃれなフラットデザインのテキスト入力ボックス用のエフェクト集です。

以下のように、テキストボックスとラベルをspanではさみ、日本人名っぽいものが含まれたクラス名を指定することで、かなり凝った入力ボックスを手軽に作成することができます。

基本的にこのようなフォーマットで利用します。

「xxxxxxxxx」をエフェクト名(harukiとか)にして利用します。

使用方法

Text Input Effectsの簡単な使用方法を簡単に紹介します。

主な手順

Text Input Effectsを利用するには、主に以下の3手順が必要です。

  1. ファイルをダウンロード&設置
  2. Text Input Effectsを呼び出す
  3. タグを入力する

ファイルをダウンロード&設置

Text Input Effectsは、Inspiration for Text Input Effectsからダウンロードすることができます。

Inspiration for Text Input Effects  Codrops

ダウンロードした「」を解凍し、フォルダ内にある以下のフォルダをサイト編集用フォルダにコピーします。

  1. css(スタイルシート)
  2. fonts(Font Awesome)
  3. js(IE表示用のJavaScript)

コピーするファイル

Text Input Effectsを呼び出す

ヘッダーでText Input Effectsに必要なファイルを呼び出します。

あとは、</body>タグ手前で、IE用のJavaScriptファイル呼び出しを記述します。

タグを入力する

最後に、書式に従ってタグを記述します。

するとこんな感じの、入力ボックスが作成されます。

Haruki

エフェクトの種類

用意されているエフェクトには、日本人名っぽい名前がついています。

なぜ、このような名前になっているのかまでは、調べてないのですが、日本の有名人やアニメなどからとったと推測される、面白いネーミングになっています。

背景色、サイズなどは、ダウンロードフォルダ内のデモ仕様になっています。

ハルキ(Haruki)

Haruki[4]

ホシ(Hoshi)

Hoshi

クロ(Kuro)

Kuro

ジロウ(Jiro)

Jiro

ミノル(Minoru)

Minoru

ヨーコ(Yoko)

Yoko

ヒデオ(Hideo)

Hideo

キョウ(Kyo)

Kyo

アキラ(Akira)

Akira

イチロー(Ichiro)

Ichiro

ジュロ(Juro)

Juro

マドカ(madoka)

SVGを利用。

Madoka

カエデ(Kaede)

Kaede

イサオ(Isao)

Isao

詳しい動作は、Text Input Effectsを参照してください。

まとめ

これらのエフェクトは、ダウンロードしたファイルの「index.html」を参照すれば、使い方がわかると思います。

現在のところ、テキストインプットボックスにしか利用できません。

それに、これだけのエフェクトに合わせたサイトを作成するのも大変そうで、使いどころもあまりないかもしれません。

けれど、おしゃれサービスなどのログイン画面など、使い方によっては「他のサイトと一風違った感」は出るかもしれません。

それにしても、ジュロって何じゃろ?