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

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

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

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

Text Input Effectsとは

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

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

<input class="input__field input__field--haruki" type="text" id="input-1" />

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

<span class="input input--xxxxxxxxx">
    <input class="input__field input__field--xxxxxxxxx" type="text" id="input-1" />
    <label class="input__label input__label--xxxxxxxxx" for="input-1">
        <span class="input__label-content input__label-content--xxxxxxxxx">First Name</span>
    </label>
</span>

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

使用方法

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

主な手順

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

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

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

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

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

css（スタイルシート）
fonts（Font Awesome）
js（IE表示用のJavaScript）

Text Input Effectsを呼び出す

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

<!-- Font Awesomeファイルの呼び出し -->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<!-- 入力ボックスなどの初期化 -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<!-- Text Input Effectsコンポーネント -->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!-- IE用 -->
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

<!-- IE用 -->
<script src="js/classie.js"></script>

タグを入力する

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

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-1" />
    <label class="input__label input__label--haruki" for="input-1">
        <span class="input__label-content input__label-content--haruki">First Name</span>
    </label>
</span>

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

エフェクトの種類

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

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

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

ハルキ（Haruki）

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-1" />
    <label class="input__label input__label--haruki" for="input-1">
        <span class="input__label-content input__label-content--haruki">First Name</span>
    </label>
</span>

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-2" />
    <label class="input__label input__label--haruki" for="input-2">
        <span class="input__label-content input__label-content--haruki">Last Name</span>
    </label>
</span>

<span class="input input--haruki">
    <input class="input__field input__field--haruki" type="text" id="input-3" />
    <label class="input__label input__label--haruki" for="input-3">
        <span class="input__label-content input__label-content--haruki">Email</span>
    </label>
</span>

ホシ（Hoshi）

<span class="input input--hoshi">
    <input class="input__field input__field--hoshi" type="text" id="input-4" />
    <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
        <span class="input__label-content input__label-content--hoshi">Name</span>
    </label>
</span>

<span class="input input--hoshi">
    <input class="input__field input__field--hoshi" type="text" id="input-5" />
    <label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
        <span class="input__label-content input__label-content--hoshi">Street</span>
    </label>
</span>

<span class="input input--hoshi">
    <input class="input__field input__field--hoshi" type="text" id="input-6" />
    <label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
        <span class="input__label-content input__label-content--hoshi">Town</span>
    </label>
</span>

クロ（Kuro）

<span class="input input--kuro">
    <input class="input__field input__field--kuro" type="text" id="input-7" />
    <label class="input__label input__label--kuro" for="input-7">
        <span class="input__label-content input__label-content--kuro">Username</span>
    </label>
</span>

<span class="input input--kuro">
    <input class="input__field input__field--kuro" type="text" id="input-8" />
    <label class="input__label input__label--kuro" for="input-8">
        <span class="input__label-content input__label-content--kuro">Website</span>
    </label>
</span>

<span class="input input--kuro">
    <input class="input__field input__field--kuro" type="text" id="input-9" />
    <label class="input__label input__label--kuro" for="input-9">
        <span class="input__label-content input__label-content--kuro">Invitation Code</span>
    </label>
</span>

ジロウ（Jiro）

<span class="input input--jiro">
    <input class="input__field input__field--jiro" type="text" id="input-10" />
    <label class="input__label input__label--jiro" for="input-10">
        <span class="input__label-content input__label-content--jiro">Cat's Name</span>
    </label>
</span>

<span class="input input--jiro">
    <input class="input__field input__field--jiro" type="text" id="input-11" />
    <label class="input__label input__label--jiro" for="input-11">
        <span class="input__label-content input__label-content--jiro">Dog's Name</span>
    </label>
</span>

<span class="input input--jiro">
    <input class="input__field input__field--jiro" type="text" id="input-12" />
    <label class="input__label input__label--jiro" for="input-12">
        <span class="input__label-content input__label-content--jiro">Hamster's Name</span>
    </label>
</span>

ミノル（Minoru）

<span class="input input--minoru">
    <input class="input__field input__field--minoru" type="text" id="input-13" />
    <label class="input__label input__label--minoru" for="input-13">
        <span class="input__label-content input__label-content--minoru">First Name</span>
    </label>
</span>

<span class="input input--minoru">
    <input class="input__field input__field--minoru" type="text" id="input-14" />
    <label class="input__label input__label--minoru" for="input-14">
        <span class="input__label-content input__label-content--minoru">Middle Name</span>
    </label>
</span>

<span class="input input--minoru">
    <input class="input__field input__field--minoru" type="text" id="input-15" />
    <label class="input__label input__label--minoru" for="input-15">
        <span class="input__label-content input__label-content--minoru">Last Name</span>
    </label>
</span>

ヨーコ（Yoko）

<span class="input input--yoko">
    <input class="input__field input__field--yoko" type="text" id="input-16" />
    <label class="input__label input__label--yoko" for="input-16">
        <span class="input__label-content input__label-content--yoko">Street</span>
    </label>
</span>

<span class="input input--yoko">
    <input class="input__field input__field--yoko" type="text" id="input-17" />
    <label class="input__label input__label--yoko" for="input-17">
        <span class="input__label-content input__label-content--yoko">City</span>
    </label>
</span>

<span class="input input--yoko">
    <input class="input__field input__field--yoko" type="text" id="input-18" />
    <label class="input__label input__label--yoko" for="input-18">
        <span class="input__label-content input__label-content--yoko">Region</span>
    </label>
</span>

ヒデオ（Hideo）

<span class="input input--hideo">
    <input class="input__field input__field--hideo" type="text" id="input-41" />
    <label class="input__label input__label--hideo" for="input-41">
        <i class="fa fa-fw fa-user icon icon--hideo"></i>
        <span class="input__label-content input__label-content--hideo">Username</span>
    </label>
