CSS

#subscribe, #login( 位置: 絶対; トップ: 0px; 幅: 88%; パディング: 18px 6% 60px 6%; マージン: 0 0 35px 0; 背景: rgb(247, 247, 247); ボーダー: 1px ソリッドrgba(147, 184, 189,0.8); ボックスシャドウ: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px rgba(208, 223, 226, 0.4) インセット; z インデックス: 22;

ここでヘッダーのプロパティを割り当てます。

/**** text ****/ #wrapper h1( font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "Franchise Regular","Arial Narrow ",Arial,sans-serif; font-weight: bulled; text-align: center; padding-bottom: 30px; ) /** 現在、background-clip:text をサポートしているのは Webkit のみです。 **/ #wrapper h1(background: -webkit-repeat-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: 透明; -webkit-background-clip: text ) #wrapper h1:after( content: " "; 表示: ブロック; 幅: 100%; 高さ: 2px; 背景: 線形グラデーション (左, rgba(147,184,189,0) 20% 147,184,189,1) 147,184,189,0.8) 79%、rgba(147,184,189,0) 100%);

現在、Webkit をサポートしているのはブラウザのみであることに注意してください 背景クリップ: テキスト, そこで、Webkit 専用のストライプの背景を作成し、H1 ヘッダーに結び付けます。 パラメータ以来 背景クリップ: テキスト Webkit ブラウザでのみ動作するため、Webkit プロパティのみを使用することにしました。 そのため、CSS を 2 つの部分に分割し、Webkit のグラデーションのみを使用しました。 ただし、Web サイトで Webkit を使用するだけではいけません。 したがって、たとえば、パラメータ -webkit-text-fill-color: 透明背景を透明にすることができますが、Webkit ブラウザーのみで、他のすべてのブラウザーはこのプロパティを無視します。

また、:after 擬似クラス要素を使用して、タイトルの下に細い線を作成しました。 高さ 2 ピクセルのグラデーションを使用し、エッジの不透明度をゼロに下げました。

次に、入力フィールドを処理して見栄えを良くしましょう。

/**** 高度な入力スタイル ****/ /* プレースホルダー */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); font-style: italic; ) input:-moz-プレースホルダー、テキストエリア:-moz-placeholder( カラー: rgb(190, 188, 188); フォントスタイル: イタリック; ) 入力 (アウトライン: なし; )

まず、余白のスタイルを設定し、ストロークを削除します。 ただし注意してください。アウトラインは、ユーザーがどのフィールドにいるのかを理解するのに役立ちます。 これを削除する場合は、プロパティ: active および: focus を適用する必要があります。

/* すべてのフィールドは submit と checkbox を除外します */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px Solid rgb(178, 178, 178);ボックス - サイズ: コンテンツ ボックス; ボーダー半径: 3 ピクセル; ボックス シャドウ: 0px 1px 4px 0.6) インセット: すべて 0.2 秒、 #wrapper input: not(): focus( ボーダー: 1px ソリッド rgba(91, 90, 90, 0.7); 背景: rgba(238, 236, 240, 0.2); ボックスシャドウ: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) インセット )

ここでは、チェックボックスを除くすべてのフィールドのスタイルを設定するために疑似クラスを使用しました。 さらに、ストロークを削除し、プロパティ:focus および:active を追加することにしました。

さあ、楽しい時間です。アイコン付きフォントです。 :before および :after 疑似クラスは使用できないため、アイコンを label パラメーターに追加してフィールドに配置します。 fontomas ライブラリを使用します。 アイコンと対応する文字を自分で一致させることができます。 属性を記憶 データアイコン? ここに文字を挿入する必要があります。 私が使用した データアイコン='u'ログインの場合は「e」、電子メールの場合は「p」、パスワードの場合は「p」です。 文字を選択したら、フォントをダウンロードし、fontsquirrel フォント ジェネレーターを使用して @font-face に適した形式に変換しました。

