[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
HTML5とCSS3を使ったフォームデザインのチュートリアル集３０:phpspot開発日誌
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials | Splashnology HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ CSS3を使ってフォームデザインがより簡単に自由になりましたが、そのサンプル集です。 どういう事ができるのか？を知ることができ、実装の際にも参考にできます。 CSS3なしで１からつくるとなると相当大変ですが、CSS3を使うことで画像を使わずきれいなフォームが作れるのは素晴らしいですね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル フォーム要素をクールにするためのjQueryプラグイン集
[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">Passwo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
