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.
Ç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
Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for return
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit