CSS3 making a material-design-style login Interface instance

This article mainly introduces the use of CSS3 to make a material-design style login interface example, with a certain reference value, there is a need to understand.

Whim, want to learn material design style, on the attempt to complete a login page production.

This is the overall effect.

It feels good, and the end of the code is attached.

In the process of writing, did not use any picture or font icon, all use CSS3 complete, or encountered some difficulties and bugs, so want to note down, later convenient to review.

Responsive design

In this page, use the following 3 points to complete the responsive design

1, the maximum width. Sets the maximum width of a max-width so that it is compatible on large screens.

2, margin:20px Auto; Keep it centered at all times

3. Components using pixels

There is a lot more to the design of the responsive style.

Overall page layout

<!     DOCTYPE html>

CSS start

Add style to Body


HTML {    font-family: "Microsoft Yahei", Å‹ä½ "," Segoe UI "," Lucida Grande ", Helvetica, Arial, Sans-serif, FreeSans, Ari mo;    Background-color: #FF4081;    Color: #777;}

Alleys


. container{    position:relative;    max-width:360px;    margin:0 Auto;    margin-top:30px;    padding:45px 20px;    border-radius:4px;    box-shadow:2px 2px 5px rgba (0, 0, 0, 0.3);    Background-color: #fff;    Box-sizing:border-box;}

Note that adjusting the internal margin here uses the padding instead of the sub element using margin, because if you want to use margin, you need to add Overflow:hidden for the BFC effect. This will affect the trailing button overflow.

Head logo


. container>.logo {    height:150px;    width:150px;    position:relative;    Background-color: #EFEFEF;    border-radius:75px;    margin:0 Auto;}

Setting the Border-radius to width and height will make it a circle


Below requires a darker semicircle of color

How to draw a semicircle?


. container>.logo::after {    content: ';    height:150px;    width:75px;    Position:absolute;    Background-color: #E1E1E1;    border-radius:0 75px 75px 0;    left:75px;    top:0;}

Set the general width to height, then set the upper left and bottom left corners to 0 and the right to 75px


Making locks, divided into two parts, Lock-top and Lock-bottom


. container>.logo>.logo-block-top {    box-sizing:border-box;    height:45px;    width:54px;    border:10px solid #F57C00;    border-bottom:0;    Position:absolute;    BORDER-RADIUS:27PX 27px 0 0;    left:48px;    z-index:1001;    top:20px;}

Also set rounded corners


. container>.logo>.logo-block-bottom {    position:absolute;    height:60px;    width:80px;    Box-sizing:border-box;    Background-color: #FFA000;    z-index:1001;    top:65px;    left:35px;    BORDER-RADIUS:7PX;}


Set the key heart, this is also divided into two parts, the top of the round hole and the ellipse below

Can be set just above the before and after pseudo elements of Lock-bottom


. container>.logo>.logo-block-bottom::before {    content: "";    Position:absolute;    height:12px;    width:12px;    Background-color: #EFEFEF;    border-radius:5px;    top:22px;    left:34px;    Box-sizing:border-box;}. Container>.logo>.logo-block-bottom::after {    content: "";    Position:absolute;    height:12px;    width:6px;    Background-color: #EFEFEF;    border-radius:2px;    top:30px;    left:37px;    Box-sizing:border-box;}

Here, the logo is done.


The following is the ' User login ' heading.

Note that it is best to use margin instead of padding, and do not break the original H4 tag.


. container>.login-header {    text-align:center;    font-size:23px;    Color: #FF4081;    font-weight:400;    margin:15px 0 18px 0;}

Add a container to the content


. container>.content {    width:90%;    margin:0 Auto;}

Add a form-group, including label and input tags, to set the relative layout


. container>.content>.form-group {    position:relative;}

Here is the core section, which sets the style for input (a bug is generated here, which is described at the end)


. container>.content>.form-group>.form-control {    z-index:3;    position:relative;    height:58px;    width:100%;    border:0px;    border-bottom:1px solid #777;    padding-top:22px;    Color: #FF4081;    font-size:12px;    Background:none;    Box-sizing:border-box;    Outline:none;    Display:inline-block;    -webkit-transition:0.3s;    transition:0.3s;}

Labe tag, use absolute positioning to place it on top of input.


. container>.content>.form-group>.form-label {    z-index:1;    Position:absolute;    bottom:10px;    left:0;    font-size:15px;    -webkit-transition:0.3s;    transition:0.3s;}

Set a certain amount of spacing for the two form group, or the following will block the Box-shadow set above


. container>.content>.form-group>:first-child {    margin-bottom:5px;}

Add a dynamic effect


. Container>.content>.form-group>.form-control:focus,.container>.content>.form-group>. form-control:valid {    box-shadow:0 1px #FF4081;    Border-color: #FF4081;}. Container>.content>.form-group>.form-control:focus+.form-label,.container>.content>.form-group >.form-control:valid+.form-label {    font-size:12px;    -ms-transform:translatey ( -20px);    -webkit-transform:translatey ( -20px);    Transform:translatey ( -25px);}

Below is the bottom option, also divided into two parts, Option-left and Option-right


. container>.content>.option {    width:100%;    height:14px;    margin-top:24px;    font-size:16px;}. container>.content>.option>.option-left {    width:50%;    Float:left;}. Container>.content>.option>.option-left>a,.container>.content>.option>.option-left>a: Hover {    color: #FF4081;    Text-decoration:none;}

In Option-right, note that this check box is not a native input, but instead uses p rotation because the native checkbox cannot change the style.


. container>.content>.option>.option-right {    width:50%;    Float:right;    Text-align:right;    Position:relative;}. Container>.content>.option>.option-right>.md-checkbox {    height:18px;    width:18px;    Display:inline-block;    Box-sizing:border-box;    Position:absolute;    Background-color: #FF4081;    Cursor:pointer;    Position:absolute;    top:3px;    right:68px;}. Container>.content>.option>.option-right>.md-checkbox[checked]:after {    content: "";    border-left:2px solid #fff;    border-bottom:2px solid #fff;    height:8px;    width:15px;    Box-sizing:border-box;    Position:absolute;    Transform:rotate ( -45deg);    top:3px;    left:2px;}

This uses the rotation in the CSS3, and mimics a selected effect

Note: Although P cannot be selected directly, it is possible to add a CHECKD property to it, which is a special CSS event effect that can be controlled by JS.

Finally, the login button.

Here, you must also use absolute positioning, the reference point is bottom and right


. container>.login-button {    position:absolute;    height:60px;    width:60px;    border:0px;    outline:0px;    Background-color: #FF4081;    border-radius:30px;    Right: -30px;    bottom:91px;    box-shadow:2px 0 0 rgba (0, 0, 0, 0.3) inset;}

Through box-shadow:2px 0 0 rgba (0, 0, 0, 0.3) inset; This sentence can be used to know an inline effect.

The middle button must also use P rotation to imitate the font icon if it is not applicable.


. Container>.login-button >.icon-login {    box-sizing:border-box;    position:relative;    width:18px;    height:3px;    Background-color: #fff;    transition:0.3s;    Display:block;    Margin:auto;}. Container>.login-button >.icon-login::after {    content: ';    Box-sizing:border-box;    Position:absolute;    left:8px;    height:12px;    width:12px;    border-top:3px solid #fff;    border-right:3px solid #fff;    Transform:rotate (45deg);    Top: -4px;}

Finally, the zoom and shadow effect on the mouse hover


. container>.login-button:hover {    box-shadow:0 0 0 rgba (0, 0, 0, 0.3) inset, 0 3px 6px rgba (0, 0, 0, 0.16), 0 5px 11px Rgba (0, 0, 0, 0.23)}.container>.login-button:hover>.icon-login {    -ms-transform:scale (1.2);    =webkit-transform:scale (1.2);    Transform:scale (1.2);}

At this point, all the CSS is over, see the effect


Transition bug Fixes

When I refresh the page or click Forgot Password, the input box will shake, this problem will only appear in the Chrome browser, Firefox or edge will not reproduce, so I am this should be a compatibility issue. In a constant attempt, I found that only canceling the transition attribute would not generate jitter.

This problem has troubled me for 3 days, the real miss his sister.

In a certain degree of query for half a day, not fruit.

Then finally in StackOverflow, search chrome input transition, finally a back to let me seem to open.

This bug had been reported, adding an script tag somewhere can advoid it.

After that, I added one of the following nodes at the end of the page and finally solved it successfully.


<script src= "./app.js type=" Text/javascript "></script>

After reading a few articles, summarize

When Chrome's input default property is over-customized, there is a transition, which causes jitter. And basically all of the pages have a script tag, so this bug is almost impossible to reproduce. And I met, kind of lucky.

At this point, the entire content of this page has been completed.

Material-design is great, angular-material is a UI library that uses AngularJS to encapsulate material-design, it's beautiful. Unlike Bootstrap's completely flat style, it uses a box-piling effect, and the animation effect is much better.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.