Formlarınızla Etkileşimli Dinamik Arkaplanlar

Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.

Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

Form ve Arkaplan etkileşimi nasıl yapılır?

Bu tasarımı oluşturabileceğimiz iki ayrı yöntem var. Sadece CSS ile (~) selectoru sayesinde hazırlayabiliriz. Ya da CSS’in işini jQuery’e yaptırabiliriz.

CSS ile yapmak hem daha kolay hem daha performanslı olduğu aşikar. Burada soru “CSS3’ün (~) selectoru eski versiyon tarayıcılarla çalışıyor mu?” şeklinde gelebilir. Cevabı da açık. jQuery ve (~) selectorunun tarayıcı desteği neredeyse aynı versiyonlarda geldi.

Sadece CSS ile Hazırlama

CSS3‘ün gelişimiyle yazılımın rolleri yavaş yavaş tasarım tarafından çalınır oldu. Bugün de aynı çerçeve içerisinde bile bulunmaya iki öğenin etkileşimini sağlayacağız. İşin keyifli tarafı da bunu 1 satır kodla yapacağız.

HTML Kodları

İlk olarak HTML kodlarımızı ekleyelim.

<label for="bir">Ad</label>
<input type="text" id="bir">
<label for="iki">Soyad</label>
<input type="text" id="iki">
<label for="uc">Adres</label>
<input type="text" id="uc">
<div class='background'></div>

CSS Kodları

İlk olarak background classını atadığımız öğeyi tasarlayalım. Onu tüm sayfayı kaplayacak ve bir tür body işlevi görecek hale getirmemiz gerekiyor.

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #212121;  
  z-index: -1;
  background-size: cover;
  transition: background-color .3s;
}

Şimdi inputlara hızlı bir tasarım yapalım.

input[type=text] {
  width: 250px;
  z-index: 10;
  border:0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
}

Peki ya inputlara focus olunduğunda ne olsun?

input[type=text]:focus {
  background-color: rgba(255, 255, 255, 1);
  outline: none;
}

Inputlar seçildiğinde rengini rgba ile beyaza çevirdik. Buraya kadar herşey tamam. Peki ya o sözünü ettiğimiz renkli arkaplanlar nerede? İşte şimdi CSS3’ün (~) selectorunu kullanma vakti. Her bir inputa focus olunduğunda .background‘ın alacağı stili belirliyoruz.

#bir:focus ~ .background {
  background-color: #ff9800;
}

#iki:focus ~ .background {
  background-color: #03a9f4;
}

#uc:focus ~ .background {
  background-color: #e91e63;
}

Son olarak inputları birbirinden ayıracak sıradan bir label atayalım.

label{display:block; margin-top:50px;}

jQuery Desteğiyle Hazırlama

Üstteki HTML kodlarının aynısını kullanıyoruz. CSS tarafında da (~) selectorunun olduğu satırları siliyoruz.

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #212121;  
  z-index: -1;
  background-size: cover;
  transition: background-color .3s;
}

input[type=text] {
  width: 250px;
  z-index: 10;
  border:0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px;
}

input[type=text]:focus {
  background-color: rgba(255, 255, 255, 1);
  outline: none;
}

label{display:block; margin-top:50px;}

Web sayfanıza jQuery’i include ederek başlayın.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Daha sonra bu satırın altına ilgili kodlarımızı ekleyelim.

$("#bir").focusin(function() {
    $('.background').css("background-color","#ff9800");
});
$("#iki").focusin(function() {
    $('.background').css("background-color","#03a9f4");
});
$("#uc").focusin(function() {
    $('.background').css("background-color","#e91e63");
});
$("#bir, #iki, #uc").focusout(function() {
    $('.background').css("background-color","");
});

jQuery kodlarınızı </body>‘nin üstüne eklemeniz önerilir.

Kapanış

Bu makalemizde birçok başka tasarıma altyapı oluşturabilecek öğe etkileşimini konu aldık. Bir sonraki makalemizde görüşmek üzere hoşça kalın.