Pseudo-element'ler ile animasyon

Pseudo-element’ler bize pek çaba harcamadan fazladan DOM elementleri elde etme imkanı verir. Sayfalarımıza ilave HTML eklemeden fazladan içerik, dekor vb. eklememizi sağlarlar ve bu pseudo-elementlere animasyon ekleyebiliriz. Bu yazıda bir pseudo-element’i bir butona biraz görsellik eklemek için kullanacağız.

Pseudo-elementler

CSS’te ::before ya da ::after kullanarak bir pseudo-element oluşturabiliriz. Bu pseudo-element daha sonra eklendiği element ile herhangi bir içeriğin arasına yerleştirilir. Pseudo-element kendi başına bir elementmiş gibi davrandığı için stil verilebilir, konumlandırılabilir ve daha fazlası yapılabilir. Kod şuna benzer:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

Bu aşamada .pebble elementimize iki adet sanal (HTML’de belirtmeden elde ettiğimiz) element ekledik ve bu elementleri ihtiyacımıza göre şekillendirebiliyoruz.

“::” ve “:” arasındaki fark hakkında

Pseudo elementleri belirtirken genel olarak kabul edilen belirtme şekli (:hover, :first-child gibi pseudo-class’ları aksine) iki adet ‘iki nokta üst üste’ imi :: kullanmaktır. Eğer IE8’i desteklemeniz gerekiyorsa, tek ‘iki nokta üst üste’ imi : kullanmak en iyisidir. Diğer tüm tarayıcılar ve IE’nin yeni versiyonları iki adet ‘iki nokta üst üste’ imini (::) desteklemektedir.

“content"i unutma!

Pseudo-elementler eklerken akılda tutulması gereken şeylerden biri, pseudo-elementlerin sayfada görünebilir olması için content özelliğinin eklenmesi gerektiğidir. Pseudo-elementler içeriksiz bir halde oluşturuldukları için onlara aşağıdaki şekilde boş bir content özelliği ekleyerek sayfada görünmelerini sağlayabiliriz:

.pebble::before {
  content: ""
  ... more styling goes here...
}

Bu kod elementin sayfada görünmesini sağlayacaktır.

Örnek: Göz kamaştırıcı buton

Bu örnekte bir pseudo-element kullanarak mouse butonun üzerinde olduğunda (burdan böyle kısaca ’hover’ diyeceğiz) tetiklenen göz kamaştırıcı bir efekt yaratacağız. Ornegin sonunda boyle bir goruntu elde edecegiz (animasyonu gormek icin butona hover yapabilirsiniz)

Biraz HTML ile başlayalım:

<button>Oooh SHINY</button>

Pseudo-elementler kullandıgımız için daha fazla HTML’e ihtiyacımız olmayacak. Eğer bir sayfada birden fazla butona stil verecekseniz class kullanmak isteyebilirsiniz ama şimdilik basitlik adına genel bir element kullanacağız.

Parıltıyı (sheen) ekleme

Göz kamaştıran parıltı efektimiz butonumuzun bir ucundan diğer ucuna giden bir linear gradient. Bunu oluşturmak için after pseudo-elementini kullanacağız ve bunu butonun dışında bir başlama noktasına yerleştireceğiz.

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

Parıltı (sheen) efekti, butonun renginden beyaza ve tekrar butonun rengine dönen bir gradient’ten meydana gelmekte. Bu aşamada gradient butonun dışında duruyor.

Parıltı (sheen) efekti olan katmanı sadece hover’da iken görünecek şekilde saklamamız gerekecek. Bunu yapmak için öncelikle butonun overflow özelliğini hidden olarak belirleyeceğiz. Pseudo-elementimiz butonun içinde olduğundan butonun dışında kalan bölümü görünür olmayacaktır.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

Butona kendine has bir görüntü vermek için başka stiller de verdim. Dikkatinizi çekmek istediğim bir nokta position: relative‘in kullanımı. Bu özelliği butona eklememin sebebi position: absolute ile sabitlenmiş olan pseudo-element’in butonun içinde yer almasını istemem. Pozisyonu belirtilmediği sürece position: absolute kullanılan element, bir katman üstünde yer alan (parent) elementin içinde yer alacaktır.

Animasyonu ekleme

Bu örnekte animasyon kullanacağımız için önümüzde iki adet aşama var. Birincisi tarayıcıya buton hover’da iken animasyon kullanmasını söylemek. Daha sonra ise keyframes kullanarak bu animasyonun tam olarak ne olduğunu belirteceğiz.

Butonun hover halini hover pseudo-class’ına after pseudo-class’ını şu şekilde ekleyerek oluşturabiliriz:

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

Burada tarayıcıya butonumuz hover’da olduğunda after pseudo-elementinin bir animation degeri almasi gerektiğini söylüyoruz. Sheen (parıltı) olarak adlandırdığımız animasyonumuz 1 saniye sürüyor ve bunun sonunda tekrar etmeden sonlanıyor.

Burada pseudo-class’ları kullanma sırası önemlidir. Pseudo-class’ları ::after:hover şeklinde kullanmak işe yaramayacaktır çünkü bu kullanım tarayıcıya butonun hover haline tepki vermesi yerine ::after pseudo-elementinin hover haline tepki vermesini söyleyecektir.

Butona aynı zamanda bir focus hali ekledim. Bunun sayesinde sayfayı tab tuşu ile dolaşan kullanıcılar da butona hover etmelerine gerek kalmaksızın parıltı efektini görebilecekler. (Šime Vidas‘a tavsiye için teşekkürler.)

Şimdi animasyonumuzun keyframes ozelliklerini belirtelim:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

Bu animasyonda tek bir keyframe’e ihtiyacımız var. Başlama noktası (0%) halihazırda pseudo-elementimizin başlama noktasında belirtildiği için sadece bitiş noktasını belirtmemiz gerekiyor. Bu durumda bitiş noktası butonun (başlama noktasına göre) diğer ucunun sağ üstü. Bunu tanımladıktan sonra tarayıcı parıltı efektinin animasyonunu butonun bir ucundan diğer ucana uygulayacak.

Tarayıcı değerlendirmeleri

Animasyon özelliği de, pseudo-elementler de tarayıcılar tarafından iyi bir şekilde desteklenmektedir. İşi garantiye almak için keyframes ve diğer tüm transform özellikleri için -webkit ve -moz ön eklerini eklemek her zaman iyi bir fikirdir.

Pseudo-element'ler ile animasyon