HTML
<form action=""> <h1>Flock</h1> <input class="user" type="text" placeholder="username" /> <input class="pass" type="password" placeholder="password" /> <input class="btn" type="submit" value="SIGN IN" /> <hr style="background-color : #bebebe;"/> <hr style="background-color : #FFF; "/> <h5>Forgot your password? <a href="">click here</a></h5> <div class="setting"> <a class="icon-cog" href="#"></a> <h6 class="set">settings</h6> <div class="middle" style="left : 6px;"></div> <div class="middle" style="left : 18px;"></div> <div class="middle" style="left : 30px;"></div> <div class="middle" style="left : 42px;"></div> <div class="side left"></div> <div class="side right"></div> </div> </form>
CSS
@import url("http://fonts.googleapis.com/css?family=Berkshire+Swash"); @import url("http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css"); * { padding : 0; margin : 0; border : 0; outline : 0; font-family: Arial; } body { background-color : #917975; padding-top : 50px; } form { position : relative; width : 340px; height : 380px; border-radius : 5px; margin : 0 auto; background-color: #e3e3e3; border-top : 1px solid #f1f1f1; box-shadow : 0 0 0 1px #626262 , 0 0 0 6px rgba(150,150,150,.5) , 0 0 0 7px #cbbdbc , 0 0 0 8px #78495b; text-align : center; } h1 { margin : 10px 0 20px 0; font-size : 75px; color : #b8b8b8; font-family: 'Berkshire Swash', cursive; text-shadow: 1px 1px 0 #888 , 2px 2px 0 #ccc; } input { display : block; height : 48px; margin : 0 auto 17px; text-align : center; width : 266px; border-radius : 5px; } .user , .pass { font-size : 20px; background: -moz-linear-gradient(top, rgba(213,213,213,1) 0%, rgba(213,213,213,1) 13%, rgba(215,215,215,1) 30%, rgba(222,222,222,1) 71%, rgba(221,221,221,1) 100%); background: -webkit-linear-gradient(top, rgba(213,213,213,1) 0%,rgba(213,213,213,1) 13%,rgba(215,215,215,1) 30%,rgba(222,222,222,1) 71%,rgba(221,221,221,1) 100%); box-shadow: inset 0 0 3px 1px #ccc; border-top : 1px solid #aaa; border-bottom : 1px solid #eee; color : #555; } .btn { margin-bottom : 30px; color : #fefefe; text-shadow : 0 1px 0 #777; border : 1px solid #b6733c; box-shadow : inset 0 0 1px 1px #ffcb9c; text-transform : uppercase; background: -moz-linear-gradient(top, rgba(249,159,107,1) 0%, rgba(238,148,96,1) 57%, rgba(236,146,94,1) 89%, rgba(232,144,94,1) 94%, rgba(234,146,96,1) 96%, rgba(244,161,111,1) 100%); background: -webkit-linear-gradient(top, rgba(249,159,107,1) 0%,rgba(238,148,96,1) 57%,rgba(236,146,94,1) 89%,rgba(232,144,94,1) 94%,rgba(234,146,96,1) 96%,rgba(244,161,111,1) 100%); font-size : 17px; } .btn:hover { cursor : pointer; background: -moz-linear-gradient(top, rgba(244,161,111,1) 0%, rgba(234,146,96,1) 4%, rgba(232,144,94,1) 6%, rgba(236,146,94,1) 12%, rgba(238,148,96,1) 43%, rgba(249,159,107,1) 100%); background: -webkit-linear-gradient(top, rgba(244,161,111,1) 0%,rgba(234,146,96,1) 4%,rgba(232,144,94,1) 6%,rgba(236,146,94,1) 12%,rgba(238,148,96,1) 43%,rgba(249,159,107,1) 100%); } .user:focus , .pass:focus { box-shadow : inset 0 0 1px 1px #ffcb9c; border : 1px solid #b6733c; transition : all .2s ease-in; } hr { height : 1px; width : 270px; margin : auto; } h5 { margin-top : 10px; color : #7d7d7d; } a { text-transform : capitalize; text-decoration : none; color : #4e4e4e; } ::-webkit-input-placeholder { color : #929292; font-size : 17px; text-transform : uppercase; } :-moz-placeholder { color : #929292; font-size : 17px; text-transform : uppercase; } /* setting */ .setting { background: -moz-linear-gradient(top, rgba(238,134,135,1) 0%, rgba(235,129,131,1) 2%, rgba(223,107,107,1) 7%, rgba(223,101,98,1) 11%, rgba(225,100,96,1) 13%, rgba(229,102,96,1) 14%, rgba(227,105,100,1) 27%, rgba(225,102,97,1) 29%, rgba(225,102,97,1) 41%, rgba(223,100,95,1) 43%, rgba(225,102,97,1) 48%, rgba(223,100,95,1) 55%, rgba(225,102,97,1) 57%, rgba(225,102,97,1) 70%, rgba(223,100,95,1) 71%, rgba(225,102,97,1) 98%, rgba(223,100,95,1) 100%); background: -webkit-linear-gradient(top, rgba(238,134,135,1) 0%,rgba(235,129,131,1) 2%,rgba(223,107,107,1) 7%,rgba(223,101,98,1) 11%,rgba(225,100,96,1) 13%,rgba(229,102,96,1) 14%,rgba(227,105,100,1) 27%,rgba(225,102,97,1) 29%,rgba(225,102,97,1) 41%,rgba(223,100,95,1) 43%,rgba(225,102,97,1) 48%,rgba(223,100,95,1) 55%,rgba(225,102,97,1) 57%,rgba(225,102,97,1) 70%,rgba(223,100,95,1) 71%,rgba(225,102,97,1) 98%,rgba(223,100,95,1) 100%); background : #e06560; position : absolute; top : -2px; left : 10px; width : 60px; height : 5px; border-top : 1px solid #9d5958; transition : height .7s; } form:hover .setting { height : 70px; transition : height .7s; } form:hover h6.set { font-size : 0.67em; transition : font-size .7s; } form:hover .icon-cog { transition : font-size .7s; font-size : 42px; } .setting > div { position : absolute; } .setting .middle { border-style : solid; border-width : 12px 6px 0 6px; border-color : transparent; border-top-color : #e06560; top : 100%; } .setting .side { border-style : solid; top : 100%; } .icon-cog { position : relative; display : block; font-size : 0; color : #bb4140; transition : font-size .7s; } h6.set { position : relative; color : #bb4140; text-transform : uppercase; font-size : 0; transition : font-size .7s; } .side.left { border-width : 12px 6px 0 0; border-color : #e06560 transparent transparent transparent; left : 0; } .side.right { border-width : 12px 0 0 6px; border-color : #e06560 transparent transparent transparent; right : 0; }
Java script
ندارد
دموی آنلاین
تا بارگذاری کامل کمی صبر کنید
See the Pen Flock Login by Mojtaba Seyedi (@new) on CodePen
ممنون از مطالب مفیدتون