En çok örnek verilen site:  apple.com

Basit yapılı bir yerimi: bonus.com.tr

Basit yapılı bir örnek daha: http://turkcetwitter.livego.com/

Farklı renkte bir uygulama: http://www.ligonier.org/rym/

Farklı Tasarımda bir uygulama: http://www.ideo.com

Yukarıda bir kaç örneğini verdiğim görüntülerde görüldüğü gibi bir çok şekilde uygulamaya geçirilebilir.

Sadede gelelim ve biz kendi hiyerarşik yerimimizi yapalım.

HTML kodu;

<ul id="yerimi" class="kapsul">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Birinci alt Menü</a></li>
    <li><a href="#">İkinci alt Menü</a></li>
    <li><a href="#">Üçüncü alt menü</a></li>
    <li>Bulunduğumuz sayfa</li>
</ul>

Gelelim CSS kodumuza, liste başlangıç değerlerini sıfırlayalım. Listelerin başındaki sabit yuvarlak ikonları kaldırıp, etrafındaki boşlukları kaldıralım.

ul#yerimi, ul#yerimi li{ list-style:none; margin:0; padding:0;}

Listeyi yatay yapmak için float:left tanımı yapıyoruz. İnternet Explorer 6 için bağlantıya da float:left atamamız gerekecek.

ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold }

Bağlantılara şeklini verelim ve görselliğini düzenleyelim.

ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; height:30px; font-weight:normal }
ul#yerimi li a:hover { text-decoration:underline }

Her kademe arasına ayraç koyalım. Burada şöyle bir ipucu var ki, oda bulunduğumuz sayfaya link koymuyoruz ve bu sayede araya koyacağımız ayraçları sadece linklere vererek kolayca çözüm sağlıyoruz.

ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal }

Son olarakta tüm alana bir ardalan resmi koyup birde kenar çizgisi ekleyelim.

ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x }

Bu eklemeyide yapınca Float Uygulanmış Elementleri Tam Kapsayamama (clearfix) sorunu ile karşılaşırız. Çözüm linkteki gibidir. sonuç olarak CSS kodumuz;

.kapsul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.kapsul { display: inline-block; }
/*IE-mac de bu bolumu sakla \ */
* html .kapsul { height: 1%; }
.kapsul { display: block; }
/* IE-mac bu bolumu saklam artik */

ul#yerimi { border:1px solid #cacaca; background:url(bc_bg.png) 0 0 repeat-x }
ul#yerimi, ul#yerimi li { list-style:none; margin:0; padding:0; }
ul#yerimi li { float:left; font:12px Arial, Helvetica, sans-serif; line-height:30px; padding-left:15px; font-weight:bold }
ul#yerimi li a { display:block; float:left; color:#0086C0; text-decoration:none; background:url(bc_separator.png) top right no-repeat; height:30px; padding-right:15px; font-weight:normal }
ul#yerimi li a:hover { text-decoration:underline }

Örneği görmek için tıklayınız.

Kaynaklar

• http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/ (kullanım avantajları ve örnekler)
• http://quince.infragistics.com/Patterns/Breadcrumbs.aspx (mantalitesi)
• http://www.patternry.com/p=breadcrumbs/ (mantalitesi)
• http://www.useit.com/alertbox/breadcrumbs.html (mantalite)
• http://veerle-v2.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
• http://css-tricks.com/triangle-breadcrumbs/
• http://css-tricks.com/markup-for-breadcrumbs/
• http://www.jankoatwarpspeed.com/post/2008/08/14/Create-applecom-like-breadcrumb-using-simple-CSS.aspx
• http://alpha.patterntap.com/collections/Breadcrumbs (örnekler)
• http://patterntap.com/tap/collection/breadcrumbs (örnekler)

Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodu

