CUSTOM LOGIN FORM STYLING

    Rating: ★★★★☆
    View: 189
    Download: 100
    Từ khóa:

    Now we have covered the basics, let’s create some forms my friends!

    EXAMPLE 1

     

    CustomLoginForms_01

    As I said earlier, I tried to make every form different from the others with its own particularity. This one relies on its submit button, kind of “out of the screen”, and rounded.

    The Markup

    Okay, so this first example is pretty minimal, meaning we won’t use any labels. But, we of course need to tell our user what they have to write in those fields, so we use … icons. Those are the little  tags.
    Note: as usual, I will not cover here how to use an icon font like FontAwesome. If you’d like to learn more about it, you can check out the examples on their website.
    Basically, we have two containers wrapping an input and an icon. The submit button is in its own container, and we use a  ????

    A minimalistic markup for a minimalistic form. ;)

    The CSS

    .form-5 {
        /* Size and position */
        width: 300px;
        margin: 60px auto 30px;
        position: relative;
     
        /* Styles */
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
    }
    Let’s style the paragraphs and the inputs:
    .form-5 p {
        width: 70%;
        float: left;
        border-radius: 5px 0 0 5px;
        border: 1px solid #fff;
        border-right: none;
    }
     
    .form-5 input[type=text],
    .form-5 input[type=password] {
        /* Size and position */
        width: 100%;
        height: 50px;
        padding: 0 10px;
     
        /* Styles */
        border: none; /* Remove the default border */
        background: white; /* Fallback */
        background: rgba(255,255,255,0.2);
        box-shadow: 
            inset 0 0 10px rgba(255,255,255,0.5);
     
        /* Font styles */
        font-family: 'Montserrat', sans-serif;
        text-indent: 10px;
        color: #ee4c8d;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        font-size: 20px;       
    }
     
    .form-5 input[type=text] {
        border-bottom: 1px solid #fff; /* Fallback */
        border-bottom: 1px solid rgba(255,255,255,0.7);
        border-radius: 5px 0 0 0;
    }
     
    .form-5 input[type=password] {
        border-top: 1px solid #CCC; /* Fallback */
        border-top: 1px solid rgba(0,0,0,0.1);
        border-radius: 0 0 0 5px;
    }
    Let’s apply some hover styles and style the placeholders:
    .form-5 input[type=text]:hover,
    .form-5 input[type=password]:hover,
    .form-5 input[type=text]:focus,
    .form-5 input[type=password]:focus {
        background: #f7def7; /* Fallback */
        background: rgba(255,255,255,0.4);
        outline: none;
    }
     
    .form-5 input::-webkit-input-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
     
    .form-5 input:-moz-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
     
    .form-5 input:-ms-input-placeholder {
        color: #fff;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
        font-family: 'Handlee', cursive;
    }
    And now, the submit button. The little i will contain an arrow icon but we will not make it visible for now, just on hover. Note that we use a span inside the button to turn the text without turning the button.
    .form-5 button {
        /* Size and position */
        width: 30%;
        height: 102px;
        float: left;
        position: relative;
        overflow: hidden;
     
        /* Styles */
        background: 
            url(../images/noise.png), 
            radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
        border-radius: 0 5px 5px 0;
        box-shadow:
            inset 0 0 4px rgba(255, 255, 255, 0.7), 
            inset 0 0 0 1px rgba(0, 0, 0, 0.2);
        border: none;
        border-left: 1px solid silver;
        cursor: pointer;  
        line-height: 102px; /* Same as height */
    }
     
    .form-5 button i {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -20px;
        font-size: 64px;
        line-height: 109px;
        color: #8d1645;
        opacity: 0;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        transition: all 0.2s ease-out;
    }
     
    .form-5 button span {
        display: block;
     
        /* Font styles */
        color: #8d1645;
        font-family: 'Montserrat', Arial, sans-serif; 
        font-size: 20px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        transform: rotate(-90deg);
        transition: all 0.2s linear;
    }
    In case the browser doesn’t support the transform property, the text is simply not rotated. No big deal.
    We’ve added a subtle texture to the button by applying two backgrounds: the texture and the radial gradient that lies beneath.
    Now, let’s add the hover, focus and active state styles. On hover, we will make the span move to the left and fade out and the arrow will appear:
    .form-5 button:focus {
        outline: none;
    }
     
    .form-5 button:hover span,
    .form-5 button:focus span {
        opacity: 0;
        transform: rotate(-90deg) translateY(-20px);
    }
     
    .form-5 button:hover i,
    .form-5 button:focus i {
        opacity: 0.5;
        left: 0;
        transition-delay: 0.2s;
    }
     
    /* Click on button */
     
    .form-5 button:active span,
    .form-5 button:active i {
        transition: none; 
    }
     
    .form-5 button:active span {
        opacity: 0;
    }
     
    .form-5 button:active i {
        opacity: 0.5;
        left: 0;
        color: #fff;
    }  

    When we click on the button, we don’t want any transitions so that it doesn’t look to messy.

    The JavaScript

    Let’s use a little bit of JavaScript here for adding HTML5 placeholder behavior to the browsers that don’t support it. We are going to use a jQuery plugin by Mathias Bynens. Check out the GitHub repo for details.

    After including jQuery and the script, we simply call it like this:

    $(function(){
        $('input, textarea').placeholder();
    });

    And this will add placeholder behavior to older browsers.

    loading Đang tải...