1.135 kez okundu

Css de metinlere stroke ve yansıma efekti uygulama

10 10 1.135 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.

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
Css de Boyutlandırılabilir Metin Kutusu

Boyutlandırılabilir metin alanı yapmak css 3 ile çok basit ve kullanışlı. Destekleyen tarayıcılardan bahsetmek istiyorum Chrome Safari Opera , IE...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter