|
|
|
|
|
本文是關(guān)于如何使用HTML5和CSS3創(chuàng)建切換登錄和注冊(cè)表單的教程。
登錄和注冊(cè)表單
在本教程中,我們將創(chuàng)建兩個(gè)html5表單,使用css3偽類:target
在登錄和注冊(cè)之間切換。我們將使用css3和圖標(biāo)字體來設(shè)計(jì)它的樣式。
在html中,我們將同時(shí)放置兩個(gè)表單,用css隱藏第二個(gè)表單。這是代碼:
<div id="container_demo" >
<a class="hiddenanchor" id="toregister"></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="#toregister" class="to_register">Join us</a>
</p>
</form>
</div>
<div id="register" 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="email" 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_register"> Go and log in </a>
</p>
</form>
</div>
</div>
</div>
我們?cè)谶@里添加了一些HTML5的優(yōu)點(diǎn),并使用了一些新的輸入。輸入type=password
會(huì)自動(dòng)隱藏用戶鍵入的內(nèi)容,并用圓點(diǎn)替換(取決于瀏覽器),輸入type=email
允許瀏覽器檢查用戶輸入的內(nèi)容是否具有有效電子郵件地址的格式。我們還使用了require=required
屬性;支持此屬性的瀏覽器在填充此字段(不需要javascript)之前不會(huì)允許用戶提交表單。
autocomplete=on
屬性將根據(jù)先前的用戶輸入預(yù)先填充值。我們還為輸入使用了一些很好的占位符,當(dāng)輸入未被填充時(shí),這些占位符將顯示一些指導(dǎo)值。
現(xiàn)在是兩個(gè)棘手的部分。您可能已經(jīng)注意到表單頂部的兩個(gè)鏈接。這是一個(gè)小技巧,可以讓我們的表單在使用錨時(shí)表現(xiàn)良好,這樣當(dāng)我們單擊切換鏈接并觸發(fā):target
偽類時(shí),它就不會(huì)在長頁面上“跳躍”。
第二個(gè)小技巧是使用圖標(biāo)字體。我們將使用數(shù)據(jù)屬性來顯示圖標(biāo)。通過在html中使用相應(yīng)的字符設(shè)置data-icon="icon_character"
,我們只需要一個(gè)css屬性選擇器來設(shè)置所有圖標(biāo)的樣式。
本教程使用了一些高級(jí)的css3技巧,這些技巧可能不適用于所有瀏覽器。我們開始吧。
首先,讓我們給兩個(gè)表單一些容器的通用樣式。
#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;
}
我們添加了一個(gè)由兩個(gè)陰影組成的漂亮的長方體陰影:一個(gè)用于創(chuàng)建內(nèi)部藍(lán)色的陰影和一個(gè)外部陰影。我們?cè)俳忉屢幌?code>z-index。
在下面,我們將使用一些背景剪輯設(shè)置標(biāo)題的樣式:
/**** general text styling ****/
#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;
}
/** For the moment only webkit supports the 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%);
}
請(qǐng)注意,目前只有webkit瀏覽器支持background-clip: text
,因此我們將在此處為webkit創(chuàng)建一個(gè)剝離的背景,并將其剪切到文本中以將條紋添加到h1
標(biāo)題。
在:after
偽類的幫助下,我們還在標(biāo)題下創(chuàng)建了一條漸消線。我們使用2倍的高度漸變,并在兩端將背景淡入0不透明度。
現(xiàn)在讓我們來設(shè)計(jì)我們的輸入,并給它們一個(gè)更好的外觀。
/**** 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;
}
首先我們?cè)O(shè)置輸入的樣式,并刪除outline
,但是這里要小心,outline
可幫助用戶知道哪些輸入是焦點(diǎn),所以如果刪除它,應(yīng)該為輸入提供一些:active
和:focus
狀態(tài)。
/* all the input except submit and 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;
}
在這里,我們使用:
而不是偽類來設(shè)置所有輸入的樣式,復(fù)選框除外。我提供了一個(gè):focus
和:active
,因?yàn)槲覜Q定刪除outline
。
現(xiàn)在有趣的是:圖標(biāo)字體。因?yàn)槲覀儾荒苁褂?code>:before和:after
在輸入的偽類之后,我們必須稍作技巧:
將把圖標(biāo)添加到標(biāo)簽中,然后把它放在輸入中。我用的是Fontomas庫,里面有一些漂亮的圖標(biāo)。您可以重新排列它們以將圖標(biāo)設(shè)置為特定的字母。還記得數(shù)據(jù)圖標(biāo)屬性嗎?你應(yīng)該把信放在那里。我用data-icon=’u’
表示用戶,'e'表示電子郵件,'p'表示密碼。一旦我選擇了字母,我就下載了字體,并使用Fontsquirrel字體生成器將其轉(zhuǎn)換為與@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;
}
/** the magic icon trick ! **/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
是的,就是這樣,你不需要為每個(gè)圖標(biāo)都有一個(gè)類。我們使用content: attr(data-icon)
從data-icon
屬性中檢索字母,因此我們只需要聲明字體,選擇一個(gè)好的顏色并定位它。
現(xiàn)在讓我們?yōu)檫@兩個(gè)表單設(shè)置提交按鈕的樣式。
/*styling both submit buttons */
#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;
}
這里的技巧是使用框陰影來創(chuàng)建一些額外的邊界。您只能使用一個(gè)邊框,但要盡可能多的框陰影。我們將使用長度值創(chuàng)建一個(gè)白色邊框,3px寬,沒有模糊。
然后我們將設(shè)置復(fù)選框的樣式,這里沒有什么特別的:
/* styling the checkbox "keep me logged in"*/
.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%;
}
我們將使用重復(fù)的線性漸變?cè)O(shè)置表單底部的樣式,以創(chuàng)建條紋背景。
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;
}
現(xiàn)在我們有了兩個(gè)很好的表單,但我們希望一次只顯示一個(gè)。現(xiàn)在是制作動(dòng)畫的時(shí)候了??!
首先要做的是通過將不透明度設(shè)置為0來隱藏第二個(gè)窗體:
#register{
z-index: 21;
opacity: 0;
}
還記得我們的登錄表單的z-index
是22嗎?我們將給第二個(gè)表單21的z-index
,把它放在登錄表單的“下面”。
現(xiàn)在真正好的部分是:使用:target
偽類切換表單。你真正需要了解的是:target
,我們將使用錨來進(jìn)行轉(zhuǎn)換。錨鏈接的正常行為是跳轉(zhuǎn)到頁面中的目標(biāo)。但我們不想跳到任何地方,我們只想切換表單。
下面是我們使用頁面頂部兩個(gè)鏈接的技巧:我們并沒有直接鏈接到第二個(gè)表單,而是將這兩個(gè)鏈接放在頁面頂部并設(shè)置display: none
。這樣可以避免頁面跳轉(zhuǎn)。
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
z-index: 22;
animation-name: fadeInLeft;
animation-delay: .1s;
}
這就是發(fā)生的事情:當(dāng)我們點(diǎn)擊“Join us”按鈕時(shí),我們觸發(fā)注冊(cè)。然后,我們使用同級(jí)選擇器~
查找#register
來制作動(dòng)畫。我們使用一個(gè)叫做fadeInLeft的動(dòng)畫。由于我們使用0不透明度“隱藏”窗體,我們將使用淡入的動(dòng)畫使其顯示出來。我們還更改了z-index
,使其顯示在另一個(gè)表單的頂部。
另一種情況也是如此。
這是動(dòng)畫的代碼。
.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);
}
}
正在“消失”的表單將有另一個(gè)動(dòng)畫,該動(dòng)畫將使其淡出到左側(cè):
#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);
}
}
好了,希望大家喜歡這個(gè)教程!