.kutu1{
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
}
	.kutu1 p{
		background:#3274D0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

.kutu1{
	background:#848484;
	border:1px solid #848484;
	border-left-width:0;
	border-right-width:0;
	margin:0 1px;
}
	.kutu1 p{
		background:#d3d3d3;
		border:1px solid #848484;
		border-top-width:0;
		border-bottom-width:0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

<ul>
	<li><a href=""><span>Bursaspor</span></a></li>
    <li><a href=""><span>Trabzonspor</span></a></li>
    <li><a href=""><span>Kayserispor</span></a></li>
</ul>

CSS kodumuz

ul{margin:0; padding:0; width:250px}
ul li{ list-style: none; margin-bottom:5px}
	ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}
		ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}
	ul li a:hover{background:#fff;}
		ul li a:hover span{background:#fff; color:#3274D0}

Örneği görmek için tıklayınız.

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

Hadi kalın sağlıcakla.

Kaynaklar

• http://dmitry-baranovskiy.tumblr.com/post/34061791/one-pixel-rounded-corners
• http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html
• http://www.onderhond.com/blog/work/1px-rounded-corners
• http://www.alistapart.com/articles/mountaintop/

	background-color:red

tanımı kırmızı renkli bir ardalan elde etmemizi sağlar

RGB(Red-Green-Blue) yani Kırmızı-Yeşil-Mavi renklerin baz alındığı renk standardı. Açıkçası ben projelerimde her zaman rgb standardını kullanmaktayım.

	background-color:#ff0000

Tanımı kırmızı renkte ardalanlar elde etmemizi sağlar. Bu tanımı birde kısaltması mevcuttur. Eğer bir birine benzer 2’li elemanlardan oluşan bir renk tanımı varsa yukarıdaki gibi benzer değerleri bir kere yazarakta aynı sonucu elde edebiliriz.

	background-color:#f00

Yukarıdaki tanımda bize kırmızı rengi verecektir.

Buraya kadar mevcut durumu özetlemeye çalıştım. Şimdi ise CSS3 ile gelen renk tanımı yeniliğine göz atalım. RGBA ve HSLA tanımları yukarıdaki renk tanımlarına ek olarak gelmiştir. Benzer kullanıma sahip olduğu için ben sadece RGBA tanımı hakkında bilgi vereceğim sizlere, HSLA tanımıda standart olarak farklı ama işlevsel olarak RGBA ile etkiyi vereceği için RGBA tanımı anlatmak ile yetineceğim.

Renk değerlerini genelde web sitelerini kodlarken resim işleme araçları(örn. Adobe Phoshop, Adobe Fireworks) aracılığı ile alırız. Bu araçlar bize renk paleti olarak RGB, HSL değerlerini verir.

CSS3 ile birlikte RGBA renk tanımıda eklenmiştir. Buradaki A harfi Alfa’ya karşılık gelen bir karşılıktır. Alfa değeri renk tanımımıza saydamlık etkisi katmaktadır. 0.0 ile 1 arasında değer alır. 0 değeri etkisiz kılarken 1 değeri de katı bir renk ortaya çıkaracaktır. Ara değerler bize saydamlık etkisi tanımlamamızı sağlayacaktır.

RGBA Tanımı

Normalde css ile renk tanımı yaparken

	background-color:#1259C7

tanımı kullanıyorum. Benzer şekilde

  <li>background-color:rgb(18,89,199)</li>

Tanımıda bize aynı sonucu verir. RGBA ile dördüncü değer olarak alfa saydamlık derecesini ekleriz.

	background-color:rgba(18,89,199,0.4)

Şeklinde bir tanım yapıyoruz. 0.4 değeri bize % 40’lık bir saydamlık sağlayacaktır.

Durumu daha iyi anlamak için bir örnek yapalım

	p.renk1{ background-color:rgba(18,89,199,0.2); width:70px; height:70px}
	p.renk2{ background-color:rgba(18,89,199,0.4); width:70px; height:70px}
	p.renk3{ background-color:rgba(18,89,199,0.6); width:70px; height:70px}
	p.renk4{ background-color:rgba(18,89,199,0.8); width:70px; height:70px}
	p.renk5{ background-color:rgba(18,89,199,1); width:70px; height:70px}

HTML kodu

    <p class="renk1"></p>
    <p class="renk2"></p>
    <p class="renk3"></p>
    <p class="renk4"></p>
    <p class="renk5"></p>

Örneği görmek için tıklayınız.

RGBA ve opacity arasındaki fark; opacity tanımı yapılan bir eleman ve tüm alt elemanlarına saydamlık uygulanırken, rgba ile tanımlanan ardalanlarda sadece uygulanan elemanın ardalanı saydam olur içindeki elemanlar saydam olmaz. Önceden bu gibi durumlarda 1×1 px değerinde saydam bir png hazırlayıp ardalan resmi olarak tanımlardık.

Farklı kullanım alanları ve birçok avantajı vardır bizim için bu tanımın. Örneği Facebook lightbox’ı olarak nitelendirilen bir görüntüyü elde etmek çok basit bir hal alıyor bu özelliği kullanarak.

    ...
    border:10px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    ...

Örneği görmek için tıklayınız.

CSS3 bize birçok avantaj sağlamaktadır. Bir nevi bize resim düzenleme araçlarındaki esnekliği sağlamaktadır.

Örneğin text-shadow özelliğindeki renk tanımında rgba kullanılırsa çok güzel görüntüler elde ederiz. Örnek için http://nicewebtype.com/notes/2009/07/12/rgba-text-shadow-in-safari-firefox/ sitesini ziyaret ediniz.

Benzer bir şekilde box-shadow özelliğindeki renk tanımında rgba kullanılarak daha gerçekçi gölgeler elde ederiz.

Bu özelliğinde tek sorunu diğer CSS3 özelliklerindeki sorunumuz olan İnternet Explorer desteğinin olmaması sorunu var. Henüz betası çıkmış olan ie9 hariç hiç bir İnternet Explorer sürümü bu özelliği desteklememektedir, ne yazıkki ie8 dahil hiç bir ie sürümü bu özelliği desteklemiyor.

Tarayıcı Uyumu:
Internet Explorer desteklemiyor (İE9 destekliyor)
Firefox 3+
Safari 3+
Opera 10+
W3C’s CSS Level 3+
CSS Profile 3.0

İnternet Explorer için Çözüm Önerileri

Çözüm için CSS-Tricks’te bir çözüm önerisi var

    p.renk1{
      background: rgb(200, 54, 54); /* desteklemeyenler icin */
      background: rgba(200, 54, 54, 0.5);
    }

Bu çözüm önerisinde desteklemeyen tarayıcılarda katı renk hali görüntülenirken destekleyen tarayıcılar için saydam hali görüntülenecektir.

Diğer bir yöntem;

    <!--[if IE]>
      <style type="text/css">
    .color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
    }
    </style>
    <![endif]-->

Şeklinde sadece ie için üretilen bir kod ile çözüm sağlanır destekleyen tarayıcılar için standart kod kullanılır.

Kaynaklar

• http://24ways.org/2009/working-with-rgba-colour
• http://www.w3.org/TR/css3-color/#rgba-color
• http://css-tricks.com/rgba-browser-support/
• http://www.gograybox.com/blog/qt-css3-rgba/
• http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock
• http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
• http://www.css3.info/introduction-opacity-rgba/
• http://dorward.me.uk/www/css/alpha-colour/
• http://www.robertnyman.com/css3/rgba/rgba.html
• http://nicewebtype.com/notes/2009/07/12/rgba-text-shadow-in-safari-firefox/

box-shadow yapısını inceleyelim.

Temel kullanımı.

.golgeliKutu {
  box-shadow: 3px 3px 4px #000;
}

Değerler metinlere gölge verme(text-shadow) özelliği ile aynı anlamı taşır.

3px; İlk değer yataydaki mesafe içindir. Artı değerler kutunun sağından itibaren uzaklık değeridir, negatif değerler kutunun soluna doğru mesafeyi gösterir.

3px; İkinci değer dikeydeki mesafe içindir. Artı değerler kutunun altına doğru mesafeyi gösterir, eksi değerler ise kutunun üstüne doğru mesafesini gösterir.

4px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil alır.

#000; renk değeri. Gölgenin renk değerini gösterir.

Farklı tarayıcılar için ön ek kullanılarak çözüm üretilir. -moz Firefox için, -webkit Safari ve Google Chrome için.

.golgeliKutu {
  box-shadow: 3px 3px 4px #000;
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
  }

Örnek bir kutu görmek için bir kaç tanım daha ekleyelim.

.golgeliKutu {
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
width:250px;
padding:5px;
font:12px Arial, Helvetica, sans-serif;
background:#CCC
}

HTML kodu

<div class="golgeliKutu">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper commodo fermentum. Proin eu sollicitudin neque. Sed enim tellus, condimentum sed interdum vitae, mattis et nisl. Sed nec nisl est, sagittis lobortis eros. Integer pharetra turpis eu est eleifend faucibus. Phasellus pulvinar massa sagittis nisl posuere at rhoncus velit blandit. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

Örneği görüntülemek için tıklayınız.

Bu kod sayesinde bir çok avantaj sağlarız. Fazla kod yığınından kurtuluruz, kolay içerik yenileme imkanı sağlar, hızlı yüklenir, geleceğe uyumludur. Dezavantaj olarak ie’nin desteklememesi sayıla bilir.

Birden çok gölge kullanımı

box-shadow tanımında tek bir gölge tanımı yapılabildiği gibi, birden fazla gölge tanımıda yapılabilmektedir. Her bir tanım birbirinden virgül ile ayrılır.

.golgeliKutu {
    box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
    -moz-box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
    -webkit-box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
    width:250px;
    padding:5px;
    font:12px Arial, Helvetica, sans-serif;
    background:#CCC
}

Örneği görmek için tıklayınız.

inset ile kutu içine gölge vermek

Kutulara gölge verirken kutu içinede gölge verebiliyoruz. inset eklemesi ile kutu içine gölge verme imkanımız var.

.golgeliKutu {
    box-shadow: inset 0 0 0.5em blue;;
    -moz-box-shadow: inset 0 0 0.5em blue;
    -webkit-box-shadow: inset 0 0 0.5em blue;
    width:250px;
    padding:5px;
    font:12px Arial, Helvetica, sans-serif;
}

Örneği görmek için tıklayınız.

İE İçin Çözüm

İE içinde çözümler üretilmiştir. Her ne kadar box-shadow esnekliği ve kolaylığını bize sağlamasada bir çözüm yöntemi vardır.

İnternet Explorer için çözüm üretilirken DropShadow ve Shadow filtrelerinden yararlanılır.

Dropshadow filtresi uygulamasında bulanıklık ataması yapılmadan daha keskin gölgeler görürüz. X ve Y değerleri ile açı verebiliriz. Shadow filtresi daha gerçekçi çözümler üretir ancak shadow filtresinde de x ve y tanımlarını yapmamıza izin vermez.

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

İE8 için farklı diğer ie’ler için farklı kodlar yazıyoruz. Bu kodu yukarıdaki kod ile birleştirirsek

.golgeliKutu {
    width:250px;
    font:12px Arial, Helvetica, sans-serif;
    background:#CCC;
    padding:5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Örneği görmek için tıklayınız.

Tam olarak box-shadow etkisi gibi etki etmese de bir çözüm olarak kullanılabilir.

Kaynaklar

• http://www.w3.org/TR/css3-background/#box-shadow
• http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
• http://www.ruzee.com/blog/shadedborder (javascript)
• http://dimox.net/cross-browser-css3-box-shadow/
• http://nick-dunn.co.uk/article/cross-browser-drop-shadows-using-pure-css/
• http://www.position-absolute.com/articles/how-to-get-css3-box-shadow-accepted-as-a-viable-option-at-your-workplace/ (css3 ün avantajı)
• https://developer.mozilla.org/En/CSS/-moz-box-shadow
• http://css.flepstudio.org/en/css3/box-shadow.html (örnekler)
• http://www.westciv.com/tools/boxshadows/index.html (box-shadow üretici)
• http://css-tricks.com/snippets/css/css-box-shadow/
• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html
• http://davidwalsh.name/css-box-shadow

Yazı Sonrası Linkler

• http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/

Daha önce yazı tipi hakkında bir çok makale yazmıştım. 

• Yazı Tipi özellikleri
• CSS’de Metin Özellikleri
• CSS ve Tipografi
• Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)
• @font-face kullanımı
• CSS ile metinlere gölge vermek
• vd. metin ile ilgili makaleler

Yukarıda görüldüğü gibi yazı tipi ve web sitelerinin tipografisi ile alakalı bir çok konuyu ele aldık. Peki yeterli mi? hayır bence henüz yeterli değil. Henüz tam olarak yeterli değil. Hala bazı sorunlar mevcut bu konuda.

Biz web sitelerimizde yazı tiplerini kullanırken genel kullanıcı bilgisayarındaki yazı tiplerini kullanmak zorunda idik. Eğer kullanıcının bilgisayarında olmayan bir yazı tipi kullanılmış ise tasarımda bu yazıyı çeşitli yöntemler kullanarak sitemize ekliyorduk ve hala ekliyoruz. Bu yöntemler yukarıda linkinide verdiğim Metin Yerine Resim/Flash ekleme teknikleri yazısında anlattım. Bu şekilde yapılan çözümlerin anlamlı kod yazma, esnek kodlama, erişebilirlik vd. yönlerden sakıncalarıda olsa diğer yöntemlere göre daha avantajlıdır.

Daha sonra web geliştiricileri ve standart oluşturucular bu konudaki sorunları gidermek için @font-face kullanımını çıkardılar. Bu yöntem ile web sitesinde her türlü yazı tipi kullanabiliyoruz, tabi bunun için ilk önce yazı tipimizi kullanıcının bilgisayarına yüklüyoruz ve sonra sitemizde istediğimiz yerde bu yazı tipini kullanabiliyoruz. Bu yöntemide @font-face kullanımı adlı yazımda açıkladım.

Gelelim sorunlara;

Lisans Sorunu

İlk sorun yazı tipi geliştiricilerinden geldi, her ne kadar ülkemizde pek ses getirmesede dünyada genel olarak lisans hakkı sorunu çıktı. Bu sorun üzerinde çalışmalar yapılıyor, çeşitli topluluklar konu üzerinde çalışıyor. Bazı gelişmeler olsada kesin bir çözün bulunabilmiş değil.

Yazı Tipi Uzantılarında Standartlaşamama Sorunu

@font-face yazımda belirttiğim gibi neredeyse her tarayıcının kendine özgü bir yazı tipi mevcut, ve diğerlerini desteklemiyor.

Ancak son zamanlarda bu konuda da büyük bir gelişme oldu. En büyük ayak diretici Microsoft yeni çıkaracağı sürümde(ie9) woff desteğini getireceğini duyurdu ve woff grubu ile çalışmayı kabul etti. Diğer yazı tipi uzantılarından daha küçük boyutlara sahip olan woff gelecek için ümit veriyor. Bu konuda gelecek ümit verici.

Yazı Tipi Kenarlarını Yumuşatamama Sorunu

Tasarımcıların kullandığı grafik geliştirme araçlarındaki(Phoshop, Fireworks vd.) yazı tiplerini daha estetik gösteren yazı tipi aliasing sorunu var. Aşağıdaki örnektede görüldüğü gibi @font-face ile uyguladığımız yazı tiplerinde bu sorun nedeni ile tam olarak sitelerimizde bu özelliği kullanamıyoruz.

Burada şöyle bir sorunda daha varki ClearType özelliği başlangıçta seçili olarak gelmeyen Windows Xp hala dünyada çok büyük bir yüzdeye sahip. Bu konuda Mac’ler gayet güzel sonuçlar verdiğinin söyleyebiliriz.

Bu konuda her ne kadar yenide olsa webkit’ten gelen güzel bir haber var. -webkit-font-smoothing özelliğini üzerinde çalışılıyor. Bu özellik eğer standartlaşırsa süper olacak. Sonuçları görmeden konuşmak için erken.

Yazı Tipi Yüklenme Sorunu

@font-face kullanımındaki bir diğer sorunumuzda yazı tipinin kullanıcının bilgisayarına yüklenmesinden kaynaklana sorunlar var. Eğer kullanıcının internet hızı yavaş ise içerikler yükleniyor ve sonra yazı tipi yüklendikten sonra siteye uygulanıyor. Buda site sahiplerinin istemediği bir durum. Konu hakkında farklı tarayıcılarda farklı sorunlarda var.

İşte bu noktada Google her zaman ki gibi web mecrasının geliştirmek ve hızlandırmak konusundaki çabaları kendini gösterdi ve Google Font API aracını bizlerin kullanımına sundu.

Peki bu araç ne işimize yarayacak? Bu araç sayesinde ortak bir yazı tipi havuzu oluşturulmuş olacak. Ayrıca bir çok site tarafından kullanılınca bu araç sizin kullandığınız yazı tipini daha önce bilgisayarına bir defa yüklemiş bir kullanıcı sizin sitenize geldiğinde yazı tipi uyarlaması daha hızlı çalışacaktır. Yani kullanıcının ön belleğinde tutulma yüzdesini arttırmış oluyoruz böylece. Yazı tipi bant genişliği sorunlarıda giderilmiş oluyor ayrıca.

Tabi burada da şöyle bir sorunumuz varki oda Google Font Apı’nin içerdiği yazı tiplerinde şimdilik Türkçe karakter yok. Ümit ediyoruz ki yakında eklenir ve bizlerde bu kaynaktan yararlanırız. 

Sonuç

Her ne kadar burada yazdığım sorunlar şimdilik giderilmese de ilerisi için atılan adımlar olumlu yönde. Ümit ediyorum yakında metinlerimiz daha özgür olacaktır. Arayüz geliştiricilerinin eli daha da kuvvetlenecektir.

Kalın Sağlıcakla

Kaynaklar

• http://www.ozdtasarim.com/blog/googledan-font-face-hizmeti-google-font-api.html
• http://code.google.com/apis/webfonts/docs/getting_started.html
• http://css-tricks.com/google-font-api-interview/
• http://designshack.co.uk/articles/css/how-to-use-the-new-google-font-api
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-google-fonts-api-youre-going-to-love-this/
• http://www.bloggerbuster.com/2010/05/how-to-use-googles-font-api-with.html
• http://mashable.com/2010/05/27/type-and-the-web
• http://sixrevisions.com/web_design/google-font-api-guide/

Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor.

Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz.

Basit bir örnek ile durumu gösterelim.

.anaKatman {
    position: relative;
    width: 300px;
    border: 1px solid black;
}

.acilanBolum {
    position:absolute;
    left:0;
    width: 150px;
    border: 1px solid red;
    background: gray;
    z-index: 1000;
}

HTML kısmı

<div class="anaKatman">
    <div class="acilanBolum">
        Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
    </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

Örneği görmek için tıklayınız.

Firefox’da yukarıdaki gibi sorunsuz görünüyor.

Üstte kalmasını istediğimiz katmana(acilanBolum) z-index:1000 değeri vermemize rağmen alttaki katmanın altında kalmaktadır İnternet explorer 6 ve 7 sürümlerinde. 

Çözüm için aşağıdan yukarı doğru artan z-index değerleri yazılmalıdır. Ben ardışık z-index değerleri atayarak yapıyorum bunu. Sırası ile z-index:1, z-index:2 ve z-index:3 değerlerini atıyorum aşağıdan yukarı doğru. Eğer araya bir eleman girme ihtimali varsa aralıklı verin değerleri 10, 20, 30 gibi.

HTMl kodunu aşağıdaki gibi değiştirince sorun çözüldü.

<div class="anaKatman" style="z-index:3">
<div class="acilanBolum">
	Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman" style="z-index:2">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman" style="z-index:1">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

Örneği görmek için tıklayınız.

Kaynaklar

• Beginning CSS: Cascading Style Sheets for Web Design
• http://benhollis.net/experiments/ie7_tests/zindex.html

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz. 

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

• font özellikleri
• color özellikleri
• background özellikleri
• text-decoration
• vertical-align (float değeri none ise)
• text-transform
• line-height
• margin özellikleri
• padding özellikleri
• border özellikleri
• float
• text-shadow
• clear

İlk Denememiz

HTML kodlarımız

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

CSS kodlarımız

p{
    width:350px;
    background-color:#272722;
    padding:10px;
    color:#fff;
}

p.introduction:first-letter {
    font-size: 4.2em;
    float: left;
    line-height: 1em;
    margin: 0.13em 0.13em 0.13em 0;
}

Örneği görmek için tıklayınız.

Firefox’da yukarıdaki görüntüyü elde ederken

İnternet Explorer’da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7′de sorun çıkıyor, line-height değerini 1 em’de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{width:350px; background-color:#272722; padding:10px; color:#fff;}
p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0.13em 0;
}

Örneği görmek için tıklayınız.

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Örneği görmek için tıklayınız.

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

  @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}
  

