LOGIN(USER-PASSWORD) MENU DESIGN IN CSS – Aptana Studio 3 Turkish ...

In this Aptana Studio 3 Turkish Tutorial, I will show you make logın (user-password) menu desıgn with CSS.

Aptana Studio 3 programın da kullanıcı giriş işlemlerinde kullanabileceğiniz güzel ve şık tasarımlı bir menü dizaynı göstereceğim. Arkaplan resmini iki farklı şekilde kullanarak 2 boyut efekti vereceğim.

Source

Çok kod kullanacağım için videoyu ara ara durdurup kodların hangi değişiklikleri yaptığını kontrol ediniz. Hadi videoya başlayalım.

Kaynak index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Kullanıcı Girisi</title>
        <link rel="stylesheet" href="stil.css" />
    </head>
    <body>
        <div class="title"><h1>Üye Girişi</h1>div>
        <div class="container">
            <div class="left"></div>
            <div class="right">
                <div class="formbox">
                    <form>
                        <p>Kullanıcı Adı</p>
                        <input type="text" name="" placeholder="Online" />
                        <p>Şifre</p>
                        <input type="password" name="" placeholder="******" />
                        <input type="submit" name="" placeholder="Giriş Yap" />
                        <a href="#">Şifremi Unuttum!</a>
                    </form>
                </div>
            </div>
            
        </div>
        
    </body>
</html>




Kaynak stil.css
body{
    margin: 0;
    padding: 0;
    background: url(arkaplan.jpg);
    background-size: cover;
    font-family: sans-serif;
}
.title{
    text-align: center;
    padding: 50px 0 20px;
    
}
.title h1{
    margin: 0;
    padding:0;
    color: #262626;
    text-transform: uppercase;
    font-size: 36px;
}
.container{
    width: 50%;
    height: 400px;
    background: #fff;
    margin:0 auto;
    border: 2px solid #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,.5);
}
.container .left{
    float: left;
    width: 50%;
    height: 400px;
    background: url(arkaplan.jpg);
    background-size: cover: 
}
.container .right{
    float: right;
    width: 50%;
    height: 400px;
    box-sizing: border-box;
}
.formbox{
    width: 100%;
    padding: 80px 40px;
    box-sizing:border-box;
    height: 400px;
    background: #fff;
}
.formbox p{
    margin: 0;
    padding:0;
    font-weight: bold;
    color: #a6af13;

}
.formbox input{
    width: 100%;
    margin-bottom: 20px;
}
.formbox input[type="text"],
.formbox input[type="password"]{
    border: none;
    border-bottom: 2px solid #a6af13;
    outline: none;
    height: 40px;
}
.formbox input[type="text"]:focus,
.formbox input[type="password"]:focus{
    border-bottom: 2px solid #262626;
}
.formbox input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    color: #fff;
    background: #262626;
    cursor: pointer;
}
.formbox input[type="submit"]:hover{
    background: #a6af13;
}
.formbox a{
    color: #262626;
    font-size: 12px;
    font-weight: bold;  
}




Bir sonraki aşamada görüşmek üzere…
Githup link:  Aptana Studio 3

İndirme Link Sitesi:  Aptana Studio 3

Posted on Utopian.io -  Rewarding Open Source Contributors

LOGIN(USER-PASSWORD) MENU DESIGN IN CSS – Aptana Studio 3 Turkish Tutorial