How to make a login form for css
Editor to share with you how to make a login form css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!
HTML structure:
Email:
Password:
CSS Code:
Body,ul {
Margin:0
Padding:0
}
A {
Color:rgb (1124185)
Text-decoration:none
}
Input:focus {
Outline:none0
}
Body {
Color:#b5b5b5
Font:14px'Arial'
}
Body
Li:first-child:after
Li:last-child:after {
Background-image:url (data:image/png;base64, … ); / *
}
.box {
Position:relative
Width:384px
Height:140px
Margin:50pxauto
}
.boxli {
List-style-type:none
Margin-bottom:10px
Border-radius:5px
Overflow:hidden
Position:relative
Height:42px
}
.boxliinput {
Box-shadow:inset005pxrgba (0rem 0.5),-1px1px0rgba (255pr. 255pr. 05)
Border:0none
Padding:8px5px5px
Border-radius:5px
Width:300px
Height:28px
-webkit-box-sizing:content-box
-moz-box-sizing:content-box
-o-box-sizing:content-box
-ms-box-sizing:content-box
Box-sizing:content-box
Background:rgba (0J. 0J. 1)
Color:#fff
}
. boxli:first-child:after
. boxli:last-child:after {
Position:absolute
Width:50px
Height:50px
Content: ""
Border-radius:25px
Z-index:2
Right:-23px
Box-shadow:008pxrgba (0pr 0pl 0.5)
}
::-webkit-input-placeholder {
Color:#fff
Font-weight:bold
}
. boxli:first-child:after {
Top:15px
}
. boxli:last-child:after {
Bottom:15px
}
.boxlabel {
Width:70px
Display:inline-block
Text-align:right
}
.boxspan {
Display:block
Color:#6296b4
Padding-left:75px
}
.button {
Position:absolute
Top:24px
Right:-30px
Width:44px
Height:44px
Border-radius:22px
Border:1pxsolid#00a1d2
Background:-webkit-linear-gradient (top,#029ecd,#0d7796)
Color:#fff
Text-shadow:1px1px0#666
Box-shadow:0005px#2c2c2c
Z-index:3
Text-align:center
Line-height:46px
-webkit-transition:all0.28sease-in
-moz--transition:all0.28sease-in
}
.button: hover {
-webkit-transform:rotate (90deg)
}
@ font-face {
Font-family:'FontAwesome'
Src:url ('font/fontawesome-webfont.eot')
Src:url ('font/fontawesome-webfont.eot?#iefix') format (' embedded-opentype')
Url ('font/fontawesome-webfont.woff') format (' woff')
Url ('font/fontawesome-webfont.ttf') format (' truetype')
Url ('font/fontawesome-webfont.svg#FontAwesome') format (' svg')
Font-weight:normal
Font-style:normal
}
.icon-arrow-right:before {
Font-family:FontAwesome
Font-weight:normal
Font-size:26px
Font-style:normal
Display:inline-block
Text-decoration:inherit
Content: "\ f061"
}
The above is all the content of the article "how to make a login form for css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