Örneği görmek için tıklayınız.

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer’da sorun yaşıyoruz. 

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek 

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

<p class="introduction"><img src="t1.jpg" width="93" height="100" />empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur</p>

Örneği görmek için tıklayınız.

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

p:first-child:first-letter{
  font-size: 4.2em;  float: left;  line-height: 1em;  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar

• http://www.sitepoint.com/blogs/2010/04/15/a-simple-css-drop-cap/
• http://safalra.com/web-design/typography/css-drop-caps/
• http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=111 özel fontlar ile 
• http://www.pauldruce.com/CSS%20DROP%20CAP (bazı sorunlar ve çözüm)
• http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps (jquery ile)
• http://www.htmldog.com/articles/dropcaps/
• http://css-tricks.com/snippets/css/drop-caps/
• http://oncemade.com/css-tip-drop-caps/
• http://azizname.blogspot.com/2006/10/magazine-style-drop-caps.html
• http://dailydropcap.com/ (günlük örnekler)
• http://jackosborne.co.uk/articles/pseudo-drop-caps/
• http://www.akxl.net/labs/articles/text-wrapped-drop-caps-in-css-using-the-first-letter-selector/
• http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum.

yukarıdaki gibi bir tasarımı koda çevirirken

<div class="dis">
    <div class="ic"><input type="text" value="Arama" /></div>
</div>

CSS kodu

div.dis{
	margin-left:65px;
}
div.ic{
    width:241px;
    height:25px;
    background:url(arama_ardalan.gif) 0 0 no-repeat
}
div.ic input{
    border:0;
    background:none;
    width:204px;
    margin:4px 0 0 5px;
    font-size:11px;
    color:#534013;
}

Örneği görmek için tıklayınız.

Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.

Firefox’da yukarıdaki gibi bir görüntü alırken

İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce "IE’da İkikat görülen Margin Problemi ve Çözümü" anlattığım gibi bir sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun. positioniseverything.net sitesinde aynı sorunu görünce anca adını koyabildim.

Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1 tanımı yapınca sorun çözüldü

div.dis{ margin-left:65px; zoom:1}

Örneği görmek için tıklayınız.

Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim) meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select elemanında bu sorun ile karşılaşılmıyor.

