Ana Sayfa

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

Kayıt Ol Şifremi Unuttum?


Give Me Everything

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

«    May 2012    »
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
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
1 May 2008
CSS
Yazdır
6078 Kez Okunmuş
16 Yorum Yapılmış
 (Oy Sayısı: 13)


Benzer Konular

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.....
◄ Geri 1 2 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

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

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2