@font-face ( font-family: "FontomasCustom Regular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype")、url("fonts/fontomas-webfont.woff") format("woff")、url("fonts/fontomas-webfont.ttf") format("truetype")、url("fonts/fontomas-webfont .svg#FontomasCustom Regular") format("svg"); font-weight:normal; font-style:normal; ) /** 魔法のトリック! **/ :after ( content: attr(data-icon); font-family: "FontomasCustom Regular"; color: rgb(106, 159, 171); 位置: 絶対; 左: 10px; 上: 35px; 幅: 30px; )

それだけです。 アイコンごとに個別のクラスを作成する必要はありません。 パラメータを使用しました 内容: attr(データアイコン) data-icon 属性から文字を取得します。 したがって、フォントを割り当て、色を選択し、アイコンを配置するだけで済みます。

次に、フォーム送信ボタンにルールを割り当てましょう。

/*両方のボタンのスタイルを設定*/ #wrapper p.button input( width: 30%; カーソル: ポインター; 背景: rgb(61, 157, 179); パディング: 8px 5px; font-family: "BebasNeue Regular","Arial Narrow ",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px ソリッド rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0 、0、0.5); ボーダー半径: 3px; ボックスシャドウ: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) インセット、0px 0px 0px rgb(254, 254, 254)、0px 5px 3px 3px rgb (210, 210, 210); 遷移: すべて 0.2 秒線形; ) #wrapper p.button input:hover(background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p.ボタン入力:focus(背景: rgb(40, 137, 154); 位置: 相対; トップ: 1px; ボーダー: 1px ソリッド rgb(12, 76, 87); ボックスシャドウ: 0px 1px 6px 4px rgba(0, 0) 、0、0.2) インセット; ) p.login.button、p.signin.button( text-align: right; margin: 5px 0; )

秘訣は、box-shadow を使用して複数のフレームを作成することです。 もちろん、フレームは 1 つだけ使用することもできますが、複数使用することもできます。 長さパラメータを使用して、ぼやけずに幅 3 ピクセルの「偽の」2 番目の白い境界線を作成します。

次に、チェックボックスのスタイルを設定しましょう。ここでは特別なことは何も行いません。

