Olmazsa Olmaz Serisi No:2 – CSS Reset

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama makalem ile OOS’ye başlamıştım. İlk olmazsa olmazımız otomatik tamamalama özelliğine sahip bir arama kutucuğu geliyordu. Serimizin ikinci gerekli malzemesi ise bir çok yerde belki de duyup ne olduğunu çözemediğiniz “Reset CSS”!

Reset CSS Nedir?
Bir CSS tekniği diyebileceğimiz CSS Reset ile IE, Mozilla, Safari vb. tarayıcılarda öntanımlı olarak gelen bazı padding, margin, h1, h2, h3 tarzı verileri sıfırlayarak yazacağımız css kodunun her tarayıcıda aynı şekilde görünmesini sağlar. Bu kod bütününü CSS dosyanızın başına koyarak sitenize eklerse

Başlıyoruz…İlk adım Margin ve Padding’leri sıfırlamak

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

Şeker gibi menüler

Web Sitesi Tasarımlarımızın yapıtaşları olan menülerin her gün göze daha güzel gelen versyonları yayınlanıyor. Bugün Fatih Hayrioğlu‘nun güncesi sayesinde yeni bir menü tasarımından haberim oldu. Kaliteli grafikleri ile şeker gibi bir görüntüsü olan bu menüyü CSS Drive’ın örnekler sayfasında bulabilirsiniz.

Ayrıntılı Bilgi ve Demo Sayfası

Bukalemun CSS Düğmeleri

Geçtiğimiz günlerde StumbleUpon’da yeni siteler keşfederken karşılaştığım bir makaleyi paylaşmak istedim. Bu makalede sitemizde kullanacağımız farklı renklerdeki butonları 3 dosyada nasıl toplayacağımız anlatılıyordu.

İşin Mantığı:
Yapmamız gereken şey öncelikle beyazdan griye doğru rengi kayan (gradient) bir buton oluşturmak olacak. Bunu izleyen aşama ise butona saydamlık vermek. Saydamlık vererek arkaplana koyduğumuz rengin butonun rengi gibi görünmesini sağlayacağız.

Butonumuz
Butonumuzu tasarladıktan sonra 3 parçaya böleceğiz. ilk iki parça butonun sağ ve sol başları olacak. üçüncü parça ise butonumuz ne kadar uzarsa uzasın işe yaramasını sağlayacak olan 1 piksellik orta parçayı oluşturmak olacak.

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama

İngilizcesi Autocompletion olan “Otomatik Tamamlama” sistemi, iki ya da 3 harfi input‘a grdikten sonra en yakın sonuçları bize anında gösteren ve en uygununu seçmemizi sağlayan bir sistemdir. Javascript sayesinde yeni bir sayfa yüklemeden yapabileceğimiz bu fonksiyon facebook‘un arkadaş profilini arama kutusunda kullanılır.

Otomatik Tamamlama sistemi, site içi arama fonksiyonunun sıkça kullanıldığı sitelerde bulunmalıdır. Örneğin bir alışveriş siteniz var ya da kelephir.net gibi günlük ürünleri indeksleyen bir siteye sahipseniz daha önceki ürünlerin bulunabilmesi için otomatik tamamlama sistemini kullanabilirsiniz.

CSS Sprite ile bandwidth tasarrufu

Daha önce ben de CSS Sprite’ların kullanılışı hakkında “Sprite’lar nedir? Nasıl kullanılır?“adında bir makale yazmıştım. Bugün çeşitli RSS yayınlarını okurken CSSgirl sitesinde yazılmış olan CSS Sprite makalesi gözüme çarptı ve ne kadar ayrıntılı işlediklerini görünce sizle paylaşmak istedim. Sprite tekniği ile rollover bir menünün nasıl yapıldığını en ince detayına kadar anlatmışlar.

Buradan okuyabilirsiniz.

CSS ile transparanlık yaratalım

CSS ile web sitelerimize albeni katmaya devam ediyoruz. Bu seferki tekniğimiz ise basit ama kullanışlı olduğu kadar tarayıcılar ile arasında birçok problem olan transparency.

