Güzel Form Yapımı Dripple Tarzı

 HTML
----------
<form class="guzelForm">
    <input type="text" id="i1"><label for="i1" class="l1">Adınızı Yazın</label>
    <input type="text" id="i2"><label for="i2" class="l2">Email Adresiniz</label>
    <input type="submit" value="Gönder">
</form>



CSS
---------
.guzelForm{
    width: 980px;
    margin: 150px auto;
   
}
.l1{
    font-size: 25px;
    position: absolute;
    right: 200px;
    display: inline;
    pointer-events: none;
    left: 237px;
    top: 158px;
    color: #666;
    font-style: italic;
}
.l2{
    font-size: 25px;
    position: absolute;
    right: 200px;
    display: inline;
    pointer-events:none;
    left: 450px;
    top: 158px;
    color: #666;
    font-style: italic;
}
input{
    border: 0;
    background: none;
    width: 210px;
    font-size: 20px;
}
input[type="text"]{
    border-bottom: 2px solid #30F0F5;
        height: 40px;
}
input[type="submit"]{
    border: 2px solid #30F0F5;
    width: 120px;
    height: 40px;
}
input[type="submit"]:active{
    background: #30F0F5;
    color: white;
}
/*Focus Olduğunda*/
input[type="text"]:focus + label{
        top: 139px;
        font-size: 15px;
}
.degerli + label{
    top: 139px;
    font-size: 15px;
    color: red;
    font-weight: bold;
}
.degerli + label:before{
    content: "\2713";
    font-size: 20px;
    color: green;
    margin: 2px;

}


JS
-------
$(function(){

    $("input[type='text']").focusout(function(){
        var val = $(this).val();
        if (val === "") {
            $(this).removeClass("degerli");
        }else{
            $(this).addClass("degerli");   
        }
    })
   
})