Method for making login boxes with CSS3

This article will explain in detail the method of making a login box in CSS3, and Xiaobian feels very practical, so share it to everyone, I hope everyone can gain something after reading this article.

As a newbie, personal feels difficulties in:

1. The shadow is used (outer frame, account bar, password bar, button)
2. Account bar, password bar layout
3.Button color gradient
give some ideas, I hope everyone provides some simple way to help more new hands.
HTML code is as follows:

login to
 love.ly   
  • Remember Me
  • Forgot UserName or Password?
  • LOVE.LY PERSONAL Blog .psd Template
  • CopyRight © 2012 Matt Gentile
  • Love .ly home
  • | Work
  • |
Terms of use | ?
? ? ||
Also: e {Box-Shadow: inset x-offset y-offset blur-radius spread-radius color} In other said sentence:
 Object Selector {box-shadow: Projection Offset X Offset Y shadow blur radius extended radius shadow color shading}   

box-shadow values: shadow type: this parameter is an optional value, if no value which the default shadow outer projection; whichever unique value if the “inset”, is to become the outer shadows shadow, the shadow set that is to say when the type is “inset”, the shadow is projected;
 X-offset : refers to a shade level offset value can take positive and negative values ​​may be positive or negative value, if the value is positive, while the right shading object, which is negative on the contrary, in the shadow of the object on the left;  Y-offset: offset means the vertical shadow, which may be positive or negative value, if positive, a shadow at the bottom of the object, which is negative and vice versa, the shadow of the object at the top;  shadow blur radius: this parameter is optional ,, but the value can only be positive, if the value is 0, the shadow does not have the blur effect, more blurred shadow edges of its larger value;  shadow extended radius: this optional parameter, whose value may be positive or negative, if the value is positive, the expansion of the entire shadow are stretched, whereas a negative value is, the reduction  shadow color: this parameter is optional, if when not set any color, the browser will take the default colors, but each color is not the same as the default browser, especially in safari and chrome webkit core browser will colorless, that is transparent, it is recommended not to omit this parameter.   Account column, column layout password:  



Account column, shadow password field with the above background box approach, not more explains, the main difficulty in how to how to change the entire account field, password field background color in the focus of the two input time. Because when we account column in focus, in front of a small icon bar code can not disappear, so we used a span tag icon will be placed inpUT tag front. The HTML code is as follows:

用CSS3制作登录框的方法








In order to achieve FOCUS, we need to adjust the size of the INPUT to the same size as Div.Text, then we found that the SPAN tag will always Occupy the space in front of Input, then we need span to use POSition: absolute to make it out of the document stream, adjust the ICON’s position, use padding-left to the inputholder, and the content entered when we entered, then the entire Input It is full of account columns, password bar. The specific CSS style is as follows: 用CSS3制作登录框的方法

UL Li Div {Width: 260px; Height: 40px; Background: # e1dcd8; color: RGB (98, 94, 91); box-shadow: INSET 0PX 2PX 5PX #aaaaaa; Border-Radius: 5px; Position: relative;} ul li .yonghu {font-family: iconfont; position: absolute; top: 12px; left: 10px;} ul li .mima {font-family : Iconfont; Position: Absolute; Top: 12px; Left: 10px;} UL Li Div Input {HEIGHT: 40PX; Width: 190px; Padding: 0 35px; border: none; background: # e1dcd8; color: RGB (98, 94, 91); Box-shadow: 0px 1px 1px RGBA (255, 255, 255, 0.7), INSET 0PX 2PX 5PX #aaaaaaa; border; -Radius: 5px;} UL Li INPUT: FOCUS {OUTLINE: NONE; Background: # f5f2ef;}

We need to make the Button style, here to introduce CSS3 Background Gradient Properties Linear-Gradient: Syntax:
  
  • : linear-gradient (
    ,]? [, +) : [ip | rT]? ||
    ?
  • :
  • | ?
    [ Value:
  • LEFT: Set the horizontal value value of the left side gradient.
    Right: Set the abscissa value of the right side as the progressive start point. TOP: Set the vertical width value of the top as a gradient starting point.

    Bottom: Set the longitudinal coordinate value of the bottom as the starting point.

    : Specify the direction of the gradient (or angle) by the angle value. : Specifies the starting color of the gradient.
    : Specify color. See Color Value : Specify the startlight position with the length value. Negative values ​​are not allowed : Specify the startlight position with percentage. 

    This color is a cumbersome process. Here you can recommend a more expensive way, use BUTTON generator, after making it, you will copy the code. Then add HOVER, Active style our Button is completed.
    The following is the CSS style of Button:

    UL Li INPUT [TYPE * = “Button”] {width: 100%; Height: 40px; font-family: arial, helvetica , Sans-SERIF; FONT-SIZE: 18PX; Color: #fffffff; Background: -moz-linear-gradient (top, # 94a64 0%, # 7A924A 50%, # 607738); Background: -Webkit-Gradient (Linear, Left Top, Left Bottom, FROM (# 94aa64), Color-Stop (0.50, # 7A924A), TO (# 607738)); -Moz-Border-Radius: 5px; -webkit-border-radius: 5px; border-radius : 5px; border: 1px solid # 7d8862; -moz-box-shadow: 0px 1px 0px RGBA (170, 170, 170, 1), INSET 0PX 1PX 1PX RGBA (255, 255, 255, 0.7); -Webkit-Box-Shadow:0px 1px 0px rgba (170,170,170,1), inset 0px 1px 1px rgba (255,255,255,0.7); box-shadow: 0px 1px 0px rgba (170,170,170,1), inset 0px 1px 1px rgba (255,255,255,0.7); text-shadow: 0px -1px 0px RGBA (000,000,000, 0.3), 0px 0px 0px RGBA (255, 255, 255, 0);} UL Li INPUT [TYPE * = “Button”]: Hover {Opacity: 0.8;} UL Li Input [type * = “Button “]: Active {Width: 100%; Height: 40px; Font-Family: Arial, Helvetica, Sans-Serif; Font-size: 18px; Color: #fffff; Background: -moz-linear-gradient (top, # 607738 0%, # 7A924A 50%, # 94aa64); Background: -Webkit-Gradient (Linear, Left Top, Left Bottom, From (# 607738), Color-Stop (0.50, # 7A924A), TO (# 94aa64)); -Moz-Border-Radius: 5px; -Webkit-Border-Radius: 5px; border-radius: 5px; border: 1px solid # 7d8862; -moz-box-shadow: 0px -1px 0px RGBA (170, 170, 170, 1), INSET 0PX-1PX 1PX RGBA (255, 255, 255, 0.7); -Webkit-Box-Shadow: 0px -1px 0px RGBA (170, 170, 170, 1), INSET 0PX -1PX 1PX RGBA (255, 255, 255, 0.7); Box-Shadow: 0px -1px 0px RGBA (170, 170, 170, 1), INSET 0PX -1PX 1PX RGBA (255, 255, 255, 0.7); Text-Shadow: 0px 1px 0px RGBA (000,000,000, 0.3), 0px 0px 0px RGBA (255, 255, 255, 0);}
       With regard to the method of making a login box with CSS3, share it here, I hope that the above can help everyone can learn more. If the article is good, you can share it out to let more people see.                      
    © Copyright Notice
    THE END
    Just support it if you like
    like0
    share
    comment Grab the couch

    Please log in to comment