CSS Transition Background Efektli Kutucuklar

Basit birkaç satır CSS3 koduyla liste kutularınıza şık ve zarif görünümlü arkaplan efektleri verebilirsiniz. 

<style>

  .hoverKutu {

    background-color: #ededed;

    color: #717171;

    width: 90%;

    height: 45px;

    display: block;

    line-height: 45px;

    text-align: center;

    cursor: pointer;

    transition: background-color 1.1s ease;

    border: solid 1px #dddddd;

    margin: 5px auto;

  }

  .hoverKutu:hover {

    background-color: #fff;

  }

</style>

<div class="hoverKutu">

  CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz.

</div>

<div class="hoverKutu">

  Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz.

</div>

Bu kodların canlı hali şu şekildedir.

CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz.

Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz.

Burada CSS Transition efekti class'ı "hoverKutu" olan elemanların arka plan renk değişimine uygulandı. Bunu yapabilmek için "hoverKutu" classınnın CSS kuralına "transition" kodunu yazdım. Trasnsition efekti uygulanırken sırasıyla

1. Hangi özelliğe uygulanacak?
2. Ne kadar sürecek?
3. Zamanlama(Burada zamanlamadan kastımız geçiş efektinin belirlenen zman içinde ne şekilde tamamlanacağıdır. transition-timing-function: olarak bilinir.)

Burada transition: background-color 1.1s ease; kodu ile geçiş efektinin arkaplan rengini değişirken uygulanacağınız, 1.1 saniye süreceğini ve zamanlama kuralının easing olduğunu belirtmiş oluyoruz.

Sonrasında kullanıcı elamanın üstüne mouse ile geldiğinde efektin uygulanabilmesi için ".hoverKutu" classına ":hover" pseudo classı ile " background-color: #fff;" tanımlaması yaparak arkaplanın beyaz olmasını ve bu geçişin yumuşak bir şekilde gerçekleşmesini sağlıyoruz.

CSS Transition efekti uygularken dikkat edilmesi gereken üç önemli nokta var.

1. "transition" kodunu hangi elemana uygulaycaksanız, o elemanın CSS kuralları içine ekleyin.
2. Değişmesini istediğiniz CSS kuralının(genişlik, yükseklik, arakaplan rengi vs.) transition kodunu eklediğiniz elemanın kuralları içinde olduğuna emin olun.
3. Değişikliğin uygulanmasını istediğiniz aksiyon tanımlarında(:hover, :focus gibi) değişecek olan CSS kurallarının son hallerini yazın. Aynı  arkaplan efekt sonunda beyaz olacak ise buradaki örnekte " background-color: #fff;" yazdığımız gibi.