adobewordpress ~ güncel tasarım okulu
  • Adobe
    • Photoshop Dersleri
    • After Effects Dersleri
    • Illustrator Dersleri
  • WordPress
    • Eklentiler
    • Temalar
    • Güvenlik
  • Duvar Kağıtları
  • Tasarım Unsurları
    • PHP Dersleri
    • HTML5 Dersleri
    • CSS Dersleri
    • jQuery
    • Bootstrap
    • SEO Dersleri
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler
  • Yazarlar

Web Sayfanıza Etkileyici Giriş Paneli

Vatanay Özbeyli CSS3, HTML5, Tasarım Unsurları

CSS3 HTML5 Giriş PenceresiÜyelik sistemi ve yönetici sayfaları bulunan tüm web sayfaları kullanıcıların giriş yapabileceği formlar barındırmakta. Siz kendi kullanıcı giriş formunuzun tasarımından memnun musunuz?

Uzun bir aradan sonra tekrar bir giriş formu tasarımıyla sizlerleyiz. Bu sefer açık tonlar ve basit bir tasarım kullandık. Bu sefer iskeletimiz ise son teknoloji CSS3 ve HTML5 kod satırlarından oluşmakta!

ÖRNEĞİ GÖRÜNTÜLE

Nasıl hazırlanır?

Sizler için hazırladığımız tasarım, form ile uygun bir arka plan rengi kullanmakta. Geçişli olan bu renk body tagına uygulanan linear-gradient ve box-shadow ile hazırlanmakta. Söz konusu arka plan daha önce “CSS ile Yumuşak Geçişli Arka Planlar” isimli konumuzda paylaşmıştık.

İlk olarak HTML kodlarımızla başlayalım. Kodlarımızı biraz tanıyacak olursak ;

  • Section HTML5 ile aramıza katılan bir element. Detaylar için buradaki makalemize göz atabilirsiniz.
  • Form objelerimizdeki placeholder tanımlamaları text formunun varsayılan değeridir. Kişi formu doldurmak için tıkladığında otomatik olarak silinirler.
  • Bildiğiniz gibi button oluşturmak için artık inputlarla cebelleşmemize gerek yok. Button tagına merhaba deyin!
<section>
<input class="giris-yap" type="text" name="kullanici-adi" placeholder="Kullanıcı adı"/><input class="giris-yap" type="password" name="parola" placeholder="Şifreniz"/>
<button>GİRİŞ YAP</button>
<h3>Şifremi Unuttum</h3><input class="radio-button" name="" value="" type="checkbox"/><h2>Beni Hatırla</h2>
</section>

Sırada CSS kodlarımız var.

section{
background:rgba(225, 225, 225, 0.4);
margin:0 auto;
width:300px;
padding:20px;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:0 0 65px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 65px rgba(0,0,0,0.2);
box-shadow:0 0 65px rgba(0,0,0,0.2);
}

.giris-yap {
margin:5px 5px 15px 5px;
width:120px;
padding:10px;
outline:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:none;
background:rgba(225, 225, 225, 0.5);
font:0.7em Arial;
color:#fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.giris-yap:focus {
background:#fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
color:#1d2b37;
}

button{
border:none;
padding:17px;
width:100%;
color:white;
letter-spacing:2px;
text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-top:5px;
font-family: Helvetica, serif;
background: #fff6e4;
background: -moz-linear-gradient(top,#8b9da9 0%, #687e8d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b9da9), color-stop(100%,#687e8d));
background: -webkit-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: -o-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: -ms-linear-gradient(top,#8b9da9 0%,#687e8d 100%);
background: linear-gradient(to bottom,#8b9da9 0%,#687e8d 100%);
}

button:active {
box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.4);
}

.radio-button{
-webkit-appearance: none;
margin:15px 0 0 70px;
background-color:#687e8d;
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.radio-button:checked {
background-color: #fff;
color: #fff;
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

.radio-button:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 1px;
left: 3px;
color: #000;
}

h2,h3 {
display:inline-block;
position:relative;
bottom:5px;
margin:0px;
left:6px;
color:white;
font: 300 0.8em Arial;
}

h3{float:left; margin-top:20px; border-bottom:1px dotted white;}

Ve tasarımımız burada son buluyor.

Bu da ilginizi çekebilir  Eskizden Kodlamaya Web Tasarımı

Kapanış

Üyeler için hazırladığınız giriş ekranları fazlasıyla önemli. Google, Yahoo, Hotmail, Twitter, Facebook, Ubuntu ve türevi tüm büyük isimlerin giriş ekranlarına ve bu tasarımı oluşturan CSS kodlarına göz atın. Gayet emek harcandığını göreceksiniz. Sizler de basit bir arayüz kullanarak kullanıcıya kolaylık sağlayan giriş ekranları kullanmalısınız. Yukarıda hazırladığımız örnek ise sizin için bir taslak niteliğinde.

İyi çalışmalar.

Paylaş
Share on Facebook Share
Share on TwitterTweet
Share on Pinterest Share
Share on LinkedIn Share
Send email Mail
basic basit ekran giriş kullanışlı login paneli screen soft useful


Yazı navigasyonu

WordPress’te Etiket Bulutu
CSS ile Toogle Menü

SOSYAL

E-Posta Aboneliği

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 17045
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12732
  • Yukarı Scroll Edildiğinde Gözüken Header 12614
  • Material Design Öne Çıkarılmış Menü Tasarımı 11535
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10993
  • Sitenize Kolayca Slider Ekleyin 10853
  • Sadece CSS ile Slider Yapımı 9725
  • CSS ve jQuery ile Dönen Menü 9555
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9227
  • jQuery ile Scroll ve Arkaplan İlişkisi 7766

Kategoriler

  • Photoshop Dersleri96
    • Fotoğraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress84
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları115
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler53
  • Öne Çıkanlar106

Bağlantılar

  • Anasayfa
  • Hakkımızda
  • Reklam
  • Kullanım
  • Yazarlık Başvurusu
  • Arşiv
  • İletişim

Kategoriler

  • Tasarım Unsurları 392
  • Öne Çıkanlar 106
  • Photoshop Dersleri 123
  • WordPress 106
  • Video Dersler 53
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 3

Adobe Download
Tasarım dünyasına detaylı bir giriş yapmak mı istiyorsunuz? Creative Cloud'u şimdi bilgisayarınıza kurun!

Download Adobe Photoshop CC
Download Adobe After Effects CC
Download Adobe Flash Pro CC
Download Adobe Dreamweaver CC
Download Adobe Illustrator CC
Download Adobe InDesign CC

Uyuya mı kaldın?

10 dakikadır bir işlem yapmadın. Yoksa uyuya mı kaldın?
ÖNE ÇIKANLAR
  • Photoshop ile Metalik Yazı Efekti #2
  • CSSGram ile Resimlerinize Instagram Filtresi Ekleyin
  • CSS ile Mobil Menü
  • Material Design Öne Çıkarılmış Menü Tasarımı