[CSS]グラデーションのアニメーションが美しいフォームを実装するスタイルシート

画像を一切使用せずに、美しいグラデーションのアニメーションを伴ったフォームを紹介します。

Glowform
デモページ

[ad#ad-2]

CSS3のグラデーションとアニメーションを使用しているため、対応ブラウザはWebkit系（Chrome, Safari）、Firefox4となります。

テキストフィールドにフォーカスすると、グラデーションはアニメーションで美しく変化します。

[ad#ad-2]

HTML

HTMLは、下記のようになっています。
スタイルシートやスクリプトはサイトの「Download」からダウンロードできるので、そちらでご確認ください。

<div class="rain">
	<div class="border start">
		<form>
			<label for="email">Email</label>
			<input name="email" type="text" placeholder="Email"/>
			<label for="pass">Password</label>
			<input name="pass" type="password" placeholder="Password"/>
			<input type="submit" value="LOG IN"/>
		</form>
	</div>
</div>