揺れるCSS3検索ボックスを作成する
CSS3は次世代のスタイルシート言語です。それは影、アニメーション、トランジション、ボーダー半径などのような多くの新しくてエキサイティングな機能を紹介します。仕様はまだ確定されていませんが、多くのブラウザ製造業者はすでに多くの新機能のサポートを始めています.
このチュートリアルでは、次のようないくつかの機能について調べます。 テキスト影, ボーダー半径, 箱影 ロッキング検索フィールドを作成するための遷移.
この検索フィールドのフォトショップ版はAlvin Thongによって作成されたもので、ここからダウンロードできます。私は純粋なCSS 3を使ってこの検索フィールドを作り直そうとしました。それは注意することです すべてのブラウザがCSS 3機能をサポートしているわけではありません。 そしてこのチュートリアルを試すために、あなたはCSS 3機能をサポートする最新のブラウザのうちの1つを使うべきです.
準備はいい？始めましょう!
1. HTML5 Doctype
HTMLマークアップから始めましょう。後はとても簡単です。 HTML5のDoctypeと 宣言、我々は持っています というIDで ＃ラッパー 内部 . これは単にコンテンツボックスの幅を定義し、それをページの中央に揃えるために行われます。.
これに続いて コードは次のようになります。 フォームの周囲に大きなボックスを作成するために、スタイルにスタイルを追加します。 ここで重要なコードは 説明： ここで、キーワードinsetは影がボックスの内側になるかどうかを指定します。最初の2つのゼロはxオフセットとyオフセットを示し、3pxはぼかしを示します。次は色の宣言です。ここではrgbaの値を使いました。 rgbaは、赤、緑、青とアルファ（不透明度）を表します。したがって、括弧内の4つの値は、赤、緑、青、およびそのアルファ（不透明度）の量を示します。 5セットのシャドウ宣言がまとめられていることがわかります。これは、それらをコンマで区切ることによって行うことができます。最初の2つの影は白い「内側の輝き」効果を定義し、次の2つの宣言はボックスの外観をしっかりとした/分厚い外観にします. どのように機能するかを理解するためにこれらの値で遊んでください. ボックスが完成したので、入力フィールドのスタイル設定に進みます。. 入力フィールド用に宣言されたスタイルは、大きなボックス用に宣言されたスタイルと非常によく似ています。 説明： 今度は、シャープなシャドウを得るためにシャドウブラーが0に保たれ、5pxの垂直オフセットが使用されていることがわかります。続く宣言では、ぼかしは0pxに保たれていますが、色とyオフセットは変更されています。繰り返しますが、これらの値を試してさまざまな結果を得てください。. 検索ボタンをスタイルしましょう. 色を除けば、検索ボタンのスタイルは外側のボックスのスタイルとほとんど同じです。ボタンにも同様のborder-radiusとbox-shadowが使われています。導入された新機能は 説明： の中に ボタンのアクティブ状態には、もう少し変更があります。ここでは、ボタンに絶対位置と 'top'値5pxを与えました。これは、ボタンが実際に5ピクセル押し下げられたように感じるように、より自然な外観にするために行われました。アクティブ状態への他の変化は背景色と影のそれです。シャドウのyオフセットを減らして、「押し下げた」ように見せています。送信ボタンのアクティブ状態のコードは次のとおりです。 これで検索フィールドが完成しました。私たちはCSS3の新機能をかなり多く使っています。これがこの検索フィールドの完全なCSSとHTMLです。. あなたがこのチュートリアルを楽しんだことを願っています。これらの機能を試して自由に感じ、あなたの考えを共有することを忘れないでください. 編集者注： この投稿はによって書かれています バラニM Hongkiat.comのために。 Bharaniは、インドのニューデリーのデザイナー/開発者です。.＃メイン. このIDには、入力フィールドと検索ボタンの周囲の大きな白いボックスを定義するスタイルが含まれています。この その中で宣言されています。フォームは テキスト入力欄 そして検索ボタン. スタイルが適用されていないときのフォームの外観は次のとおりです。 
CSS3検索フィールド
2.バウンディングボックスを作成する
＃メイン. 以下のコードから、ボックスの幅は400ピクセル、高さは50ピクセルになります。. ＃メイン幅：400ピクセル。高さ：50ピクセル。背景：＃f2f2f2;パディング：6px 10px。ボーダー：1ピクセルソリッド＃b5b5b5。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0 #dfdede; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0 #dfdede;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0＃ dfdede;
ボーダー半径 宣言と ボックスシャドウ 宣言。丸みを帯びた角を作成するために、CSS3のborder-radius宣言を使いました。 "-moz-"と "-webkit-"ブラウザ接頭辞は、これがgeckoとWebkitベースのブラウザで確実に機能するように使われています。ボックスシャドウの宣言は少しわかりにくいかもしれませんが、実際は非常に単純です。. ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0＃ dfdede;
プレビュー
3.入力フィールドのスタイル
input [type = "text"] float：left;幅：230ピクセル。パディング：15px 5px 5px 5px。マージントップ：5px。左余白：3px。ボーダー：1ピクセルソリッド＃999999。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 -moz-box-shadow：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede; -webkit-box-shadow：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede;影付き：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede;
＃メイン. 同じボーダー半径（5px）を使用しました。繰り返しますが、複数のボックスシャドウがクラブされています. 影付き：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede;
プレビュー
4.送信ボタンのスタイル
input [type = "submit"]。solid float：left;;カーソル：ポインタ。幅：130ピクセル。パディング：8px 6px。左余白：20px。背景色：＃f8b838。色：rgba（134、79、11、0.8）。テキスト変換：大文字。フォントの太さ：太字。ボーダー：1ピクセルソリッド＃99631d。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 text-shadow：0 1px 2px rgba（255、255、255、0.7）、0 -1px 0 rgba（64、38、5、0.9）。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0 #ccc; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0 #ccc;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0＃ ccc; -webkit-transition：background 0.2sイーズアウト。
テキスト影. text-shadow：0 1px 2px rgba（255、255、255、0.7）、0 -1px 0 rgba（64、38、5、0.9）。
テキスト影 宣言では、最初の3つの数値はそれぞれx-offset、y-offset、およびblurです。 rgba値は影の色を示します。次の宣言のセット（コンマで区切られている）では、y-offsetに-1の値が与えられています。これは、テキストに “内側の影” 効果。送信ボタンのホバー/フォーカス状態の背景色と影の値が異なる. プレビュー
ボタンの「アクティブ」状態
input [type = "submit"] solid：アクティブ背景：＃f6a000;位置：相対;トップ：5px。ボーダー：1ピクセルソリッド＃702d00。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0 #ccc; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0 #ccc;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0＃ ccc;
完全（CSS）コード
＃メイン幅：400ピクセル。高さ：50ピクセル。背景：＃f2f2f2;パディング：6px 10px。ボーダー：1ピクセルソリッド＃b5b5b5。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0 #dfdede; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0 #dfdede;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.8）、インセット0 2px 2px rgba（255、255、255、1）、0 5px 0 #ccc、0 6px 0＃989898、0 13px 0＃ dfdede; input [type = "text"] float：left;;幅：230ピクセル。パディング：15px 5px 5px 5px。マージントップ：5px。左余白：3px。ボーダー：1ピクセルソリッド＃999999。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 -moz-box-shadow：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede; -webkit-box-shadow：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede;影付き：インセット0 5px 0 #ccc、インセット0 6px 0＃989898、インセット0 13px 0 #dfdede; input [type = "submit"]。solid float：left;;カーソル：ポインタ。幅：130ピクセル。パディング：8px 6px。左余白：20px。背景色：＃f8b838。色：rgba（134、79、11、0.8）。テキスト変換：大文字。フォントの太さ：太字。ボーダー：1ピクセルソリッド＃99631d。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 border-radius：5ピクセル。 text-shadow：0 1px 2px rgba（255、255、255、0.7）、0 -1px 0 rgba（64、38、5、0.9）。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0 #ccc; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0 #ccc;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 5px 0＃b8882a、0 6px 0＃593a11、0 13px 0＃ ccc; -webkit-transition：background 0.2sイーズアウト。 input [type = "submit"]。solid：ホバー、input [type = "submit"] solid：focus background：＃ffd842; -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.9）、インセット0 2px 1px rgba（255、250、76、0.8）、0 5px 0＃d8a031、0 6px 0＃593a11、0 13px 0 #ccc; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.9）、インセット0 2px 1px rgba（255、250、76、0.8）、0 5px 0＃d8a031、0 6px 0＃593a11、0 13px 0 #ccc;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.9）、インセット0 2px 1px rgba（255、250、76、0.8）、0 5px 0＃d8a031、0 6px 0＃593a11、0 13px 0＃ ccc; input [type = "submit"] solid：アクティブbackground：＃f6a000;位置：相対;トップ：5px。ボーダー：1ピクセルソリッド＃702d00。 -moz-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0 #ccc; -webkit-box-shadow：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0 #ccc;ボックスシャドウ：インセット0 0 3px rgba（255、255、255、0.6）、インセット0 1px 2px rgba（255、255、255、0.7）、0 3px 0＃b8882a、0 4px 0＃593a11、0 8px 0＃ ccc;
