こんにちは、ハブラドラッグ！ このチュートリアルでは、ログインフォームと登録フォームの2つのHTML5フォームを作成する方法を学習します。 これらのフォームは、CSS3 ：target疑似クラスを使用して互いに交換されます。 CSS3とアイコン付きフォントを使用します。 このデモの目的は、ユーザーにログインフォームを表示し、登録フォームへの「遷移」リンクをユーザーに提供することです。
このチュートリアルでは、 デモ1のような効果を作成する方法について詳しく説明します。
HTML
<div id="container_demo" > <!-- , http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <a class="hiddenanchor" id="tosubscribe"></a> <a class="hiddenanchor" id="tologin"></a> <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link"> Not a member yet ? <a href="#tosubscribe" class="to_subscribe">Join us</a> </p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link"> Already a member ? <a href="#tologin" class="to_subscribe"> Go and log in </a> </p> </form> </div> </div> </div>
ここでは、いくつかのHTML5トリックを使用しました。 たとえば、 type = password要素は、ユーザーが入力したことを自動的に非表示にし、文字をドットまたはアスタリスク（ブラウザーに依存）に置き換えます。 type = email要素を使用すると、ブラウザは正しい形式の電子メールアドレスを確認できます。 さらに、 require = requiredパラメーターを使用しました。 このオプションをサポートするブラウザでは、フィールドに入力するまでフォームを送信できません。ここではJavaScriptは必要ありません。 autocomplete = onパラメーターは、いくつかのフィールドに自動的に入力します。 また、置換テキストを使用して、ユーザーがフォームに記入できるようにしました。
次に、2つの注意すべき点について説明します。 おそらく、フォームの最初に2つの<a href>リンクがあることに気づいたでしょう。 この巧妙なトリックにより、アンカーを操作するときにフォームが正しく動作するようになります。
2番目のポイントは、アイコン付きのフォントの使用に関連しています。 データ属性を使用してアイコンを表示します。 パラメータdata-icon =” icon_character”をHTMLの対応する文字で設定することにより、すべてのアイコンのスタイルを確立するためにCSSで1つのルールのみを割り当てる必要があります。 この手法の詳細については、Webサイトで24の方法：フォントとデータ属性を使用してアイコンを表示するを参照してください。
CSS
コードの純度のために、基本的なパラメーター（html、bodyなど）はスキップしますが、ソースファイルで見つけることができます。 すべてのブラウザーで機能しないCSS3トリックを使用することを繰り返します。 それでは始めましょう！
CSS3を使用したフォームのスタイル設定
まず、フォームに基本的なスタイルを与えましょう。
#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }
要素に2つの影を追加しました。1つは内側の青い輝きを作成し、2つ目は外側の影を作成します。 後でz-indexについて説明します。
ここで、ヘッダーのプロパティを割り当てます。
/**** ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** webkit background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-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: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:' '; display:block; width:100%; height:2px; margin-top:10px; background: linear-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ブラウザーのみがbackground-clip：textをサポートしているため、webkit専用のストライプバックグラウンドを作成し、H1ヘッダーに添付します。 background-clip：textパラメーターはWebkitブラウザーでのみ機能するため、webkitプロパティのみを使用することにしました。 そのため、CSSを2つの部分に分割し、webkitグラデーションのみを使用しました。 ただし、WebサイトでWebkitのみを使用しないでください！ したがって、たとえば、 -webkit-text-fill-color：transparentパラメーターを使用すると、背景を透明にすることができますが、他のすべてのブラウザーはこのプロパティを無視します。
また、疑似クラス要素の後：を使用して、見出しの下に細い線を作成しました。 高さ2ピクセルからのグラデーションを使用し、エッジの透明度をゼロに減らしました。
それでは、入力フィールドを処理して、見栄えを良くしましょう。
/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }
まず、フィールドのスタイルを設定し、ストロークを削除します。 ただし、注意してください。ストロークは、ユーザーが自分のフィールドを理解するのに役立ちます。 削除する場合は、アクティブプロパティとフォーカスプロパティを適用する必要があります。
/* submit checkbox */ #wrapper input:not([type="checkbox"]){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing : content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
ここでは、チェックボックスを除くすべてのフィールドのスタイルを設定するために：not pseudoクラスを使用しました。 さらに、ストロークを削除することを決定し、プロパティを追加しました：フォーカスと：アクティブ。
今が楽しい時です：アイコン付きフォント。 疑似クラスを使用することはできないため、擬似クラスを使用して、ラベルパラメーターにアイコンを追加し、フィールドに配置します。 fontomasライブラリーを使用します 。 アイコンを対応する文字と一致させることができます。 data-icon属性を覚えていますか？ あなたが手紙を挿入する必要があるのはそれです。 ログインにdata-icon = 'u '、メールに 'e'、パスワードに 'p'を使用しました。 文字を選択したら、フォントをダウンロードし、fontsquirrelフォントジェネレーターを使用して@ font-faceに適した形式に変換しました。
@font-face { font-family: 'FontomasCustomRegular'; 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#FontomasCustomRegular') format('svg'); font-weight: normal; font-style: normal; } /** ! **/ [data-icon]:after { content: attr(data-icon); font-family: 'FontomasCustomRegular'; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }
それだけです。 アイコンごとに個別のクラスを用意する必要はありません。 content：attr（data-icon）パラメーターを使用して、data-icon属性から文字を取得しました。 したがって、フォントを割り当て、色を選択し、アイコンを配置するだけです。
次に、送信ボタンのルールを割り当てます。
/* */ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }
トリックは、box-shadowを使用して複数のフレームを作成することです。 当然、1つのフレームしか使用できませんが、複数のフレームを使用することもできます。 lengthパラメーターを使用して、幅が3ピクセルの「偽の」2番目の白いフレームをぼかしなしで作成します。
次に、チェックボックスを定型化します。ここでは、異常なものは作成しません。
/* " "*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }
ストライプのグラデーションを作成するために、複数の線形グラデーションを使用して形状の地下をスタイルします。
p.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px ); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }
これで、2つの素敵なフォームがあることがわかりましたが、そのうちの1つだけを表示する必要があります。 アニメーションの時間が来ました！
アニメーションを作成する
最初に行うことは、不透明度を0に設定して2番目の形状を非表示にすることです。
#register{ z-index: 21; opacity: 0; }
ログインフォームにはz-index：22パラメーターがあることに注意してください。 2番目のフォームでは、このパラメーターを21に割り当てて、入力フォームの「下」に配置します。
ここからが面白い部分です。疑似クラス：ターゲットを使用してフォームを交換します。 次のことを理解する必要があります：ターゲット：移動にアンカーを使用します。 アンカーの通常の動作は、ページの特定の要素にジャンプすることです。 しかし、これは必要ありません。フォームを交換するだけです。 そして、ここで私たちのトリックは、ページ上部の2つのリンクを使用して救助に来ます。 2番目のフォームに直接ジャンプして「ジャンプ」効果を引き起こす代わりに、リンクにdisplay：noneパラメーターを指定します。 これはジャンプを回避するのに役立ちます。 サイトでこのトリックを発見しました： CSS3 create （フランス語）。
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }
ここで何が起こるかです： Joinボタンをクリックすると、＃toregisterに進みます。 その後、アニメーションが実行されてから#register要素に移動します。 fadeInLeftというアニメーションを使用しています。 透明度ゼロを使用してフォームを「隠す」ため、アニメーションを使用します。アニメーションは徐々に表示されます。 また、z-indexを変更して、別のフォームの上に表示されるようにしました。 同じことが他の形式でも起こります。
これがアニメーションのコードです。 Dan EdenのCSS3アニメーションフレームワークを使用し、このフレームワークをチュートリアルに適合させました。
.animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
「消える」シェイプでは、左側に淡色のアニメーションが表示されます。
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }
これで、animate.cssファイルでDan Edenの他のアニメーションを使用できます。.animateクラスとアニメーション名を変更するだけです。 また、animate-custom.cssファイルの最後に他のいくつかのアニメーションがあります。
それだけです、友達。 このチュートリアルをお楽しみください！
一部のブラウザーでは、 background-clip：textパラメーターがサポートされていないことに注意してください。 Internet Explorer 9では、アニメーションは機能しません。 Internet Explorer 8以前では、擬似クラス：ターゲット擬似クラスはサポートされていないため、この効果はまったく機能しません。
デモ
デモを見る | ソースファイルをダウンロードする
PS転送に関するすべてのコメントは、PMで受け付けます。 よろしくお願いします！