Kaynak

• http://www.positioniseverything.net/explorer/inherited_margin.html

Bunun için text-shadow özelliği standartlara eklendi. CSS 2 ile birlikte gelen text-shadow özelliği daha sonra CSS 2.1′da kaldırıldı. Daha sonra CSS 3 ile birlikte tekrar geldi. Safari bu özelliği ilk sürümünden itibaren desteklerken aynı şeyi diğer tarayıcılar için söylemek zor. text-shadow özelliği ile görsel düzenleme programlarında(photoshop, fireworks) kullanılan gölgeye yakın sonuçlar elde edebiliriz.

Bu makalede sizlere web sitemizde metinlere gölge vermek için hangi yöntemleri kullanabileceğimizi anlatmaya çalışacağım.

text-shadow

Bu özellik bir element içindeki metne bir veya daha fazla gölge vermek için kullanılır. Aldığı değerler belli sıralaması vardır.

text-shadow değeri 4 kısımdan oluşur. Bir örnek ile açıklayalım.

.title {
	text-shadow: 3px 2px 1px #000;
}

3px; İlk değer yataydaki mesafe içindir Artı değerler metnin sağından itibaren uzaklık değeridir, negatif değerler metnin soluna doğru mesafeyi gösterir.

2px; İkinci değer dikeydeki mesafe içindir. Artı değerler metnin altına doğru mesafeyi gösterir, eksi değerler ise metnin üstüne doğru mesafesini gösterir.