/* 「記憶する」チェックボックスのスタイルを設定します*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeper( margin-right: 5px; ) .keeplogin label( width: 80%; )

複数の線形グラデーションを使用してフォームのフッターをスタイリングし、縞模様のグラデーションを作成します。

P.change_link(位置: 絶対; カラー: rgb(127, 124, 124); 左: 0px; 高さ: 20px; 幅: 440px; パディング: 17px 30px 20px 30px; font-size: 16px; text-align: right;ボーダートップ: 1px ソリッド rgb(219, 229, 232); ボーダー半径: 0 0 5px 5px; 背景: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);表示: インラインブロック; フォントの太さ: 太字; 背景: rgb(247, 248, 241); カラー: rgb(29, 162, 193); ; ボーダー半径: 4px; ボーダー: 1px ソリッド rgb(203, 213, 214); 背景: 1px ソリッド rgb(247, 247, 247, 198) #wrapper p.change_link a:active(位置: 相対; トップ: 1px; )

これで、2 つの素晴らしいシェイプがあることがわかりますが、表示したいのはそのうちの 1 つだけです。 アニメーションの時間です！

アニメーションの作成

#register(z インデックス: 21; 不透明度: 0; )

ログイン フォームの z-index: 22 を覚えていますか? 2 番目のフォームでは、このパラメータを 21 に割り当てて、ログイン フォームの「下」に置きます。

ここからが楽しい部分です。疑似 class:target を使用してフォームを交換します。 :target について理解する必要がある点が 1 つあります。移動にはアンカーを使用します。 アンカーの通常の動作は、特定のページ要素にジャンプすることです。 しかし、私たちはそれを望んでいません。単に形状を交換したいだけです。 ここで、ページの上部で 2 つのリンクを使用するというトリックが役に立ちます。 2 番目のフォームに直接誘導してジャンプ効果を危険にさらす代わりに、リンクにパラメータを与えます。 ディスプレイ: なし。 こうすることでジャンプを避けることができます。 私はサイトでこのトリックを発見しました: CSS3 create (フランス語)。

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; アニメーション名: fadeInLeft; アニメーション遅延: .1s; )

ボタンをクリックすると、次のことが起こります。 参加する、#登録に向かっています。 次にアニメーションが発生し、それから初めて #register 要素に移動します。 というアニメーションを使用します。 フェードイン左。 透明度をゼロにして形状を「非表示」にしているので、徐々に現れるアニメーションを適用します。 また、他のシェイプの上に表示されるように Z インデックスも変更しました。 他の形式でも同じことが起こります。
アニメーションのコードは次のとおりです。 Dan Eden の CSS3 アニメーション フレームワークを使用し、このフレームワークをチュートリアルに適合させました。

Animate( アニメーション期間: 0.5 秒; アニメーション タイミング関数: 容易; アニメーション フィル モード: 両方; ) @keyframes fadeInLeft ( 0% ( 不透明度: 0; 変換:translateX(-20px); ) 100% ( 不透明度: 1; 変換: 変換X(0);

「消える」図形の左側にフェード アニメーションが表示されます。

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( アニメーション名: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( 不透明度: 1; 変換: translationX(0); ) 100% ( 不透明度: 0; 変換: 変換X(-20px);

animate.css ファイルを使用して Dan Eden の他のアニメーションを使用できるようになりました。.animate クラスとアニメーション名を変更するだけです。 animate-custom.css ファイルの最後には、他のいくつかのアニメーションもあります。

以上です、皆さん。 このチュートリアルを楽しんでいただければ幸いです。

2 番目の小さなトリックは、アイコン フォントの使用に関連しています。 アイコンを表示するには data 属性を使用します。 設定により フォームの先頭にあります。 この巧妙なトリックにより、アンカーを操作するときにフォームが正しく動作できるようになります。 HTML 内の対応する文字を使用すると、すべてのアイコンのスタイルを設定するために必要な CSS 属性セレクターが 1 つだけ必要になります。 このテクニックの詳細については、「24 の方法: フォントとデータ属性を使用したアイコンの表示」を参照してください。

CSS

このチュートリアルではコードをわかりやすくするために、すべてのベンダー プレフィックスを省略しますが、もちろん、それらはファイル内にあります。 繰り返しになりますが、すべてのブラウザで機能するとは限らないかなり高度な CSS3 トリックを使用しています。 始めましょう。

CSS3 を使用して両方のフォームをスタイル設定する

まず、2 つのフォームにコンテナーの一般的なスタイルを設定しましょう。

#subscribe, #login( 位置: 絶対; トップ: 0px; 幅: 88%; パディング: 18px 6% 60px 6%; マージン: 0 0 35px 0; 背景: rgb(247, 247, 247); ボーダー: 1px ソリッドrgba(147, 184, 189,0.8); ボックスシャドウ: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px rgba(208, 223, 226, 0.4) インセット; z インデックス: 22;

2 つのシャドウで構成される素敵なボックス シャドウを追加しました。1 つは内側の青い輝きを作成するための内側のシャドウ、もう 1 つは外側のシャドウです。 Zインデックスについては後ほど説明します。

以下では、背景クリッピングを使用してヘッダーのスタイルを設定します。

/**** 一般的なテキスト スタイル ****/ #wrapper h1( font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "Franchise Regular"," Arial Narrow",Arial,sans-serif; font-weight:old; text-align:center;padding-bottom:30px; ) /** 現時点では、webkit のみが background-clip:text をサポートしています。 */ #wrapper h1(background: -webkit-repeat-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb (64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: 透明; -webkit-background-clip: text ) #wrapper h1:after( content:" "; 表示: ブロック; 幅: 100%; 高さ: 2px; margin-top:10px; 背景: line-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189) ,1) 53%、rgba(147,184,189,0.8) 79%、rgba(147,184,189,0) 100%));

