donovanh/Pseudo elements - turkish translation

## Pseudo elements - turkish translation
---
layout: post
bodyClass: shorter
title: Animating pseudo-elements
description: Pseudo-elements give you two extra HTML elements for free! Here's how to animate them on hover. Use them wisely.
categories: [animation, tips, animations, pseudo-elements]
customCSS: shiny_button.css
imageURL: /assets/images/posts/sheen/sheen.gif
home_image: /assets/images/posts/sheen/home.png
tweet_text: Shiny buttons with CSS
translator: Can Göktaş
translator_link: https://twitter.com/cangokt
english_version: /pseudo-elements/
---

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

<!--more-->

<section class="shiny demo-container tap-to-activate">
<button>Göz kamaştıran efekt</button>
</section>


## Pseudo-elementler

CSS'de `::before` ya da `::after` pseudo-class'larını 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 şekillendirebiliriz.

###"::" 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: ""
... burada başka stiller verebiliriz...
}
```

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.

<section class="shiny demo-container tap-to-activate">
<button>Göz kamaştıran efekt</button>
</section>

Biraz HTML ile başlayalım:

<button>Ooo GÖZLERİM KAMAŞTI</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'den 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 butona 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, ü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 animasyonu olması 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](https://twitter.com/simevidas), tavsiye için teşekkürler.)

Şimdi animasyonumuzun `keyframes`'ini belirtelim:

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

Bu animasyonda yalnızca 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.


<section class="shiny demo-container tap-to-activate">
<button>Göz kamaştıran efekt </button>
</section>

## Tarayıcı değerlendirmeleri


[Animasyon özelliği de](http://caniuse.com/#feat=css-animation),  [pseudo-elementler de](http://caniuse.com/#feat=css-gencontent) tarayıcılar tarafından iyi bir şekilde desteklenmektedir. İşi garantiye almak için `keyframes` diğer tüm `transform` özellikleri için `-webkit` ve`-moz` ön eklerini eklemek her zaman iyi bir fikirdir.
	---
	layout: post
	bodyClass: shorter
	title: Animating pseudo-elements
	description: Pseudo-elements give you two extra HTML elements for free! Here's how to animate them on hover. Use them wisely.
	categories: [animation, tips, animations, pseudo-elements]
	customCSS: shiny_button.css
	imageURL: /assets/images/posts/sheen/sheen.gif
	home_image: /assets/images/posts/sheen/home.png
	tweet_text: Shiny buttons with CSS
	translator: Can Göktaş
	translator_link: https://twitter.com/cangokt
	english_version: /pseudo-elements/
	---

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

	<!--more-->

	<section class="shiny demo-container tap-to-activate">
	<button>Göz kamaştıran efekt</button>
	</section>


	## Pseudo-elementler

	CSS'de `::before` ya da `::after` pseudo-class'larını 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 şekillendirebiliriz.

	###"::" 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: ""
	... burada başka stiller verebiliriz...
	}
	```

	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.

	<section class="shiny demo-container tap-to-activate">
	<button>Göz kamaştıran efekt</button>
	</section>

	Biraz HTML ile başlayalım:

	<button>Ooo GÖZLERİM KAMAŞTI</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'den 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 butona 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, ü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 animasyonu olması 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](https://twitter.com/simevidas), tavsiye için teşekkürler.)

	Şimdi animasyonumuzun `keyframes`'ini belirtelim:

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

	Bu animasyonda yalnızca 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.


	<section class="shiny demo-container tap-to-activate">
	<button>Göz kamaştıran efekt </button>
	</section>

	## Tarayıcı değerlendirmeleri


	[Animasyon özelliği de](http://caniuse.com/#feat=css-animation), [pseudo-elementler de](http://caniuse.com/#feat=css-gencontent) tarayıcılar tarafından iyi bir şekilde desteklenmektedir. İşi garantiye almak için `keyframes` diğer tüm `transform` özellikleri için `-webkit` ve`-moz` ön eklerini eklemek her zaman iyi bir fikirdir.