1px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil alır.

#000; renk değeri. Gölgenin renk değerini gösterir.

Birden fazla gölge kullanımı

Birden fazla gölge tanımı yapabiliyoruz. Aralarında virgül kullanarak birden fazla virgül kullanabiliyoruz. CSS2′de birden fazla gölge kullanımında üst üste binmesi durumunda normal sıralamada başta olan üstte sonradan tanımlananlar altta kalırken CSS3 ile birlikte bu durum değişti. CSS3′de tam tersi bir durum söz konusu.

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Virgül ile ayrılarak birden fazla gölge kullanılabilir.

Çoklu gölge kullanımını Safari ve Google Chrome daha sonra desteklemiştir. Safari 4 ve Google Chrome 2′den sonra tam destek gelmiştir.

Örnek Çalışmalar

Konuyu daha iyi anlamak ve sonuçlarını görmek için bir kaç örnek yapalım.

p{
    font:14px Arial, Helvetica, sans-serif;
    color: #000;
    background: #fff;
    text-shadow: 2px 2px 3px #000;
}

Örneği görmek için tıklayınız.

İkinci örneğimizide gölge açısını değiştirmek için eksi değer veririz.

p{
    font:16px Arial, Helvetica, sans-serif;
    color: #000;
    background: #fff;
    text-shadow: 2px -2px 3px #000;
}