Nerede Kullanalım?
Transparanlık özelliğini kullanabileceğiniz başlıca yer arkaplanında büyük resimler bulunan sitelerdir. Arkaplanda bulunan resimlerin tam olmasada flu bir şekilde görünmesini istiyorsanız transparanlık değeriyle oynayarak bu işlemi gerçekleştirebilirsiniz. Üstelik her div için ayrı ayrı tanımlayabilir, hepsinin transparanlığına ayrı değer verebilirsiniz.

Nasıl Kullanırım?
Transparanlık özelliği birçok tarayıcıda var fakat o kadar uyumsuz ki her tarayıcı için ayru bir özellik tanımlamanız gerekmekte. Çok bir kod fazlalığı yaratmıyor korkmayın. En fazla 3 satır kaybınız olacak.

#transparan {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

İşte bu kadar basit. Buradaki filter:alpha IE ile uyumu, -moz-opacity eski nesil mozilla tarayıcıları ile uyumu, -khtml safarinin eski versyonları ile uyumu sağlayan kodlar. opacity ise tüm tarayıcıların ortak olarak benimsediği transparency kodudur. 0.5 transparanlığın koyuluğunu belirtir. 0.0 ile 1.0 arasında olmalıdır. filter:alpha(opacity=50) kodunda ise yüzde cinsinden belirtilmiştir. 0 ile 100 arasında olmalıdır.

Artık siz de sitelerinize transparanlık kazandırabilirsiniz.

Not: Bu yazıda CSS-Tricks kaynak olarak kullanılmıştır.

CSS Menüleri tek tıkla hazırlayın!

Uzunca bir süredir blog’um üstünden paylaşım yapmamıştım. Bunda biraz tatil modunun da etkisi olsa gerek. Bu günkü yazımızda Yatay ve dikey CSS menüleri hazırlamamızı sağlayan bir Web Uygulamasını tanıtacağız. CSS Menu Builder ile menü arkaplanının tipini ve menü tuşlarının şeklini belirledikten sonra renkler üstünde dilediğiniz oynamaları yaparak sitenize en uygun menüyü tasarlamanız mümkün. Şu an menü arkaplanı için kısıtlı seçim olsa da işinizi rahatlıkla görecektir.

Sprite’lar nedir? Nasıl kullanılır?

CSS Sprite’ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite’ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim…

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request’lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request’i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request’i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite’lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.

CSS ile düğme yapımı

Table ayraçlarını kullanırken, arkaplan resmi atamasıyla kolaylıkla yapabildiğimiz birden fazla resim dosyalı butonları ilk zamanlarda div ile yapmak zor olmuştu. Fakat çok basit bir mantığı olan div yöntemini woork‘de ele almışlar. Yukarıdaki butonlarda kullanacağımız 1 düğme arkaplanı ve 7-8 tane de özel ikon gerekmekte.

<a class=”button” href=”#”>
<span class=”delete”>Bu yazıyı sil</span>
</a>

Burada gördüğünüz <a> bizim kapsayan elemanımızı span ise ikonu oraya ekleyecek elemanı ifade edecek.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Yukarıdaki CSS kodunda gördüğünüz gibi arkaplana geniş ve yuvarlak köşeli button.gif resmini ekledik.


.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Son kodumuz ile de delete class’ına sahip olan span elementine minik ikon ekledik. Orjinal yazıya ulaşmak ve kullanılan resimleri indirmek için ilgili yazıya bakabilirsiniz.

This article is written by Antonio Lupetti.

CSS Grid Sistemleri

Table ayraçlarını kullandığınız sitenizi div ile yeniden tasarlamak istiyorsunuz fakat div’in bir çok özelliği ile uğraşamayacağınızı düşünüyorsanız ilaç gibi bir çözümümüz var artık. YAML Builder sayesinde birkaç fare hareketiyle sitenizin genel görünümünü oluşturabilecek ve CSS kodunuzu da biçimlendirebileceksiniz. YAML haricinde biraz daha komplike bir sisteme sahip olan mindplay ya da 960grid de kullanılabilir.