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

HTML5 ve CSS3 ile Flat Giriş Ekranı

4 sene önce19 Kasım 2015 Vatanay Özbeyli CSS3, HTML5

login-screenAra verdiğimiz HTML5 ve CSS3 derslerimize güzel bir giriş ekranı tasarımı ile devam ediyoruz.

Pure CSS diye tabir edilen, hiçbir şekilde JavaScript desteği kullanılmadan hazırlanan layout tiplerine örnek olarak göstereceğimiz bu tasarım barındırdığı animetif ve fonksiyonel özellikleriyle de beğeninizi kazanacaktır.

Modern bir tasarım hazırlayacağız. Renklerimiz flat, yapımız minimal ve beraberinde de responsive olmak zorunda. Ayrıca css animasyonlarıyla da bir fade-in geçişi hazırlayabiliriz.

ÖRNEĞİ GÖRÜNTÜLE


Login Ekran Tasarımı

Unutmayın tekniğimiz Pure CSS olacak, yani JS kullanmıyoruz. O halde validasyonları HTML5 ile yönetip CSS3 Selector yapılarıyla stilize edebiliriz. Ayrıca pek kullanmadığımız :valid ve :invalid gibi seçici araçlarını da bu örnekte etkili olarak kullanabiliriz.

Hazırsanız başlayalım.

HTML Kodları

Bütün tasarımımızı bir section elemanı içerisinde oluşturalım. Wrapper olarak tanımlayacağımız bu öğe login-wrapper classına sahip olabilir. Onun içerisine de sırayla form ve input öğelerimizi koyabiliriz. Tabii arkaplan rengi, yazı tipleri ve geçiş animasyonlarımızı unutmayalım. O kısmı da CSS tarafında çözeceğiz.

<section class="login-wrapper">
  <form class="login-panel">
    <input type="email" id="mail" required>
    <label for="mail" unselectable="on">Mail</label>
    <input type="password" id="password" required>
    <label for="password" unselectable="on">Password</label>
    <input type="checkbox" id="remember">
    <label for="remember" class="remember"> Remember me</label>
    <input type="submit" value="Login">
    <a class="forget-password">Can't access your account?</a>
  </form>
</section>
Yukarıdaki kod dizinindeki unselectable=”on” alanı, Internet Explorer’ın eski versiyonlarında ilgili elemanın fareyle taranarak seçilmesini engellememizi sağlıyor. Güncel tarayıcılar için dersin ilersinde bu işlemi CSS ile yapacağız.

Artık bu kodları stilize edebiliriz.

CSS Kodları

İşlerimizi sıralayalım. İlk olarak ekran tasarımı, yani tüm arkaplan, renk ve yazı tiplerini hazırlayalım. Sonrasında da dışarıdan içeriye doğru tasarımı oluşturalım.

Google Web Fonts üzerinden Hind isimli yazı tipini kullanıyoruz.