Örneği görmek için tıklayınız.

Bir çok değişik denemeler ile farklı görünümler elde edebiliriz.

p{
    font:16px Arial, Helvetica, sans-serif;
    color: #343434;
    background: #b6d53c;
    text-shadow: 1px 1px #fff;
    padding:10px
}

Örneği görmek için tıklayınız.

Gölge yardımı ile ışıltı efekti vermek.

p{
    font:bold 16px Arial, Helvetica, sans-serif;
    color: #fff;
    background: #000;
    text-shadow: 1px 1px 6px #fff;
    padding:10px
}

Örneği görmek için tıklayınız.

Çoklu gölge yardımı ile ateş efekti verelim

    font:bold 16px Arial, Helvetica, sans-serif;
    color: #fff;
    background: #000;
    text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
    padding:30px 20px

Örneği görmek için tıklayınız.

Görüldüğü gibi resim düzenleme araçları ile elde edebileceğimiz bir çok gölge efektini text-shadow ile elde edebiliriz. Farklı değerler yardımı ile bir çok gölge çeşidini elde edebiliriz.

İnternet Explorer için Gölge Sorunu Çözümü

Yukarıdaki kodlarımızı İnternet Explorer yorumlamayacaktır. Buna tüm sürümleri(6,7,8) dahil. Yeni çıkacak 9. sürümde de bu konuda bir ilerleme olduğuna dair bir bilgi yok.

İnternet explorer için bu durumu "filter" yardımı ile çözebiliyoruz. text-shadow özelliği kadar iyi sonuçlar vermese de bazı durumlar için bize çözüm sunuyor.

Tüm ie filtrelerini görmek için tıklayınız.

Bu filtrelerden bir kaçını gölge vermek için kullanabiliriz. İnternet explorer filtrelerini uyguladığımız elemana eğer genişlik, yükseklik veya postion:absolute tanımı yapıldı ise sorun çıkarır. Bu nedenle gölge uygulanacak metini <span> etiketi içine alıp span etiketine ie gölge özellikleri tanımlanır.

Shadow filtresi

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

Bu uygulama sonucunda aşağıdaki görüntüyü elde ederiz.

Örneği görmek için tıklayınız.

Bu özelliği kullanarak sınırlı çerçevede gölge oluşturabiliriz. Kullanacağımız yere göre bu yöntemde tercih edilebilir. Daha keskin ve belli açılarda kullanılabilir.

Glow Filtresi

Glow filtresi metin etrafında çevreleyen bir katman oluşturur ve görüntü olarak gölge etkisi verir.

