シンプルでカッコいいFacebook風のWEBフォームレイアウトサンプル
2008年02月28日-
スポンサード リンク
woork: Beautiful CSS Form
シンプルでカッコいいFacebook風のWEBフォームレイアウトサンプル。
次のように、シンプルだけどカッコいいフォームがダウンロード可能です。
動作デモ
マークアップは次のように綺麗になっているようです。
<div class="box">
<h1>Sign in</h1>
<p>Do you have an account? Sign in!</p>
<form action="" method="post">
<label><span>E-mail</span>
<input type="text"name="email" id="email" class="input-text"/>
</label>
<label><span>Password</span>
<input type="password"name="psw" id="psw" class="input-text"/>
</label>
</form>
<div class="spacer"><a href="#" onClick="" class="green">Sign in</a></div>
<div class="spacer">
Lost your data? <a href="#">Get your password</a><br/>
New User? <a href="#">Sign up</a>
</div>
</div>
シンプルなデザインでもしっくりきてしまう。
凝りすぎないのが一番じゃないかと思ってしまいますね。
他にも、CSSでクールに整形した色々
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 1000以上の汎用アイコンセット「emblemicons」
- 過去のエントリ