Web Standartları için arşiv

CSS ile Hiyerarşik Yerimi(Breadcrumbs) Yapmak

Mart 17th, 2011 • 10 yorum CSS, Web Standartları, XHTML
Etiketler: , , ,

Kodladığım bir çok sitede eğer site alt sayfalar ve onlarında alt sayflarında oluşan karmaşık bir yapıya sahip ise genelde kullanıcıya nerede olduğu göstermek için hiyerarşik linkler kullanırız. Bunu hiyerarşik yerimi olarak isimlendirmek bana daha mantıklı geldi. Amaç web sitemizin kullanılabilirliğini arttırmaktır.  Kullanıcıya bulunduğu sayfa hiyerarşik yapısıda gösterilerek daha kullanışlı bir erişim ve kullanım sağlanır. Ayrıca arama motorlarını taramaları içinde sitemize artı değer katar. Kullanıcıya her seviyeye kolayca geçiş imkanı sağlar.


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

Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak

Ekim 20th, 2010 • 7 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , ,

Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.

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

CSS3 RGBA Renk Tanımı

Eylül 22nd, 2010 • 5 yorum CSS, Web Standartları
Etiketler: , , , , ,

CSS ile renk değeri ataması yapılırken çeşitli yöntemler kullanıyoruz. Daha önce CSS Birimleri  makalemizde anlatmıştık. İki tip renk tanımı var. Renk isimleri ile tanımlama(İngilizce renk isimleri)

	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

Kutulara Gölge Vermek (box-shadow)

Haziran 21st, 2010 • 17 yorum CSS, Web Standartları, XHTML
Etiketler: , , ,

Şuanki şartlar düşünüldüğünde normal olarak bir kutunun gölgesini vermek için daha öncede açıkladığımız gibi bir kaç yöntem var. Bu yöntemleri incelemek için http://www.fatihhayrioglu.com/css-ile-golge-vermek/ bağlantısındaki yazıya göz atalım. Buradaki yöntemleri incelediğimizde çok fazla gereksiz ve fazladan katman(div) kullanmak zorunda kaldığımızı göreceksiniz. CSS3 ile gelen box-shadow özelliği sayesinde çok basit bir tanımlama ile bu fazlalıklar ve zorluklardan kurtulabiliyoruz. Okumaya devam edin »

Web’de Yazı Tipi Sorunları ve Google Font API

Haziran 9th, 2010 • 10 yorum CSS, Web Standartları
Etiketler: , , , , ,

Web sitelerini oluşturan öğelerden en önemlisi muhakkak yazılardır. Resimler ve videolarda önemli olsa da çoğunlukla yazılar ön plandadır web sitelerinde. CSS kod yazanlar için diğer öğelere göre daha erişebilir ve esnektir yazılar. Yapılan yenilikler bu konuda daha avantajlı duruma geliyoruz.

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

Okumaya devam edin »

ie6/7′da postion:relative Uygulanmış Elemanlarda z-index Sorunu

Nisan 30th, 2010 • 8 yorum CSS, Web Standartları, XHTML
Etiketler: , , , ,

Bu sorunla neredeyse 4-5 kere karşılaşmışımdır. En son yaptığım projede karşılaşınca yazmaya karar verdim.

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. Okumaya devam edin »

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.