</span>

<span class="input input--hideo">
    <input class="input__field input__field--hideo" type="text" id="input-42" />
    <label class="input__label input__label--hideo" for="input-42">
        <i class="fa fa-fw fa-envelope icon icon--hideo"></i>
        <span class="input__label-content input__label-content--hideo">Email</span>
    </label>
</span>

<span class="input input--hideo">
    <input class="input__field input__field--hideo" type="text" id="input-43" />
    <label class="input__label input__label--hideo" for="input-43">
        <i class="fa fa-fw fa-lock icon icon--hideo"></i>
        <span class="input__label-content input__label-content--hideo">Password</span>
    </label>
</span>

キョウ（Kyo）

<span class="input input--kyo">
    <input class="input__field input__field--kyo" type="text" id="input-19" />
    <label class="input__label input__label--kyo" for="input-19">
        <span class="input__label-content input__label-content--kyo">What's your email?</span>
    </label>
</span>

アキラ（Akira）

<span class="input input--akira">
    <input class="input__field input__field--akira" type="text" id="input-22" />
    <label class="input__label input__label--akira" for="input-22">
        <span class="input__label-content input__label-content--akira">First Name</span>
    </label>
</span>

<span class="input input--akira">
    <input class="input__field input__field--akira" type="text" id="input-23" />
    <label class="input__label input__label--akira" for="input-23">
        <span class="input__label-content input__label-content--akira">Last Name</span>
    </label>
</span>

<span class="input input--akira">
    <input class="input__field input__field--akira" type="text" id="input-24" />
    <label class="input__label input__label--akira" for="input-24">
        <span class="input__label-content input__label-content--akira">Maiden Name</span>
    </label>
</span>

イチロー（Ichiro）

<span class="input input--ichiro">
    <input class="input__field input__field--ichiro" type="text" id="input-25" />
    <label class="input__label input__label--ichiro" for="input-25">
        <span class="input__label-content input__label-content--ichiro">Bird's Color</span>
    </label>
</span>

<span class="input input--ichiro">
    <input class="input__field input__field--ichiro" type="text" id="input-26" />
    <label class="input__label input__label--ichiro" for="input-26">
        <span class="input__label-content input__label-content--ichiro">Wing Span</span>
    </label>
</span>

<span class="input input--ichiro">
    <input class="input__field input__field--ichiro" type="text" id="input-27" />
    <label class="input__label input__label--ichiro" for="input-27">
        <span class="input__label-content input__label-content--ichiro">Beak Length</span>
    </label>
</span>

ジュロ（Juro）

<span class="input input--juro">
    <input class="input__field input__field--juro" type="text" id="input-28" />
    <label class="input__label input__label--juro" for="input-28">
        <span class="input__label-content input__label-content--juro">First Name</span>
    </label>
</span>

<span class="input input--juro">
    <input class="input__field input__field--juro" type="text" id="input-29" />
    <label class="input__label input__label--juro" for="input-29">
        <span class="input__label-content input__label-content--juro">Last Name</span>
    </label>
</span>

<span class="input input--juro">
    <input class="input__field input__field--juro" type="text" id="input-30" />
    <label class="input__label input__label--juro" for="input-30">
        <span class="input__label-content input__label-content--juro">Maiden Name</span>
    </label>
</span>

マドカ（madoka）

SVGを利用。

<span class="input input--madoka">
    <input class="input__field input__field--madoka" type="text" id="input-31" />
    <label class="input__label input__label--madoka" for="input-31">
        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
        </svg>
        <span class="input__label-content input__label-content--madoka">Frequency</span>
    </label>
</span>

<span class="input input--madoka">
    <input class="input__field input__field--madoka" type="text" id="input-32" />
    <label class="input__label input__label--madoka" for="input-32">
        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
        </svg>
        <span class="input__label-content input__label-content--madoka">Weight</span>
    </label>
</span>

<span class="input input--madoka">
    <input class="input__field input__field--madoka" type="text" id="input-33" />
    <label class="input__label input__label--madoka" for="input-33">
        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
        </svg>
        <span class="input__label-content input__label-content--madoka">Strength</span>
    </label>
</span>

カエデ（Kaede）

<span class="input input--kaede">
    <input class="input__field input__field--kaede" type="text" id="input-35" />
    <label class="input__label input__label--kaede" for="input-35">
        <span class="input__label-content input__label-content--kaede">First Name</span>
    </label>
</span>

<span class="input input--kaede">
    <input class="input__field input__field--kaede" type="text" id="input-36" />
    <label class="input__label input__label--kaede" for="input-36">
        <span class="input__label-content input__label-content--kaede">Last Name</span>
    </label>
</span>

<span class="input input--kaede">
    <input class="input__field input__field--kaede" type="text" id="input-37" />
    <label class="input__label input__label--kaede" for="input-37">
        <span class="input__label-content input__label-content--kaede">Website</span>
    </label>
</span>

イサオ（Isao）

<span class="input input--isao">
    <input class="input__field input__field--isao" type="text" id="input-38" />
    <label class="input__label input__label--isao" for="input-38" data-content="First Name">
        <span class="input__label-content input__label-content--isao">First Name</span>
    </label>
</span>

<span class="input input--isao">
    <input class="input__field input__field--isao" type="text" id="input-39" />
    <label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
        <span class="input__label-content input__label-content--isao">Middle Name</span>
    </label>
</span>

<span class="input input--isao">
    <input class="input__field input__field--isao" type="text" id="input-40" />
    <label class="input__label input__label--isao" for="input-40" data-content="Last Name">
        <span class="input__label-content input__label-content--isao">Last Name</span>
    </label>
</span>

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