<!--[if IE]><style type="text/css">
p.shadowed span {
  display: block;
  width: 100%;
  filter: glow(color=#0000ff,strength=2);
}
</style><![endif]-->

Örneği görmek için tıklayınız.

Ayrıca glow ve blur filtrelerini beraber kullanarak bir çözüm üretilebilir. kilianvalkhof.com sitesinde bahsedilen bu yöntem ile gerçeğe daha yakın sonuçlar elde edilebilir.

Örneği görmek için tıklayınız. (http://kilianvalkhof.com/uploads/ieshadow.html)

Ayrıca aynı sitede bu yöntemi kullanan bir jquery eklentisi geliştirilmiştir. Kodlamayı kolaylaştıran bu yöntemde denenebilir. Ayrıntılı bilgi için tıklayınız.

Tekrarlayan Metin Kopyası ile Gölge Oluşturma

Aynı metni iki kere veya daha fazla kopyalayıp position ve konumlandırma değerleri ile gölge etkisi verilen bir yöntemdir. Farklı tarayıcılarda aynı etkiyi verir. Sorun oluşturan tek yanı ise içerikte yazının birden fazla geçmesi ve fazladan etiket eklemesidir.

Kodlaması çok basittir.

<div class="baslik">
    <h1>Lorem ipsum dolor sit amet consectetuer</h1>
    <h6>Lorem ipsum dolor sit amet consectetuer</h6>
</div>

CSS kodu

.baslik {
	position:relative;
	font-family:arial;
} 

.baslik h1 {
	position:absolute;
	top:2px;
	left:2px;
	font-size:30px;
	color:#C9D8E9;
	padding:0;
	margin:0;
} 

.baslik h6 {
	position:absolute;
	top:0;
	left:0;
	font-size:30px;
	color:#4471A2;
	padding:0;
	margin:0;
}

Sonuç aşağıda göründüğü gibi olur.

Örneği görmek için tıklayınız.

Sonuç

Yukarıda metinlere gölge vermek ile alakalı bir kaç yöntemden bahsettim. İlk yöntemimiz standartlarda olan text-shadow yöntemi idi, diğer yöntemler ise standartları desteklemeyen tarayıcılar için üretilen çözüm önerileridir.

Ben bir kaç projemde bu yöntemleri kullandım, sonuç olarak şunu diyebilirim ki projelerimde standart yöntemi kullandım, desteklemeyenler için ayrıca kod yazma gereği duymadım. Bu tercih sonucu bir çok kullanıcı(hala bir numaralı tarayıcı olan İnternet Explorer kullanıcıları) bu etkiyi görmeyecektir, ancak ie için oluşturulan hiç bir yöntem bize gerçek görsel etkiyi vermediğide kesindir.

Tercihimizi yaparken ya bu metinleri resim olarak ekleyeceğiz yada standardı uygulayacağız ve destekleyenler gösterecek, desteklemeyenler görmeyecek seçeneklerinden birini seçmek zorunda kalıyoruz. Bende standardı uyguladım ve ie kullanıcılarını maalesef dışarıda bıraktım projelerimde. Diyeceksiniz ki peki diğer yöntemleri niye anlattınız. Tercih konusundan benim kadar esnek kalamayan web geliştiricileri için bir çözüm olduğunu göstermek için.

Sağlıcakla kalın.

Kaynaklar

• http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/ (ayrıntılı güzel)
• http://tutorials.assistprogramming.com/text-shadow-using-css.html
• http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
• http://westciv.com/tools/shadows/
• http://www.quirksmode.org/css/textshadow.html
• http://www.css3.info/preview/text-shadow/
• http://fredericiana.com/2009/06/10/stylish-text-with-the-css-text-shadow-property/
• http://maettig.com/code/css/text-shadow.html Örnek
• http://www.howtocreate.co.uk/textshadow.html
• http://dev.opera.com/articles/view/css-text-shadows-and-background-sizing/
• http://hacks.mozilla.org/2009/06/text-shadow/
• http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/ (jquery ile gölge verme)
• http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow (css 3 ile gölge vermek üzerine örnek)
• http://owltastic.com/2009/12/shadows-and-css3/
• http://reference.sitepoint.com/css/text-shadow
• http://cordobo.com/1119-provide-visual-feedback-css/
• http://www.catswhocode.com/blog/10-resources-to-get-the-most-out-of-the-css-text-shadow-property
• http://www.admixweb.com/2009/12/04/using-text-shadow-in-htmlcss/
• http://www.cagintranet.com/archive/css-tip-easy-cross-browser-valid-css-text-shadows/ (eski yöntem)
• http://www.t-infection.com/css3-ve-yenilikler-metinlere-golge-efekti-vermek/
• http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects Güzel örnekler
• http://designshack.co.uk/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

Daha önce CSS Kodlama Teknikleri ve CSS Kodlarını Azaltma Yöntemleri bahsetmiştim genel olarak buna bir ek daha yapacağım. Aslında o makaledeki 1. maddeyi biraz daha genişleteceğim. Mesela bir eleman altındaki tüm elemanlara uygulanan bir özellik tek tek uygulanacağına genel uygulanır alttaki elemanlara ise kendine has özellikler tanımlanarak daha optimum kodlar elde edilir. Yer kazanılır, tekrarlardan kurtulmuş oluruz ve daha kolay müdahale imkanımız olur.

Genelde bu tip ortak kullanım ile menülerde karşılaşıyorum. Resimli menülerde

<ul id="menu">
    <li id="menu1"><a href="">menü 1</a></li>
    <li id="menu2"><a href="">menü 2</a></li>
    <li id="menu3"><a href="">menü 3</a></li>
    <li id="menu4"><a href="">menü 4</a<</li>
    <li id="menu5"><a href="">menü 5</a></li>
    <li id="menu6"><a href="">menü 6</a></li>
</ul>

Bu tip bir menümüz olsun ve menünün her elemanı için farklı tanımlarımız olsun.

li#menu1 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 0 no-repeat; text-indent:-9999px; }
li#menu2 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -25px no-repeat; text-indent:-9999px; }
li#menu3 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -50px no-repeat; text-indent:-9999px; }
li#menu4 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -75px no-repeat; text-indent:-9999px; }
li#menu5 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -100px no-repeat; text-indent:-9999px; }
li#menu6 a{display:block; width:50px; height:24px; background:(images/menu.png) 0 -125px no-repeat; text-indent:-9999px; }

Görüldüğü gibi bir resimli menü oluşturduk. Kod sorunsuz çalışır, ancak bu kodu daha kısa yazabiliriz. Birbirini aynı tanımları genel bir elemana atayıp, geriye sade o elemana ait özelliği bırakırsak kodumuz daha az olacaktır. yukarıdaki örnekte bunu yapalım

ul#menu li a{display:block; width:50px; height:24px; background:(images/menu.png) 0 0 no-repeat; text-indent:-9999px;}

Bu tanım ile tüm a elemanlarını etkileyecek bir kod yazdık. Daha sonrada her elemana özel kodlarını tek tek tanımlayalım.

    li#menu1 a{ background-postion:0 0;}
    li#menu2 a{background-postion:0 -25px; }
    li#menu3 a{background-postion:0 -50px;}
    li#menu4 a{background-postion:0 -75px;}
    li#menu5 a{background-postion:0 -100px;}
    li#menu6 a{background-postion:0 -125px;}

Görüldüğü gibi kodumuz daha az oldu. Böylece kodu düzenlemek de kolaylaştı. Yukarıdaki örnekte sadece background-position değerleri değişti. Başka bir örnekte genişlik değeride değişebilir bu durumda da her tanımda genişlik tanımı ekleyerek kodumuzu yazabiliriz. Benzer bir yapıyı Basit Resimli Menü Yapmak adlı makalemde anlatmıştım. Örnekleri oradan inceleyebilirsiniz.

Bilgilendirme Kutuları

Aynı mantığı site kodlarken farklı alanlarda da kullanabiliriz. Örneğin sitemizde bilgi kutuları hazırladığımızı düşünelim.

Kullanıcıyı bilgilendirme amaçlı alanlarımız için "Bilgilendirme Kutuları – #bilgilendirme", Hata durumunda kullanıcıyı bilgilendirmek için "Hata Kutuları – #hata", Kullanıcıyı uyarmak içinde "Uyarı Kutuları – #uyari" kutuları hazırlayalım.

<div class="bilgilendirme">Bilgilendirme metni</div>
<div class="onay">Onay metni</div>
<div class="hata">Hata mesajı</div>
<div class="uyari">Uyarı mesajı</div>

Bu kutuların css kodlarını yazalım.

div.bilgilendirme{display:block; padding:15px 10px 15px 50px; background:#BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat; color:#00529B; border:1px solid #00529B; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.onay{display:block; padding:15px 10px 15px 50px; background:#DFF2BF url(images/bilgilendirme.png) 8px -92px no-repeat; color:#4F8A10; border:1px solid #4F8A10; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.hata{display:block; padding:15px 10px 15px 50px; background:#FFBABA url(images/bilgilendirme.png) 8px -292px no-repeat; color:#D8000C; border:1px solid #D8000C; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
div.uyari{display:block; padding:15px 10px 15px 50px; background:#FEEFB3 url(images/bilgilendirme.png) 8px -195px no-repeat; color:#9F6000; border:1px solid #9F6000; font:12px Arial, Tahoma, sans-serif; margin:10px 0}

Örneği görmek için tıklayınız.

sonuç olarak her şey tamam, ancak kodumuzu daha da azaltabilirmiyiz? Evet.

Bunun için her kutuya genel bir sınıf tanımlamamız gerekecek. Bu bildirim kutularını içerik alanımız içinde olduğunu düşünerek

#icerikAlani div

şeklindeki bir tanım bizim işimize yaramaz. Daha özel bir tanımlama yapmamız için her bildirim kutusuna bir adet sınıf daha eklememiz gerekecek.

<div class="bildirim bilgilendirme">Bilgilendirme metni</div>
<div class="bildirim onay">Bilgilendirme metni</div>
<div class="bildirim hata">Hata mesajı</div>
<div class="bildirim uyari">Uyarı mesajı</div>

Evet böylece bildirim kutuları katmalarını(div) diğer katmanlardan ayırmış olduk. Buna göre css kodumuzu azaltalım.

#icerikAlani div.bildirim{display:block; padding:15px 10px 15px 50px; background:#BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat; color:#00529B; border:1px solid #00529B; font:12px Arial, Tahoma, sans-serif; margin:10px 0}

Daha sonra her kutu için ayrı kendine özel kodlarını yazalım.

#icerikAlani div.bilgilendirme{background:#BDE5F8 url(images/bilgilendirme.png) 8px 8px no-repeat; color:#00529B; border:1px solid #00529B;}
#icerikAlani div.onay{background:#DFF2BF url(images/bilgilendirme.png) 8px -92px no-repeat; color:#4F8A10; border:1px solid #4F8A10;}
#icerikAlani div.hata{background:#FFBABA url(images/bilgilendirme.png) 8px -292px no-repeat; color:#D8000C; border:1px solid #D8000C;}
#icerikAlani div.uyari{background:#FEEFB3 url(images/bilgilendirme.png) 8px -195px no-repeat; color:#9F6000; border:1px solid #9F6000;}

Örneği görmek için tıklayınız.

Burada şöyle bir kullanım şeklinide tercih edebiliriz. Katman(div) yerine <blockquote> etiketini kullanarak daha uygun bir kodlama yapabiliriz. Maksat en uygun kodu bulmak.

<blockquote class="bilgilendirme">Bilgilendirme metni</blockquote>
<blockquote class="onay">Onay mesajı</blockquote>
<blockquote class="hata">Hata mesajı</blockquote>
<blockquote class="uyari">Uyarı mesajı</blockquote>

CSS kodumuzda

#icerikAlani blockquote{display:block; padding:10px 10px 10px 25px; background:lightblue (images/bilgilendirme.gif) 0 0 no-repeat; font:12px Arial, Tahoma, sans-serif; margin:10px 0}
blockquote.bilgilendirme{background-color:lightblue; background-postion: 0 0; color:blue; border:1px solid blue;}
blockquote.onay{background-color:lightblue; background-postion: 0 0; color:blue; border:1px solid blue;}
blockquote.hata{background-color:lightred; background-postion: 0 0; color:red; border:1px solid red;}
blockquote.uyari{background-color:lightyellow; background-postion: 0 0; color:black; border:1px solid yellow;}

Örneği görmek için tıklayınız.

Sonuç olarak en optimum kodu ettik.

Bu makaleyi yazmaktaki amacım bu ve benzeri yöntemleri projelerimizde en uygun kodlama yöntemlerini uygulamamız gerektiğini göstermek içindir. Yoksa yukarıdaki örnekleri bir çok makalemde anlatmıştım zaten. Projemizin tüm bölümlerinde aynı mantıkla hareket etmemiz gerektiğini düşünüyorum. Hoşçakalın.

Kaynak

• http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx (bilgilendirme alanları için)