PDA

Orijinalini görmek için tıklayınız : CSS3 İle Yazı Gölgelendirme...



mhusty
02-01-2012, 22:45
CSS3′ ün hayatımıza girmesiyle CSS te yaşadığımız tarayıcı ve destek sorunlarını rafa kaldırmış bulunuyoruz. Tasarımlarımızı daha kolay kılacak yeni teknikler mevcut. Bunlardan biri de yazıları gölgelendirme.

CSS’de yazı nasıl gölgelendirilir? Karşınızda text-shadow tekniği..

CSS i gören bir index dosyamızı ele alalım.. (ya da herhangi bir dosya)


<div id=”baslik“>CSS3 – Yazı gölgelendirme</div>

İndex’imizde gölgelendirme yapacağımız yazının ID sini CSS te buluyoruz.. ve son sınıf karakterinden ‘}’ önce yerleştiriyoruz.


.baslik {
font-size:29px;
margin:0 0 5px 0;
font-family:Georgia, “Times New Roman”, Times, serif;
color:#000;
font-weight:normal;
text-shadow:#0066CC 2px 2px 1px; color: #000000;
}

bu tekniği Türkçe olarak açalım biraz.. daha anlaşılır olsun..


text-shadow: #0066CC 2px 2px 1px;


text-shadow: (gölgenin rengi) (X koordinatına göre gölge uzaklığı) (Y koordinatına göre gölge uzaklığı) (gölgenin netlik değeri)

111

Mehmet ULUÇ
03-01-2012, 01:26
Merakımı mazur gör ama gerçekten ön kısma renk kodu eklenmesi meselesini bilmiyorum. w3c'de de önüne herhangi bir renk kodu konulmuyor anlatımlarda. Gerçekten beni aydınlatırsan sevinirim.

HakankulaksiZ
03-01-2012, 09:56
Kodun çalışmasında bir engel olmuyor ama bende şuana kadar hep sonda kullandım renk kodunu bir acayip geldi. :)

mhusty
03-01-2012, 21:25
mehmet abi renk kodu derken

text-shadow: #000 2px 2px 1px; burdaki renk kodundan bahsediyor isen bu gölgenin renk kodudur...

Mehmet ULUÇ
03-01-2012, 21:45
Evet o koddan bashediyorum da onun piksel değerlerinden sonra olması gerekmiyor muydu?

mhusty
03-01-2012, 21:59
bir fikrim yok o konuda çünkü ben ilk başta kullanıyorum ve bir sorun yaşamıyorum ama sonundada olabilir bir şey farketmez diye düşünüyorum

Mehmet ULUÇ
03-01-2012, 22:04
Ben şimdi anladım mevzuyu, aslında senin verdiğin şu kod satırı benim kafamı karıştırdı:


text-shadow:#0066CC 2px 2px 1px; color: #000000;

Normalde color'ın onla ilgisi yokken ben sanki renk kodu iki kez kullanılmış gibi algıladım. Tamam farketmez bu haliyle :)

Onay verdim, gözün aydın ;)

mhusty
03-01-2012, 22:30
Ben şimdi anladım mevzuyu, aslında senin verdiğin şu kod satırı benim kafamı karıştırdı:


text-shadow:#0066CC 2px 2px 1px; color: #000000;

Normalde color'ın onla ilgisi yokken ben sanki renk kodu iki kez kullanılmış gibi algıladım. Tamam farketmez bu haliyle :)

Onay verdim, gözün aydın ;)

:D haklısın aslında gereksiz olarak kullanmışım o kodu orda düzelttim =)

Macit
06-05-2012, 22:16
çok güzel paylaşım, css3 ve HTML5 le birlikte ortaya çıkan bir diğer özellik ise -webkit- ufak bir araştırma yaparak ne işe yaradığını öğrenebilirsiniz, Yukarıdaki paylaşımın tarayıcı desteğini unutmamak gerekiyor, hangi tarayıcılarda css de kullandığımız özellikler nasıl çalışır hangi şartlarda çalışır gibi, örneğin yukarıda ki özellik, ie 8 ve bu sürümün altında olan tarayıcılarda çalışmaz. İşte burada -webkit- devreye giriyor.

Bu gece başlayacağım derslerde bunu sizlerle paylaşacağım inaşllah.

Mehmet ULUÇ
07-05-2012, 04:15
Macit, bildiğim kadarıyla -webkit- Chrome ve Safari için css tanımlamaları oluşturuyor. İnternet Explorer 8 ve aşağısında text hadow için bayağı araştırma yapmıştım ama bulamamıştım. Gerçekten merakla bekliyorum dersi. Kolay gelsin.

Macit
07-05-2012, 05:03
ie 9, opera 9,6, fiefox 3,5, safari 4 ve chrome 4 versiyonları ve üzerinde çalışıyor, ilerleyen derslerde bunu paylaşacağım. ie için ek bir kaç tanım kullanmamız gerekiyor.

bunuda filtre kullanarak yapıyoruz.

örnek verecek olursam eğer,


filter: Shadow(color='#000', Direction=135, Strength=4);



<style type="text/css">
.filtre {
display: block;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#9 99', Direction=135, Strength=4);
}
</style>



<div class="filtre">Deneme Yazı</div>

tabi bunun bir kaç çeşidi daha var, onları da ileride derslerde paylaşacağım, Bu iş aslında tamamen hayal gücüne bakıyor, siz ne isterseniz biraz uğraş sonucunda onu elde edebilirsiniz. En büyük etken ise deneme yanılmadır.

Burada bir kaynak paylaşayım acil ihtiyacı olan arkadaşlarım buradan faydalanabilirler. Kaynak Linki (http://www.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/)