<code id="ymosk"><acronym id="ymosk"></acronym></code>
  • <strong id="ymosk"><input id="ymosk"></input></strong>
    <nav id="ymosk"></nav>
    <source id="ymosk"><input id="ymosk"></input></source>
  • <object id="ymosk"></object>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    漂亮的注冊和登錄切換表單【html5和css3實現】

    作者:admin    時間:2019-9-23 10:56:5    瀏覽:

    本文是關于如何使用HTML5和CSS3創建切換登錄和注冊表單的教程。

    登錄和注冊表單

    登錄和注冊表單

    demo

    在本教程中,我們將創建兩個html5表單,使用css3偽類:target在登錄和注冊之間切換。我們將使用css3和圖標字體來設計它的樣式。

    HTML

    在html中,我們將同時放置兩個表單,用css隱藏第二個表單。這是代碼:

    <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 [email protected]"/>
                    </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="[email protected]"/> 
                    </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> 

    我們在這里添加了一些HTML5的優點,并使用了一些新的輸入。輸入type=password會自動隱藏用戶鍵入的內容,并用圓點替換(取決于瀏覽器),輸入type=email允許瀏覽器檢查用戶輸入的內容是否具有有效電子郵件地址的格式。我們還使用了require=required屬性;支持此屬性的瀏覽器在填充此字段(不需要javascript)之前不會允許用戶提交表單。

    autocomplete=on屬性將根據先前的用戶輸入預先填充值。我們還為輸入使用了一些很好的占位符,當輸入未被填充時,這些占位符將顯示一些指導值。

    現在是兩個棘手的部分。您可能已經注意到表單頂部的兩個鏈接。這是一個小技巧,可以讓我們的表單在使用錨時表現良好,這樣當我們單擊切換鏈接并觸發:target偽類時,它就不會在長頁面上“跳躍”。

    第二個小技巧是使用圖標字體。我們將使用數據屬性來顯示圖標。通過在html中使用相應的字符設置data-icon="icon_character",我們只需要一個css屬性選擇器來設置所有圖標的樣式。

    CSS

    本教程使用了一些高級的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;
    }

    我們添加了一個由兩個陰影組成的漂亮的長方體陰影:一個用于創建內部藍色的陰影和一個外部陰影。我們再解釋一下z-index

    在下面,我們將使用一些背景剪輯設置標題的樣式:

    /**** 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%); 
    }

    請注意,目前只有webkit瀏覽器支持background-clip: text,因此我們將在此處為webkit創建一個剝離的背景,并將其剪切到文本中以將條紋添加到h1標題。

    :after偽類的幫助下,我們還在標題下創建了一條漸消線。我們使用2倍的高度漸變,并在兩端將背景淡入0不透明度。

    輸入的樣式

    現在讓我們來設計我們的輸入,并給它們一個更好的外觀。

    /**** 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;
    }

    首先我們設置輸入的樣式,并刪除outline,但是這里要小心,outline可幫助用戶知道哪些輸入是焦點,所以如果刪除它,應該為輸入提供一些:active:focus狀態。

    /* 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;

    在這里,我們使用:而不是偽類來設置所有輸入的樣式,復選框除外。我提供了一個:focus:active,因為我決定刪除outline

    圖標字體

    現在有趣的是:圖標字體。因為我們不能使用:before:after在輸入的偽類之后,我們必須稍作技巧:將把圖標添加到標簽中,然后把它放在輸入中。我用的是Fontomas庫,里面有一些漂亮的圖標。您可以重新排列它們以將圖標設置為特定的字母。還記得數據圖標屬性嗎?你應該把信放在那里。我用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;
    }

    /** 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;
    }

    是的,就是這樣,你不需要為每個圖標都有一個類。我們使用content: attr(data-icon)data-icon屬性中檢索字母,因此我們只需要聲明字體,選擇一個好的顏色并定位它。

    提交按鈕的樣式

    現在讓我們為這兩個表單設置提交按鈕的樣式。

    /*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;
    }

    這里的技巧是使用框陰影來創建一些額外的邊界。您只能使用一個邊框,但要盡可能多的框陰影。我們將使用長度值創建一個白色邊框,3px寬,沒有模糊。

    復選框的樣式

    然后我們將設置復選框的樣式,這里沒有什么特別的:

    /* 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%;
    }

    表單底部的樣式

    我們將使用重復的線性漸變設置表單底部的樣式,以創建條紋背景。

    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;
    }

    表單切換動畫制作

    現在我們有了兩個很好的表單,但我們希望一次只顯示一個。現在是制作動畫的時候了!!

    首先要做的是通過將不透明度設置為0來隱藏第二個窗體:

    #register{
      z-index: 21;
      opacity: 0;
    }

    還記得我們的登錄表單的z-index22嗎?我們將給第二個表單21z-index,把它放在登錄表單的“下面”。

    現在真正好的部分是:使用:target偽類切換表單。你真正需要了解的是:target,我們將使用錨來進行轉換。錨鏈接的正常行為是跳轉到頁面中的目標。但我們不想跳到任何地方,我們只想切換表單。

    下面是我們使用頁面頂部兩個鏈接的技巧:我們并沒有直接鏈接到第二個表單,而是將這兩個鏈接放在頁面頂部并設置display: none。這樣可以避免頁面跳轉。

    #toregister:target ~ #wrapper #register,
    #tologin:target ~ #wrapper #login{
      z-index: 22;
      animation-name: fadeInLeft;
      animation-delay: .1s;
    }

    這就是發生的事情:當我們點擊“Join us”按鈕時,我們觸發注冊。然后,我們使用同級選擇器~查找#register來制作動畫。我們使用一個叫做fadeInLeft的動畫。由于我們使用0不透明度“隱藏”窗體,我們將使用淡入的動畫使其顯示出來。我們還更改了z-index,使其顯示在另一個表單的頂部。

    另一種情況也是如此。

    這是動畫的代碼。

    .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);
      }
    }

    好了,希望大家喜歡這個教程!

    本文實例演示及源碼下載

    demodownload

    標簽: css  css3  html5  登錄表單  注冊表單  
    • IT熱文
    • 站長推薦
    微拍福利