Css de metinlere stroke ve yansıma efekti uygulama

Ocak 10th 2011 | 12 sene önce yazıldı...

10 10 1.237 kez okundu incelendi

Css 3 ile gelen yeni özelliklerden biriside metinlerimize stroke (kenarlık) renkleri atayabiliriz.

Kullanılabilecek yerlere en güzel örnek , web sayfanız içerisinde bulunan bir metni seçili hale getirince bu özelliği aktif hale getirebilirsiniz.

Destekleyen tarayıcılar

Sadece Chrome ve Safari ile sağlayabilirsiniz.
Kullanım örneğinden bahsetmem gerekirse;

#kenarlik { /* kenarlik isim li bir div stili oluşturuyoruz. */
	-webkit-text-fill-color: #fff; /*Kenarlık rengini bel irliyoruz. */
	-webkit-text-stroke-color: lightblue; /* Stilini  */
	-webkit-text-stroke-width: 2px; /* ve boyutunu yani kalınlığını belirliyoruz. */
}

Diğer bir css 3 tekniğinden de bahsetmem gerekirse, yazılarımıza yansıma efekti uygulayabiliyoruz.

Kullanım örneği şu şekilde ;

#yansit {
-webkit-box-reflect: below -5px /* Konum değerini atıyoruz. */
 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
/* Yansıma halinde görünmesi için bazı konum bilgileri gradyan etkiler vererek son haline getiriyoruz */
}

Destekleyen tarayıcılar

[*] Chrome ve safari ‘ dir.