現時点では Webkit ブラウザのみがサポートされていることに注意してください 背景クリップ: テキスト, そこで、ここでは Webkit 専用のストリップされた背景を作成し、それをテキストにクリップして、H1 タイトルにストライプを追加します。 以来、 背景クリップ: テキストプロパティは現在 Webkit ブラウザーでのみ機能するため、Webkit プレフィックスのみを使用することにしました。 これが、CSS 宣言を 2 つの部分に分割し、WebKit の接頭辞付きグラデーションのみを使用する理由です。 –webkit- プレフィックスのみを使用するのは悪い習慣です。これはデモ目的のみであり、実際の Web サイトでは決して使用しないでください。 そこもまた、 -webkit-text-fill-color: 透明これは便利です。これにより、Webkit ブラウザ上でのみ背景を透明にすることができ、他のすべてのブラウザでは背景が無視され、提供されたテキスト色のフォールバックが提供されます。

また、:after 疑似クラスを使用して、タイトルの下にフェードラインを作成しました。 2 ピクセルの高さのグラデーションを使用し、背景の両端の不透明度を 0 にフェードします。

次に、入力のスタイルを設定して、見た目を良くしましょう。

/**** 高度な入力スタイル ****/ /* プレースホルダー */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); font-style: italic; ) input:-moz-プレースホルダー、テキストエリア:-moz-placeholder( カラー: rgb(190, 188, 188); フォントスタイル: イタリック; ) 入力 (アウトライン: なし; )

まず入力のスタイルを設定し、アウトラインを削除します。 ただし、ここで注意してください。 アウトラインは、どの入力がフォーカスされているかをユーザーが知るのに役立ちます。そのため、アウトラインを削除する場合は、入力に対して some:active および:focus 状態を提供する必要があります。

/* submit と checkbox を除くすべての入力 */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px Solid rgb(178, 178, 178) ; ボックスサイズ: コンテンツボックス; ボーダー半径: 3px; ボックスシャドウ: 0px 1px 0px rgba(168, 168, 168, 0.6) インセット; すべて 0.2 秒のリニア; :focus( ボーダー: 1px ソリッド rgba(91, 90, 90, 0.7); 背景: rgba(238, 236, 240, 0.2); ボックスシャドウ: 0px 1px 4px 0px rgba( 168, 168, 168, 0.9) インセット)

ここでは、チェックボックスを除くすべての入力のスタイルを設定するために、:not 疑似クラスを使用しました。 アウトラインを削除することにしたため、:focus および:active 状態を提供しました。

そしてここからが楽しい部分です: アイコンフォントです。 入力では:before および:after 疑似クラスを使用できないため、少し工夫する必要があります。ラベルにアイコンを追加してから、それを入力に配置します。 私は素敵なアイコンをまとめた fontomas ライブラリを使用しています。 それらを並べ替えて、アイコンを特定の文字に設定できます。 覚えておいてください データアイコン属性？ そこに手紙を置くべきです。 私が使用した データアイコン='u'ユーザー、「e」は電子メール、「p」はパスワードです。 文字を選択したら、フォントをダウンロードし、fontsquirrel フォント ジェネレーターを使用して @font-face 互換形式に変換しました。

@font-face ( font-family: "FontomasCustom Regular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype")、url("fonts/fontomas-webfont.woff") format("woff")、url("fonts/fontomas-webfont.ttf") format("truetype")、url("fonts/fontomas-webfont .svg#FontomasCustom Regular") format("svg"); font-weight:normal; font-style:normal; ) /** 魔法のアイコンのトリック ! **/ :after ( content: attr(data-icon); font-family: "FontomasCustom Regular"; color: rgb(106, 159, 171); 位置: 絶対; 左: 10px; 上: 35px; 幅: 30px; )

はい、これで終わりです。アイコンごとにクラスを作成する必要はありません。 私たちが使用した 内容: attr(データアイコン) data-icon 属性から文字を取得するため、フォントを宣言し、適切な色を選択して配置するだけで済みます。

次に、両方のフォームの送信ボタンのスタイルを設定しましょう。

