段ボール効果ログインフォームを作成する

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

ログインフォームは、あらゆる動的Webサイトに不可欠な要素です。それらは、Webサイトユーザーが制限されたコンテンツにアクセスするためのメカニズムを提供します。このチュートリアルでは、テキストシャドウ、ボックスシャドウ、線形グラデーション、トランジションなど、CSS3の機能の多くを調べて、積み重ねた紙を使ったシンプルでエレガントなログインフォームを作成します。.

上の画像は、これから作成するログインフォームのプレビューを示しています。に飛び込む準備はできましたか？始めましょう!

1.基本的なHTMLマークアップ

使用するHTMLマークアップは非常に単純です。HTML5Doctype宣言の後、次のようになります。そして </code> タグ以内 <code><body></code> タグ、我々は持っています <code><section></code> 'stacked'のクラスを持つタグ。この <code><section></code> tagは、コンテンツボックスの幅を定義し、それをページの中央に揃えるために使用されます。また、CSSを使用してこのタグをターゲットとするためにこのタグのクラス名を使用します。 A <code><form></code> タグが続きます <code><section></code> タグ。 formタグはデモンストレーションの目的でのみ使用されるため、 'action'属性には有効な値がありません。フォームフィールド内には、電子メールとパスワードのラベルの宣言と入力フィールドがあり、その後に送信ボタンが続きます。ここで注意すべき重要な点は、 'email'というタイプの入力フィールドを使用したということです。これはHTML5宣言によって私たちに提供されており、古いブラウザでは通常のテキスト入力フィールドに適切に低下します。.</p> <p>これがHTMLマークアップ全体です。</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>簡単なログインフォーム

  ログイン
   Eメール  
   パスワード

     これが、これまでに作成したもののプレビューです。
  
 2.基本スタイルを追加する
 という名前の新しいcssファイルを作成します。 master.css メインのHTMLファイルにこのファイルへのリンクを追加します。異なるブラウザ間で統一性を得るために、CSSファイルをクイックリセットで開始します。私たちのページに素敵な背景画像も追加しましょう。私が使った画像は、 微妙なパターン. あなたの好みに合った背景画像を見つけるためにサイトを閲覧してください。次の宣言を使用して背景画像を追加できます。私が使っていることにも注意してください オープンサン 本文のGoogle Webフォントからのフォント.
  / * --------基本スタイル--------- * / body、html margin：0;パディング：０。 body background：url（ "https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png"）を左上に繰り返します。フォント：16px / 1.5 "Open Sans"、Helvetica、Arial、sans-serif。 div.wrap width：400px;マージン：80px auto。 
 3.重ね紙効果
 これで基本的なレイアウトが完成しました。次に、フォームの設計を始めましょう。重ね紙の効果を得るために、 ：後 そして ：前 疑似要素これらの擬似要素は主に視覚効果を任意のセレクタに追加するために使用されます。. 
 の ：前 擬似要素は、セレクターのコンテンツと前にコンテンツを追加するために使用されます。 ：後 セレクターのコンテンツの後の擬似要素. 
 まず、クラスを「stack」、幅400ピクセル、高さ300ピクセルにしていきます。さらに、このボックスの背景色を＃f6f6f6とし、1ピクセルの太さの境界線を#bbbとします。ここで注意すべき重要な点は、border-radius宣言とbox-shadow宣言です。ここでは、 " -  moz  - "と " -  webkit  - "のブラウザ接頭辞を使って、これがgeckoとwebkitベースのブラウザで確実に機能するようにしています。. 
 border-radiusの宣言は非常に単純で、3pxが曲率を表すように丸みを帯びた角を作成するために使用されます。 box-shadow宣言の構文は複雑に見えるかもしれませんが、理解を容易にするために、これを小さい単位に分割してみましょう。. 
  / * -------- Border Radius --------- * / -webkit-border-radius：3px; -moz-border-radius：3ピクセル。 border-radius：3ピクセル。 / * -------- Box Shadow --------- * / -webkit-box-shadow：0 0 3px rgba（0,0,0、.2）; -moz-box-shadow：0 0 3px rgba（0,0,0、.2）;ボックスシャドウ：0 0 3px rgba（0,0,0、.2）;
 最初の2つのゼロはxオフセットとyオフセットを示し、3pxはぼかしを示します。次は色の宣言です。ここではrgbaの値を使いました。 rgbaは、赤、緑、青とアルファ（不透明度）を表します。したがって、括弧内の4つの値は、赤、緑、青、およびそのアルファ（不透明度）の量を示します。.
  .積み上げ背景：＃f6f6f6;ボーダー：1pxソリッド#bbb。高さ：300ピクセル。マージン：50px auto。位置：相対;幅：400ピクセル。 -webkit-box-shadow：0 0 3px rgba（0,0,0、.2）; -moz-box-shadow：0 0 3px rgba（0,0,0、.2）;ボックスシャドウ：0 0 3px rgba（0,0,0、.2）; -webkit-border-radius：3px。 -moz-border-radius：3ピクセル。 border-radius：3ピクセル。 
 フォームの基本的な境界ボックスを作成したので、次に始めましょう。 ：後 そして ：前 疑似要素. 
  .積み上げ：後、。積み上げ：前背景：＃f6f6f6;ボーダー：1px実線#aaa。下：-8ピクセル。コンテンツ： ";;高さ：250ピクセル;左：2ピクセル;位置：絶対;幅：394ピクセル; z-index：-10; -webkit-box-shadow：0 0 3ピクセルx rgba（0,0,0、.2）;  - moz-box-shadow：0 0 3ピクセルrgba（0,0,0、.2）; box-shadow：0 0 3ピクセルx rgba（0,0,0、.2）; -webkit-border-radius：3 px;  - moz-border-radius：3px; border-radius：3px; .stacked：before bottom：-14px; left：5px; width：388px; -webkit-border-radius：3px; -moz-border-radius：3px ; border-radius：3px; -webkit-box-shadow：0 0 15px rgba（0,0,0,0.5）; -moz-box-shadow：0 0 15px rgba（0,0,0,0.5）; box - 影：0 0 15px rgba（0,0,0,0.5）;
 ：afterおよび：before疑似要素のコードは、上で説明したバウンディングボックスのコードとほぼまったく同じです。ここで注意すべき唯一の重要なことは、これらの擬似要素が境界ボックスに対して絶対的に配置されているということです。それぞれの擬似要素は、積み重ねられた紙のように見えるように、数ピクセルずつ徐々に下げられます。.
 4.入力フィールド
 HTMLマークアップでは、CSS宣言でこれらの要素を簡単にターゲットにできるように、emailフィールドとpasswordフィールドの両方に 'text-input'のクラスを追加しました。これは両方の入力フィールドに適用されるCSS宣言です。.
  フォームinput.text-input outline：0;表示ブロック;幅：330ピクセル。パディング：8px 15px。ボーダー：1px濃いグレー。フォントサイズ：16px。フォントウェイト：400。 -webkit-border-radius：25ピクセル。 -moz-border-radius：25ピクセル。ボーダー半径：25ピクセル。ボックスシャドウ：インセット0 2px 8px rgba（0,0,0,0.3）; 
 ここでも、border-radiusとbox-shadowの宣言を利用しました。テキストフィールドの場合は、より多くの曲率を確保するためにborder-radiusに高い値が与えられます。 box-shadow宣言の場合、キーワードinsetは影がテキストフィールドの内側にあることを指定するために使用されています。ここでは、影の垂直方向のオフセットは2pxで、ぼかしは8pxです。色はrgba形式を使用して宣言されています。.
 入力フィールドに対話性を追加するために、 'hover'状態の入力フィールドのbox-shadowプロパティを変更します。新しいbox-shadow宣言はxとyのオフセットがゼロですが、5pxのぼかしがあり、色はrgba形式で宣言されています.
 5.送信ボタン
 このフォームの最後の部分は送信ボタンです。入力フィールドと同様に、border-radiusプロパティを使用して送信ボタンに25pxの半径を与えます。ボタンにボタンオフセットを与えるために、1pxのyオフセットを持つbox-shadowプロパティも追加されました。 “内陰” 効果.
  フォーム入力[type = 'submit'] float：right;パディング：10px 20px。表示ブロック;カーソル：ポインタ。フォントサイズ：16px。フォントウェイト：700。色：#fff; text-shadow：0 1ピクセル0＃000。背景色：＃0074CC。ボーダー：1ピクセルソリッド＃05C。 -webkit-border-radius：25ピクセル。 -moz-border-radius：25ピクセル。ボーダー半径：25ピクセル。背景画像：-moz-linear-gradient（top、＃08C、＃05C）;背景画像：-ms-linear-gradient（top、＃08C、＃05C）; background-image：-webkit-linear-gradient（トップ、＃08C、＃05C）;背景画像：線形グラデーション（上、＃08C、＃05C）。 -webkit-box-shadow：インセット0 1px 0px rgba（255、255、255、0.5）; -moz-box-shadow：インセット0 1px 0px rgba（255、255、255、0.5）。ボックスシャドウ：インセット0 1px 0px rgba（255、255、255、0.5）。 
 ここで注意すべき重要なことは、このボタンにグラデーションを追加するための宣言です。 CSS3グラデーションはかなり大きなトピックであり、私達は表面を掻くだけです。この送信ボタンには、＃08Cから＃05Cまでの線形グラデーションを追加します。これまでに使用した他のすべてのCSS3プロパティと同様に、グラデーションが異なるブラウザ間でも機能するように、 " -  moz"、 " -  webkit"、および " -  ms"というベンダプレフィックスを追加します。.
 6.デモとダウンロード
 ログインフォームが完成しました。完成したフォームの外観を確認するためにデモをチェックしてください。紛失した場合やチュートリアルを実行できなかった場合でも、心配しないでください。デスクトップにファイルをダウンロードし、既存のCSSコードを追加して動作を理解してください。.
 あなたがこのチュートリアルを楽しんだことを願っています。これらの機能を試して自由に感じ、あなたの考えを共有することを忘れないでください.
 デモ
 ファイルをダウンロードする
 
編集者注： この投稿はによって書かれています バラニM Hongkiat.comのために。 Bharaniは、インドのニューデリーのデザイナー/開発者です。彼は現在Resumonk.comに取り組んでいます - あなたが数分で専門的で美しい履歴書を作成するのを助けるオンライン履歴書ビルダー。また、彼のサイドプロジェクト -  Quotescube.comをチェックしてください - あなたの毎日の見積もり量.