@import url(https://fonts.googleapis.com/css?family=Hind:400,300,700&subset=latin-ext);
Google Web Fonts nasıl kullanılır? Şu makalemize göz atın : “Google Web Fonts nasıl kullanılır?”

Artık yazı tipimiz hazır. Şimdi sırada html ve body elemanlarımızı yönetmek var. Ekranın hem dikey hem yatay ortasını kullanacağımız için tablo yapıdaki bir tasarımı dikey ve yatay olarak 100% boyuta getiriyoruz. Sonrasında da gri tonları içeren bir gradient arkaplan oluşturuyoruz.

Birkaç güzel arkaplan rengi için “CSS ile Yumuşak Geçişli Arka Planlar” isimli makalemize de göz atabilirsiniz.

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: #ecf0f1;
  background: -moz-radial-gradient(center, ellipse cover, #ecf0f1 0%, #bdc3c7 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ecf0f1 0%, #bdc3c7 100%);
  background: radial-gradient(ellipse at center, #ecf0f1 0%, #bdc3c7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f1', endColorstr='#bdc3c7', GradientType=1);
  display: table;
}

Şimdi login-wrapper isminde tanımladığımız section elemanını ekranın ortasına taşıyalım. Ayrıca * (yıldız) simgesi kullanarak onun altındaki tüm yapılara geçiş efekti ekleyelim. Bu tanım her değişikliği 1 saniyede geniş efektiyle göstermemizi sağlayacak.

User select tanımları sayesinde de kullandığımız her şeyin fare ile taranarak seçilmesini engelliyoruz.

.login-wrapper {
  display: table-cell;
  vertical-align: middle;
  font-family: 'Hind', sans-serif;
  font-weight: 300;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.login-wrapper * {
  transition: all 1s;
}

Şimdi en önemli alanlarımızdan birine geliyoruz. Wrapper içine ekleyeceğimiz form, yani login-panel classına sahip elemanın tasarımına başlıyoruz. Biraz boşluk, bunlardan etkilenmemek için box-sizing tanımı, beyaz bir arkaplan ve en önemlisi fade-in isimli daha sonra hazırlayacağımız animasyonun izlerini buraya ekleyelim.

Ayrıca box-shadow ile üzerine gelindiğinde arkasında bir gölge oluşmasını sağlıyoruz.

.login-wrapper .login-panel {
  box-sizing: border-box;
  display: table;
  background-color: white;
  width: 500px;
  margin: 0 auto;
  padding: 60px 40px 40px 40px;
  animation: fade-in 1s ease-in 0s 1 alternate;
}

.login-wrapper .login-panel:hover {
  box-shadow: 0 0 50px rgba(1, 1, 1, .3);
}

Şimdi de inputların üstünde belirecek label yapıları için tasarım hazırlayalım. Bu öğeler inputların içine oturacağı için bu işi de animasyon ile yapacağız.

.login-wrapper .login-panel label {
  font-size: 16px;
  display: block;
  margin: 5px 0;
  color: #34495e;
  opacity: 0;
  animation: fade-in 1s ease-in 1s 1 forwards;
}

Şimdi de artı (+) seçim aracıyla inputlarımızın altında bulunan label elemanlarını yakalıyoruz ve stilize ediyoruz. İkinci tanım ise :focus, yani form öğesi doldurulurken label’ın alacağı şekli yönetiyor olacak.

Bu da ilginizi çekebilir  CSS ile Linklerinize Animasyonlu Hover

Burada animasyonumuzda paused tanımını kullanmamızın sebebi içleri dolan inputlara unfocus olmamızda labelların tekrar verinin üzerine çıkmasını engellemek. Yani animasyonun bir kere oynamasını sağlıyoruz.

.login-wrapper .login-panel input[type="email"] + label,
.login-wrapper .login-panel input[type="password"] + label {
  position: relative;
  color: #c4cacd;
  transition: all .3s;
  animation: label .3s ease-in 0s 1 forwards;
  animation-play-state: paused;
  animation-play-state: running;
}

.login-wrapper .login-panel input[type="email"]:focus + label,
.login-wrapper .login-panel input[type="password"]:focus + label {
  font-size: 16px;
  color: #34495e;
  animation-fill-mode: forwards;
}

Şimdi tüm inputlarımız için ortak olan kodlarımızı yazalım.

.login-wrapper .login-panel input[type="email"],
.login-wrapper .login-panel input[type="password"],
.login-wrapper .login-panel input[type="submit"] {
  font: 400 20px 'Hind', sans-serif;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-left: 3px solid transparent;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  display: block;
  padding: 10px 20px;
  opacity: 0;
  animation: fade-in 1s ease-in 1.5s 1 forwards;
}

Form öğelerine odaklanıldığında tasarımları nasıl olmalı? İşte şimdi tam olarak onu belirleyeceğiz.

.login-wrapper .login-panel input[type="email"]:focus,
.login-wrapper .login-panel input[type="password"]:focus {
  background-color: #E1E6E7
}

.login-wrapper .login-panel input[type="email"]:focus,
.login-wrapper .login-panel input[type="password"]:focus,
.login-wrapper .login-panel input[type="submit"]:focus {
  outline: none;
}

Sırada form öğelerine girilen datanın doğru olup olmadığını kontrol eden validasyonları CSS ile yakalamak var. Eğer girilen data bir mail ya da password ise input’un yanına mavi bir border atalım.

.login-wrapper .login-panel input[type="email"]:valid,
.login-wrapper .login-panel input[type="password"]:valid {
  border-left: 3px solid #3498db;
}

.login-wrapper .login-panel input[type="email"]:valid + label,
.login-wrapper .login-panel input[type="password"]:valid + label {
  color: #3498db !important;
}

Checkbox ve hemen yanındaki yazının tasarımını yapalım.

.login-wrapper .login-panel input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.login-wrapper .login-panel input[type="checkbox"],
.login-wrapper .login-panel label[for='remember'] {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.login-wrapper .login-panel label[for='remember'] {
  position: relative;
  font-size: 16px;
  margin-top: -25px;
}

.login-wrapper .login-panel input[type="checkbox"] + [for='remember']:before {
  content: '';
  background: #ecf0f1;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  text-align: center;
  opacity: 0;
  animation: fade-in 1s ease-in 2s 1 forwards;
}

.login-wrapper .login-panel input[type="checkbox"]:checked + [for='remember']:before {
  background: #3498db;
  box-shadow: inset 0px 0px 0px 5px #ecf0f1;
}

.login-wrapper .login-panel input[type="checkbox"]:checked + [for='remember'] {
  color: #3498db;
}

.login-wrapper .login-panel input[type="checkbox"]:focus + [for='remember'] {
  outline: 1px solid #ddd;
}

Submit butonumuz içinde diğer form öğelerimize yakışır mavi bir tasarım oluşturalım.

.login-wrapper .login-panel input[type="submit"] {
  text-transform: uppercase;
  width: 100%;
  background-color: #3498db;
  color: white;
  font-weight: 300;
  letter-spacing: 10px;
  margin-top: 15px;
  cursor: pointer;
}

.login-wrapper .login-panel input[type="submit"]:hover {
  background-color: #2980b9;
}

Şifremi unuttum yazısını da stilize edelim.

.login-wrapper .login-panel .forget-password {
  margin-top: 20px;
  display: block;
  text-align: center;
  color: #bdc3c7;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  animation: fade-in 1s ease-in 2s 1 forwards;
}

.login-wrapper .login-panel .forget-password:hover {
  text-decoration: underline;
}

Mobil cihazlarda yapı biraz küçülmeli.

@media (max-width: 768px) {
  .login-wrapper .login-panel {
    width: 90%;
    padding: 60px 20px 20px 20px;
  }
}

İki adet animasyonumuz olacak. Son olarak onları hazırlayalım. Birincisinin ismi fade-in, diğeri de label.

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes label {
  0% {
    top: -58px;
    left: 20px;
    opacity: 1;
  }
  100% {
    top: -98px;
    left: 0;
    opacity: 1;
  }
}

Artık tasarımımızda bittiğine göre aşağıdaki gibi bir yapıya ulaşmış olmalısınız.

İyi çalışmalar.

Share on Facebook Share
Share on TwitterTweet
Share on Google Plus Share
Share on Pinterest Share
Share on LinkedIn Share
CSS3 flat tasarım giriş ekranı html5 login screen tasarımı


Yazı navigasyonu

Ders 3 : Bootstrap İkon Kullanımı
Kozmos’un En İyileri

SOSYAL

E-Posta Aboneliği

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Benzer Yazılar

  • Adobewordpress gururla sunar : “iPhone Mesajlar Ekranı”
  • Haftanın Ücretsiz Web Teması #35
  • Photoshop’la Menü Kutusu Örneği -1-
  • CSS ile 3D Buton
  • CSS3 ile Açılır Arama Kutusu
  • Tek Sayfalık Web Sitesi
  • CSS3 ve jQuery ile Google Play Tab
  • Haftanın Ücretsiz Web Teması #15
  • CSS ile Yazı Arka Planı : text-fill-color
  • CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 16654
  • Yukarı Scroll Edildiğinde Gözüken Header 12471
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12401
  • Material Design Öne Çıkarılmış Menü Tasarımı 11044
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10804
  • Sitenize Kolayca Slider Ekleyin 10614
  • CSS ve jQuery ile Dönen Menü 9329
  • Sadece CSS ile Slider Yapımı 9285
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 8972
  • jQuery ile Scroll ve Arkaplan İlişkisi 7629

Kategoriler

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

Bağlantılar

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

Bumerang - Yazarkafe

Kategoriler

  • Tasarım Unsurları 388
  • Öne Çıkanlar 104
  • Photoshop Dersleri 122
  • WordPress 105
  • 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 Uzay ~ Galaksi Oluşturuyoruz
  • Photoshop ile Fotoğraflara Su Damlacıkları Ekleyin
  • Photoshop’a Alternatif 10 Resim Editörü
  • Photoshop ile Eskitme Efekti #2