Blackinci » CSS » Css İle Gölgeli Yazı Yapımı

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    Mart 2010    »
PtSaÇrPrCuCtPz
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Üye Giriş Paneli Tas... CSS3 Kutu Elementler... NovaBoard Tanıtım Te...

2. Versiyon Temasını Nasıl Buldunuz?
Mükemmel
Çok İyi
İyi
Eh İşte
Beğenmedim

admin paneli, ajax, css, dle, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, seri2, tasarim, tema, vbulletin, özellik

Mart 2010 (1)
Şubat 2010 (2)
Ocak 2010 (1)
Ekim 2009 (1)
Eylül 2009 (2)
Ağustos 2009 (1)

Css İle Gölgeli Yazı Yapımı

Css İle Gölgeli Yazı Yapımı

css ile gölgeli yazı yapmak aslında tek kodla yapılabiliyor fakat firefox da dahil bir çok tarayıcı desteklemiyor tam olarak emin değilim fakat tek destekleyen tarayıcı safari durum böyle olunca alternatif gölgelendirme teknikleri yapılmakta burada uyguladığım kendi yaptığım gölgelendirmeler mevcut.
İlk olarak css nin kendi gölgelendirme koduna bakalım
p {text-shadow: -2px -2px 4px silver}

üstteki kodumuzda direk bir elemente gölgelendirme verebiliyoruz fakat bu kod çoğu tarayıcılar tanımıyor o halde gelelim alternatif yollara ilk önce kendi yaptığım burada da kullandığım yöntemle başlayalım

İlk olarak html kodumuza başlayalım
<h1>Gölgeli Yazı<span>Gölgeli Yazı</span></h1>

üstteki kodumuzda h1 elementi yazının aynısını birde span elementi içerisinde yazıyoruz birisi asıl birisi ise gölge olacak css kısmına geçelim
h1 {
    color: silver;
    font-family: Verdana, serif;
    letter-spacing: 1px
}

h1 elementine silver rengi verdik birde verdana font tipi verdik son olarak yazı aralığını 1 pixel açtık
h1 span {
    display: block;
    position: relative;
    top: -39px;
    left: -0.4mm;
    color: black;
}

span elementine ise block görünümü vererek alta aldık göreceli bir konumlandırma verdik font tipine göre yukarı ve sola çektik son olarak renk verdik.
Tabi burada gölgelendirmeyi istediğimiz yere alabiliriz sağ veya sola gibi
Örnek - Ön İzleme
Tabi bu gölgenin bir kusuru var her nekadar ilk bakışta göze çarpmasada biraz kurcalarsak sorunu görebiliriz ön izleme sayfasındaki yazıyı büyütüp küçültürsek sorunu görebiliriz bu sorunu çözebiliriz ama diğer gölgeden biraz daha farklı görünecektir yapmamız gereken
h1 span {
display: block;
position: relative;
top: -1.2em;
left: -0.4mm;
color: black;
}

kalın olarak yazdığım yeri diğer kodla değiştirdiğimiz taktirde yazılar büyütüp külütülse bile bir bozulma olmayacaktır.
tabiki her ikiside kullanılabilir tercih sizin ama bunu her yazıda kullanmak doğru olmaz Sadece başlıklar için uygun olabilir fakat iki satır olmamasına dikkat edin.


Diğer bir gölgelendirme tekniği ise title kullanımı ile yapılmakta bu uygulamayada bir göz atalım fakat bu uygulama ie6 tarayıcısında çalışmıyor ie7 de ise bilemiyorum bakmadım.
html kodumuz ile başlayalım
<h1 class="golge" title="Gölgeli Yazı"><span>Gölgeli Yazı</span></h1>

Burada "h" elementine bir "class" atıyoruz ve yazıyla aynı olan birde "title" yazıyoruz aynı yazıyı "span" elementinin içine yazıyoruz geçelim css kısmına
.golge  {
    position: relative;
    display: block;
    color: black;
    letter-spacing: 1px
}

atadığımız "golge" classına göreceli konumlardıma ve block görünümü veriyoruz renk ve yazı aralığını ayarlıyoruz
.golge span {
    position: absolute;
    display: block;
    top: 0px;
}

"span" elementine mutlak konumlandırma ve block görünümü veriyoruz ve göreceli konumu ile sıfırlıyoruz
.golge:before {
    display: block;
    padding: 1px 0 0 1px;
    content: attr(title);
    color: silver;
}

üstteki kodumuzda ise ":before" seçicisini kullanarak title deki yazımızı yazdırmamızı sağlıyoruz renk verip yazdırdığımız yazıyı üstten ve soldan 1 rer pixel itiyoruz böylece bir gölgelendirme yapıyoruz
Kaynak: designmeme
Örnek - Ön İzleme

Birde İE için yazılmış kod bulunmakta örnek
h1 {
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=10,direction=310);
}

strength=10 10 yazan yerden gölgeyi ayarlayabilirsiniz
31 Aralık 2008 12:55 16SoniQuake demiş ki:
Öyle olmadı ama şöyle ekleyince oldu

*::-moz-selection {
color:#E34000;
}

30 Aralık 2008 18:20 15blackinci demiş ki:
::selection {background-color: red;
şeklinde yapabilirsiniz

29 Aralık 2008 16:15 14SoniQuake demiş ki:
blackinci,

Evet usta . Mouse ile metnin üzerini tararken olan rengi bloguma eklemek istiyorum ?

28 Aralık 2008 18:09 13blackinci demiş ki:
tararkenmi ?

27 Aralık 2008 16:39 12SoniQuake demiş ki:
Merhaba Davut abi

Sana bir sorum olacak. Mouse imleci ile metin üzerindeyken , metni seçerken arkaplanı turuncu tarzı bir renk oluyo senin sitende. Onu nereden ayarlıyoruz ?

Bilgilendirirsen sevinirim. İyi çalışmalar

18 Aralık 2008 17:04 11blackinci demiş ki:
iki ayrı gölgelendirme tekniği kullanıldığı için olabilirmi ?

18 Aralık 2008 10:10 10ahmet demiş ki:
valla orada yazanlardan heeç bişiy anlamadım

15 Kasım 2008 10:44 9dilek demiş ki:
seni seviyorum

24 Ekim 2008 11:51 8esra demiş ki:
gerçekten denedim oluo walla tongue güzelllllllll love çok güzel oldu
tşkrl black inci wink

2 Temmuz 2008 15:47 7gamze demiş ki:
wink gerçekten güsel oolmuş uyguladım süper bişi olsu wallla çok saolun.....


Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2