2012
06/28

CSS3による装飾とアニメーションを使用したログインフォーム

CSS3による装飾とアニメーションを使用した、シンプルで美しいログインフォームを紹介します。

Smarten Up a Slick Login Form With CSS3

必要な部分を元記事より抜粋しています。

DEMO

ADs

HTML

HTMLは以下のようにシンプルなものです。

CSS

IDとパスワードを入力するテキストボックスを以下のCSSで装飾します。

そしてログインボタンを以下のCSSで装飾します。

Animation

ページロード時のふわりと現れるアニメーションを以下のCSSで実装します。

まずふわりと現れるアニメーションを設定します。

そしてキーフレーム名「login」をformタグに対して設定します。

実際の仕上がりはデモページで見てみてください。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。