/*両方の送信ボタンのスタイル設定 */ #wrapper p.button input( width: 30%;cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeue Regular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px ソリッド rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); ボーダー半径: 3px; ボックスシャドウ: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) インセット、0px 0px 0px 3px rgb(254, 254, 254)、0px 5px 3px 3px rgb(210, 210, 210); 遷移: すべて 0.2 秒線形; ) #wrapper p.button input:hover(background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p .button input:focus( 背景: rgb(40, 137, 154); 位置: 相対; トップ: 1px; ボーダー: 1px ソリッド rgb(12, 76, 87); ボックスシャドウ: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) インセット; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

ここでのコツは、ボックスシャドウを使用して追加の境界線を作成することです。 使用できる境界線は 1 つだけですが、ボックスシャドウは必要なだけ使用できます。 長さの値を使用して、ぼかしのない、幅 3 ピクセルの「偽の」2 番目の白い境界線を作成します。

次に、チェックボックスのスタイルを設定します。ここでは特別なことは何も行いません。

/* チェックボックス「ログイン状態を保つ」のスタイルを設定します*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeper( margin-right: 5px; ) .keeplogin label( width: 80%; )

繰り返しの線形グラデーションを使用してフォームの下部をスタイルし、縞模様の背景を作成します。

P.change_link(位置: 絶対; カラー: rgb(127, 124, 124); 左: 0px; 高さ: 20px; 幅: 440px; パディング: 17px 30px 20px 30px; font-size: 16px; text-align: right;ボーダートップ: 1px ソリッド rgb(219, 229, 232); ボーダー半径: 0 0 5px 5px; 背景: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px);表示: インラインブロック; フォントの太さ: 太字; 背景: rgb(247, 248, 241); カラー: rgb(29, 162, 193); ; ボーダー半径: 4px; ボーダー: 1px ソリッド rgb(203, 213, 214); 背景: 1px ソリッド rgb(247, 247, 247); 198) #wrapper p.change_link a:active(位置: 相対; トップ: 1px; )

素晴らしいフォームが 2 つあることがわかりますが、一度に表示したいのは 1 つだけです。 さあ、アニメーションの時間です!!

切り替えアニメーションの作成

最初に行うことは、不透明度を 0 に設定して 2 番目のフォームを非表示にすることです。

#register(z インデックス: 21; 不透明度: 0; )

ログイン フォームの z-index が 22 だったことを覚えていますか? 2 番目のフォームに z-index 21 を与えて、ログイン フォームの「下」に置きます。

そしてここからが本当に良いところです。:target 疑似クラスを使用してフォームを切り替えることです。 :target について本当に理解する必要があるのは、遷移にアンカーを使用するということです。 アンカー リンクの通常の動作は、ページ内のターゲットにジャンプすることです。 しかし、私たちはどこにもジャンプしたいのではなく、フォームを切り替えたいだけです。 ここで、ページの上部にある 2 つのリンクを使用するトリックを紹介します。 2 番目のフォームに直接リンクして「ジャンプ」効果が生じる危険を冒す代わりに、実際に 2 つのリンクをページの上部に配置して、 ディスプレイ: なし。 これにより、ページジャンプが回避されます。 クレジットされるべきところはクレジットします: 私は CSS3 作成でこのトリックを見つけました (フランス語)。

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; アニメーション名: fadeInLeft; アニメーション遅延: .1s; )

をクリックすると、次のことが起こります。 参加しませんかボタンをクリックすると、#toregister がトリガーされます。 次に、兄弟セレクター ~ を使用して #register 要素を見つけて、アニメーションを実行します。 というアニメーションを使用します。 フェードイン左。 不透明度ゼロを使用してフォームを「非表示」にするため、フェードインするアニメーションを使用してフォームを表示します。 また、z-index を変更して、他のフォームの上に表示されるようにしました。
他の形式でも同じことが起こります。

そして、これがアニメーションのコードです。 Dan Eden の CSS3 アニメーション フレームワークを使用し、それをこのチュートリアル用に調整しました。

Animate( アニメーション期間: 0.5 秒; アニメーション タイミング関数: 容易; アニメーション フィル モード: 両方; ) @keyframes fadeInLeft ( 0% ( 不透明度: 0; 変換:translateX(-20px); ) 100% ( 不透明度: 1; 変換: 変換X(0);

「消えていく」フォームには、左側にフェードアウトする別のアニメーションが追加されます。

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( アニメーション名: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( 不透明度: 1; 変換: translationX(0); ) 100% ( 不透明度: 0; 変換: 変換X(-20px);

Dan Eden の animate.css の他のアニメーションを使用できるようになりました。.animate クラスを調整し、アニメーション名を置き換えるだけです。 animate-custom.css ファイルの最後には、いくつかのカスタム アニメーションもあります。

まあ、それだけです。 チュートリアルを楽しんでいただければ幸いです!

一部のブラウザでは、 背景クリップ: テキストはサポートされていません。 Internet Explorer 9 ではトランジションとアニメーションが機能しないため、派手なフォームの切り替えは行われません。 Internet Explorer 8 以前では、:target 疑似クラスはサポートされていないため、まったく機能しません (ログイン フォームが表示されるだけです)。

ログイン フォームは、フォーラム、ショップ、WordPress などの Web サイトで見つけることができます。インターネット上のほとんどすべてのものは、何かにアクセスするためにどこかにログイン フォームを必要とします。 ウェブ全体は、ログイン フォームと登録、サインアップ フォームがなければ不完全です。

HTML フォームは、ほとんどの人が最初に目にするものであり、HTML 構造にスタイルを与える適切な CSS が含まれています。 最新の HTML バージョンでは、HTML はデフォルトの構造スタイル オプションとして CSS3 を選択しているようです。 とにかく、ここで見つけられるのは、フロントエンド開発者によって構築され、無料で使用できるように一般に共有されている、事前にデザインされた HTML、CSS フォームです。

これらの無料のログイン フォーム テンプレートをすべて使用してみてください。ほとんどのテンプレートには、事前に構築された HTML 検証機能や、一部の jQuery または HTML 検証 (以下のパス メーターを備えたログイン/登録フォームなど) が組み込まれています。

このリストはまだ終わっていません。新しいログイン フォームのデザインを見つけることに興味があるので、2017 年に新しいログイン フォーム テンプレートが登場したら、これらのリストを更新し続けます。楽しみにしていてください。

赤いログインフォーム

基本的な入力フィールドを必要とし、追加のプログラミングを必要としない、Web サイト用のシンプルで効果的なログイン フォームです。

すでにフラットな Web サイト用に設計されたフラットなログイン フォーム デザイン。 このテンプレートをダウンロードして、あらゆる目的に使用してください。

クライアントにクイックサインインを要求しますか? 心配はいりません。この見栄えの良いログイン フォームを使用すれば、何の手間もかかりません。 ソース コードをダウンロードし、サンプルのユーザー名とパスワードをフィールドに入力してログインを試行できるデモを確認してください。 同じプロフィール ページに移動します。このページには、ログアウト アニメーションを表示するログアウト ボタンがあり、見た目も素晴らしいです。

フラット デザインよりも Google マテリアル デザインの人気が高まっているため、この CSS3 テンプレートには、深く慎重に影付けされたログイン フォームと登録フォームが表示されます。

ここでは、ログイン フィールドを非表示/表示するオプションを備えた、ビジネス Web サイト用の別の素晴らしいログイン フォームを入手できます。 適切にコーディングされた css/html/js デザインにより、現在のサイトの速度を損なうことなく読み込みが向上します。

滑らかなアニメーションを備えた最小限のログイン フォーム

必要に応じて画像またはボタンをクリックすると、ログイン セクションが開くログイン フォームのスムーズなアニメーション。

CSSを使用した最小限のログインフォーム

ここでは、全画面の背景に配置されたシンプルなログイン フォーム UI が表示されます。 ダウンロード ファイルには、Web サイトへのこのログインを簡単に実装するための CSS と HTML が含まれています。

アニメーションログインフォーム

テキストフィールドに表示されるクリックアニメーションは素晴らしく、ユーザーアイコンとパスワードアイコンの小さなスライドアニメーションが表示されます。 その後、フォームにログインして、認証プリローダーとウェルカムバックブロックを監視できます。 このダウンロードには、独自の Web サイトのログイン フォームを実装するためのすべてのソース ファイルが含まれています。

エレガントなログイン

これは、最小限のコードでサイトの速度に与える影響が少ないため、Web サイトに表示できるログイン フォームの簡易バージョンです。

穏やかなログイン画面

アニメーションの背景を備えたクリーンなログイン フォームは、ページ全体にリラックスした雰囲気を与えます。 codepen からテンプレート全体を zip 形式でダウンロードします。

ログインおよびサインアップフォーム

この流動的なログインおよびサインアップ フォームを Web サイトに簡単に統合します。 このダウンロードに含まれる zip ファイルには、CSS、HTML、JS テンプレートが含まれています。 ソーシャル メディアのサインアップでは、画面上で簡単にパスワードを入力できるように、パスワードの表示/非表示オプションを使用することもできます。

アカウント作成によるログインフォーム

フェードイン効果で表示されるログイン フォームは、見ているだけで面白いです。 この効果は、いくつかの最新のログイン フォームでのみ見られます。 「クリックしてください」を使用してフォームをサインアップに変更するか、フォームを作成します。

フラットなデザインのミニマルスタイルのログインフォームは、以下のリンクからダウンロードできます。 HTML 検証が利用可能であり、このログイン テンプレートで設定されます。

ログイン用の最小限のフォーム テンプレート

電子メールの検証は完了しており、このテンプレートは純粋な CSS、HTML であり、派手な jquery モジュールはありません。

サインアップ/ログインフォーム

Web サイトにログインするための 1 つのフォームと、ワンクリックで切り替えることができるサインアップ、登録オプション。 サインアップ領域にはいくつかの重要なフィールドがありませんが、それでも、すべての強力な機能を備えた優れた形式です。

このログイン フォームは、ログイン リンクをクリックしない限り非表示になります。 これは、ログイン用の余分なページを避けることができる、現代の Web サイトにとって非常に便利な機能です。 この強力なログイン フォームを使用して、任意のページにログインを表示します。

PSD と完全にコード化された HTML/CSS バージョンの両方として提供されるため、すぐに統合を開始できます。

ログインフォーム（コード化）

プロフェッショナルなログインフォーム。 ダウンロードには PSD ファイルが含まれていますが、コーディングしたくなったので xHTML、Js、CSS ファイルも含めました。

白いシンプルなログインフォーム

丸い送信ボタンとエレガントなフォーカス状態を備えたクリーンでシンプルなログイン フォーム。

ログインフォームのみ

Simply Login Form は、CSS3 のみを使用してスタイルおよびデザインされています。 フォームは非常に単純なマークアップを使用して作成され、非常に基本的な CSS3 プロパティを使用してスタイル設定されます。

ログイン フォーム テンプレートは、見た目を美しくするためだけではなく、入力がよりシンプルで効率的である必要があります。 ログインフォームをデザインするにはさまざまな方法があります。 しかし、業務に適したソリューションを見つけるのは骨の折れる作業となる場合があります。 見栄えの良いログイン ページ テンプレートをすばやく作成できるように、簡単に実践できる最も興味深い HTML、CSS テクニックをいくつか紹介します。 テンプレートのソースをダウンロードして、すべて無料で自分でテストしてください。

無料のログイン/登録テンプレート

ログイン＆登録フォーム

一石二鳥…ユーザーがすでに「登録」されているかどうかに基づいて、フォームはログインから登録に切り替わり、またログインから登録に戻ります。 js パネルで「登録済み」ユーザーを見つけます。

フラット UI を備えたシンプルなログイン フォーム テンプレート…

Disqus Like サインイン フォーム

HTML5 と CSS3 を使用した滑らかなログインフォーム

丸い送信ボタンとエレガントなフォーカス状態を備えたクリーンでシンプルなログイン フォーム テンプレート。

素敵でシンプルなログインフォーム

素晴らしくシンプルな HTML/CSS ログイン フォーム テンプレート。 WordPress のログイン システムを使用します。

CSS3 ログイン フォーム テンプレート

HTML、CSS 機能のみが使用されている素晴らしい CSS3 ログイン フォーム テンプレート。 ダウンロードしてお好きなようにお使いください。

フラットUIログインフォーム

jQueryを使ったアニメーションによるフォーム切り替え

3 つの非常に一般的なフォームを備えたシンプルなアニメーション フォーム スイッチ。 このアイデアは、ユーザーが別のフォームに移動したときにページを離れるのではなく、同じコンテナ内に新しいフォームを表示し、新しいフォームの寸法に合わせて拡大または縮小することです。

CSS3を使用した滑らかなログインフォーム

基本的な HTML5 を使用し、いくつかの CSS3 テクニックで強化した、最小限で洗練されたログイン フォーム テンプレート。

純粋な CSS ログインフォーム

シンプルで効果的なドロップダウン ログイン ボックス

この記事では、CSS3 と少しの jQuery を使用して、見栄えの良いドロップダウン ログイン フォーム テンプレートを作成する方法を学びます。

HTML と CSS を使用したログイン フォーム テンプレート

シンプルでフラットなログイン フォーム テンプレート…

ログイン

フラットUIログインフォーム

カスタムログインフォームのスタイル設定

このチュートリアルでは、興味深い CSS テクニックと HTML5 の利点を使用して、モダンでクリエイティブなログイン フォームを作成します。

PHP、JQuery、CSS3を使用したログインフォーム

CSS3、Jquery + Ajax を使用し、PHP で処理されたエレガントなログイン ページを作成します。

パスメーターログイン・登録フォーム

CSS 3D 変換を使用した Apple 風のログイン フォーム

このチュートリアルでは、変換を使用して Apple 風のフォームに興味深い反転効果を作成する方法を見ていきます。

ログインフォーム（コード化）

この景品はプロフェッショナルなログイン フォームです。 ダウンロードには、PSD ファイルに加えて、xHTML、Js、CSS ファイルも含まれています。 お好みに合わせてご使用いただけます。 CSS3 と JavaScript を使用した素晴らしいエフェクトがいくつか含まれています。楽しんでいただければ幸いです。

ログイン

HTML5とCSS3を使用したログインフォーム

これは、HTML5 と CSS3 を使用して簡単なログイン フォームを作成する方法の例です。

返品

使用法

利用パターン

デフォルト: デフォルト設定

#2 間違ったログイン/パスワードを入力しても同じページのままになる

デフォルトでは、このようなフォームに間違ったログが入力された場合、ユーザーはエラーを示す基本認証ページにリダイレクトされます。

これを変更して、ユーザーが間違ったデータを入力した場合でも同じページに留まるようにするには、 wp_login_failed フックを使用します。

## 認証フォームに間違ったログイン/パスワードを入力すると、ユーザーは同じページに留まります。 wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail($username) ( $referrer = $_SERVER["HTTP_REFERER"]; // リクエストの送信元 // リファラーがあり、これが wp-login.php ページではない場合 if(!empty($referrer ) && !strstr($ Referrer,"wp-login") && !strstr($referrer,"wp-admin")) ( wp_redirect(add_query_arg("login", "failed", $referrer)); // リダイレクトとクエリパラメータを追加しますか?login= 終了に失敗しました ) )

#3 WordPress 登録フォーム

登録フォームを表示するための特別な機能は提供されていません。 したがって、独自の HTML コードを記述することでフォームを表示できます。 登録フォームの HTML コードの例を次に示します。

変更点一覧

コード wpログインフォーム: wp-includes/general-template.php WP 5.2.3