Başlangıç

Konu: CSS Filtreleri
Uyumluluk: Webkit Nightlies
Karizma Puanı: 100

w3‘ün geçtiğimiz ay yayınladığı filtre efektleri beni oldukça heyecanlandırdı! Bu yeni teknolojiyi Google Chrome’ın tasarımcı ve geliştiriciler için özel olarak sunduğu Kanarya tarayıcısında deneyebilirsiniz. Kısa zamanda diğer browserlara da yayılacağını da umuyorum.

Güzel bir örnek…

Ayrıntılara girmeden önce hemen bir örnek gösterelim.

img {
-webkit-filter: brightness(0.1) drop-shadow(7px 7px 20px black) grayscale(1) opacity(1) sepia(1);
}

İşte inanılmaz, Photoshop’tur bu dedirten sonuç:

Hemen siz de deneyin.

Özellikler

Aşağıdaki markup üzerinden Webkit browser olan Canary ile birkaç test yaparak özelliklerin test edelim.

<img src="http://upload.wikimedia.org/wikipedia/en/9/9e/Deviantart_logo.png" alt="DeviantART Logo">

Not: Birçok tarayıcı desteklemediğinden snuçları ekran görüntüsü olarak ekleyeceğim, isterseniz deneyebilirsiniz.

hue-rotate

Hue/Saturation ayarı ile oynuyoruz. Photoshop’tan tanıdığımız, resimleri siyah/beyaz’a çevirmekten tutun genel olarak renkleriyle ilgili size bir çok güzel imkan sunan tool. Şimdi bunu css ile deviantart görseline uygulayalım.

img {
   -webkit-filter: hue-rotate(50deg);
}

İşte sonuç:

Biraz animasyon katalım:

    img {
       -webkit-animation: adjustHue 1s alternate infinite;
    }  

    @-webkit-keyframes adjustHue {
       0% { -webkit-filter: hue-rotate(30deg); }
       50% { -webkit-filter: hue-rotate(60deg); }
       100% { -webkit-filter: hue-rotate(90deg); }
    }

[demo]

grayscale

256 çeşit gri ile siyah/beyaz yapalım görselimizi.

    img {
       -webkit-filter: grayscale(100%);
    }

İşte Sonu:

sepia

Instagram tarzı bir efekt olan sepia’ya bakalım.

img {
      -webkit-filter: sepia(100%);
}

İşte sonuç:

blur

Bulanık mod

img {
      -webkit-filter: blur(2px);
}

Sonuç:

brightness

ışığınız bol olsun

img {
      -webkit-filter: brightness(45%);
	  }

Sonuç:

contrast

img {
      -webkit-filter: contrast(200%);
	  }

Sonuç:

invert

img {
      -webkit-filter: invert(100%);
}

Sonuç:

saturate

img {
      -webkit-filter: saturate(0%);
}

Sonuç:

Birlikte Kullanım

Bu efektlerin kombinasyonunu birlikte kullanarak daha farklı şeyler yapabilirsiniz.

img {
      -webkit-filter: brightness(60%) sepia(100%);
}

Sonuç

Kombinasyonlar ve yeni değişkenler sizi bekliyor. İyi çalışmalar

İçerik Tasarımı: Tipografi

Typography (Türkçe olarak tipografya veya tipografi) web arayüz tasarımcıları ve geliştiricileri için halen rahatsız edici bir gizem halinde. 6 ipucu ile bilgi düzeyinizi arttıracak, yanlış bilgilerinizi umarım düzeltecek, kısaca sizi geliştirecek bilgiler paylaşmayı amaçlıyorum.

Giriş

Tipografi, harfler, kelimeler, paragraflar ve nasıl birbirleriyle tasarımsal olarak etkileşimi sanatıdır. Web üzerindeki içeriğin 95%’i yazılı olarak sunulduğundan, “web tasarımının 95%’i tipografidir” diyebiliriz. Dolayısıyla arayüz tasarımcılarının font ve typeface seçiminden öte tipografi konusunu ayrıntılı incelemeleri gerekmekte.

Not: Yazının bu noktasından gerekmedikçe kavramları Türkçeleştirmeyeceğim, sadece Türkçe anlamını açıklayarak devam edeceğim. Böylece bu kavramları derinlemesine incelemek istediğinizde diğer İngilizce makaleleri daha hızlı anlayabileceksiniz ve ben de kavram uydurmuş olmayacağım.

1.Tipografinin Temelleri

Aşağıda tipografi ile ilgili her tasarımcının veya geliştiricinin anlaması gereken bazı temel tipografik tanımlar yer alıyor.

• Ascender: fontlarda küçük harflerin x height’ın üzerinde kalan çıkıntılarına denir. sırasıyla şu harflerde vardır: b, d, f, h, k, l, t.
• Baseline: Font’larda ve muhtemelen kaligrafide de yazı yazılıken harf govdelerinin üstüne oturduğu sanal cizgi. mesela “z”‘nin alt çizgisi baseline üstündedir. referans çizgisi olarak Türkçeleşmiş.
• Cap Height: x height’ın üst kısmı
• Descender: Küçük harflerin x height’ın altında kalan çıkıntılarına denir. sırasıyla şu harflerde vardır:
  g, j, p, q, y.
• Kerning: Harflerin arasında boşluk. hemen sevgi gösterisi: helvetica <3
• Leading: Büyük harf küçük harf farkı (Genellikle font yüksekliğinin yarısı olarak ayarlanır. 12px font-size için 6px)
• Letter Spacing: iki harf yanyana geldiği taktirde aralarında kalması gereken font tasarımcısı tarafından belirlenmiş boşluk, “Tracking.” olarak da bilinir.
• Ligatures: tipografide, iki veya daha fazla harfin, birbirine baglanarak tek bir harf olarak kullanilmasidir. ornek olarak; “fi”, “fj”, “ff” harfleri bazi yazi karakterlerinde birlesik olarak kullanilir.. bunun sebebi de karakterler arasindaki beyaz alani dengeleyerek daha estetik gorunmesini saglamak ve yazinin okunakliligini arttirmaktir. ligaratür olarak geçiyor.
• Line Height: Büyük harfleri de kapsayan çizgi yüksekliği. Yüksekliği belirlemek için kullanılan en etkili yoldur. Örneğin 12px font için, 6px leading (yarısı demiştik) eklersek 18px line-height tanımlayabiliriz.
• Measure: Genişliği karakter olarak tanımlamak – Genellikle 60 olarak tanımlanmakta tabi fonta ve projeye göre değişir.
• Rendering: Okuma ve yorumlama işlemi. Her tarayıcı kahretsin ki farklı bir sonuç verebilir.
• Weight: Kalınlık ve incelik durumları.image-based tipografi ile, Semibold, Light ve Black olarak kullanmak mükemmel rahatlık vericidir, normal ve bold olarak genellikle kullanılır.
• Word Spacing: İki kelime arasındaki boşluk
• X-Height: baseline ve meanline arasındaki boşluk. (the “x” glyph).

Tipografik Ölçeği

Etkili bir tipografik ölçeği oluşturmak için, bulduğum en iyi yöntem, belirli bir belgenin tabanına göre boyutunu ayarlar boyut ölçüm birimi “em” kullanmaktır. Yani tek bir öge üzerinden diğer tüm hx taglerini orantılayabilirsiniz.

    body {
     font-size: 12px;
    }
    h1 {
     font-size: 5.0em;
    }
    h2 {
     font-size: 4.0em;
    }
    h3 {
     font-size: 3.0em;
    }
    h4 {
     font-size: 2.0em;
    }
    blockquote {
     font-size: 1.5em;
    }
    p {
     font-size: 1.25em;
    }
    input {
     font-size: 1.0em;
    }
    small {
     font-size: 0.75em;
    }

Dikey Uyum

Gözün içeriği rahatlıkla takip edebilmesi için satırlarası boşluğu ifade eder. 1.5 em gözlemlerime göre en uygun olanı.

Aşağıda 960px grid için hazırlanmış örnek bir “vertical rhythm” yer alıyor.

    body {
     font-size: 12px;
     line-height: 15px;
    }
    p {
     margin-bottom: 15px;
    }

Tarayıcılar

Biraz önce bahsettiğim gibi tarayıcılar tasarımımızı farklı renderlar. İşte 5 farklı tarayıcının aynı tasarımı nasıl farklı gösterdiği

1997 yılından beri tasarımcılar tarayıcılar arasındaki farklı görünümün farkında olarak tasarlıyorlar. Açıkcası neden hale dur denilememiş bilemiyorum, belki bir gün biz deriz fakat şu an için yapılabilecek en mantıklı şey tasarımınızın tamamını tasarım programlarında gerçekleştirmemeniz. Yani .psd halindeyken tasarımınız çeşitli rahat alanlar oluşturup, css’inizi kodlarken de bu alanları tarayıcılara onların nasıl farklı gösterdiğinin bilincinde olarak çeşitli düzenlemeler yapmak gerekiyor. Hatta bu düzenlemeleri css’e geçmeden tasarım .psd halindeyken düşünülmeli.

Grid sistemi de bir çözüm, ayrıntılı bir makele olarak Andy Clarke’ın yazısını öneriyorum yeri gelmişken. Biraz da burada bahsedecek olursak gridler aracılığıyla tarayıcıda tasarımı geliştirmeye devam ederken sınırları daha rahat görebilir ve çözümler üretebilirsiniz. Aşağıdaki classları css’e ekleyerek html’de kullanarak tasarım yapmanız oldukça geliştirici olacaktır.

    .grid960base15 {
     width: 960px;
     line-height: 15px;
     background: url(images/grid960base15.png) repeat-y;
    }
    .grid960base18 {
     width: 960px;
     line-height: 18px;
     background: url(images/grid960base18.png) repeat-y;
    }
    .grid960base30 {
     width: 960px;
     line-height: 30px;
     background: url(images/grid960base30.png) repeat-y;
    }
    .grid600base12 {
     width: 600px;
     line-height: 12px;
     background: url(images/grid600base12.png) repeat-y;
    }
    .grid600base16 {
     width: 600px;
     line-height: 16px;
     background: url(images/grid600base16.png) repeat-y;
    }
    .grid600base18 {
     width: 600px;
     line-height: 18px;
     background: url(images/grid600base18.png) repeat-y;
    }

Grid-making Bookmarklet gibi farklı çözümler de denenebilir.

CSS Image Replacement

Başlığı nasıl çevirebilirim bilemedim, çevirmedim dolayısıyla. Kısaca şöyle anlatayım, divler veya css ile etki edebileceğiniz herangi bir öge içersinde olan text’i kendisine arkaplan tanımlayıp, text’i de css ile görünmeyen kılmanızı sağlayacak güzel bir hamle.
Bunun için birçok teknik var. En ünlüsü;

<h1 class="rss">
	RSS
</h1>

h1.RSS {
	width: 350px; height: 75px;
	background: url("images/RSS.jpg");
	text-indent: -9999px;
} 

Yani 350 x 75 alan için rss.jpg görselini gösterip, text içerik olan RSS ögesini de tens-indent ile 9999px dışarı alarak tarayıcının muhtemelen stad büyüklüğünde olmayan tüm versiyonlarında dışarıda görünmesini sağlıyor. Böylece arkaplandaki görsel ile çeşitli tipografik çalışmalar yapabilirsiniz. Başka yol isterim diyenler tık tık tık

Gelişmiş Image Replacement

Standart bir Image Replacement, çeşitli değişken veya uzun içeriklerde kullanışlılık açısından yetersiz kalıyor. Bu durumda 3 yeni ve gelişmiş seçeneceğiniz var. Flash-tabanlı, Javascript-tabanlı, ve PHP-tabanlı. Benim tavsiyem Js tabanlı olan elbette ama hepsinden bahsedelim.

Scalable Inman Flash Replacement (sIFR)

Shaun Inman tarafından IFR olarak tasarlanmış, arından Mike Davidson ve Mark Wubben tarafından geliştirilerek sIFR olmuş.

Artıları

• anti-aliasing sayesinde kaliteli, net görüntü
• semantik olarak markupta textiniz görüntülenir
• text seçilebilir
• sade bir komut

Eksileri

• Büyük fontlara uyumlu değil
• kurulumu karmaşık ve zor olabilir
• Flash and Javascript gerektirir
• yüklenmesi zaman alır
• baskıda problem yaşatır

a great tutorial on how to use sIFR veya the Official Site for sIFR2 veya the Official Site for sIFR3 üzerinden kullanım bilgilerine erişebilirsiniz, ama kısaca daha iyisi var diyeyim.

cufón

Fena değil fakat oldukça çok eksiği var. http://wiki.github.com/sorccu/cufon/about

Artıları

• en hızlı teknik
• semantik olarak markupta textiniz görüntülenir
• flash olmadığından sistemsel bir gereksinim istemez
• sade bir komut
• kolay kurulum

Eksileri

• Seçilebilir text olmaz
• Lisans problemleri oluşabilir
• :hover konusunda problem yaşatır
• Javascript gerektirir

Facelift Image Replacement (FLIR)

Hiç kullanmadığım bir teknik itiraf edeyim. Çünkü bu bir server-side teknik.

Artıları

• semantik olarak markupta textiniz görüntülenir
• flash olmadığından sistemsel bir gereksinim istemez
• lisans sorunu yoktur

Eksileri

• Seçilebilir text olmaz
• HP ve GD server gerektirir
• kurulumu zordur
• server konusunda maliyetli olabilir

CSS3 ve @font-face

CSS3 oldukça yeni bir teknoloji ve @font-face oldukça önemli bir özelliği.

IE6, IE7, IE8, FireFox 3.5+ (PC & Mac) ve Safari (PC & Mac) Opera 10 ve Chrome destekliyor. Mükemmel. 90%+ kullanıcınızda sorun yaşatmayacaktır.

Bu konuda ben temel bilgimi Fatih Hayrioğlu’nun makalinden öğrendim. Rahatlıkla siz de öğrenebilirsiniz.

Ömür Boyu Beta

• PSDTUTS+ Text Effects TUTS
• 101 Typography Resources from Vandalay Design Blog
• A List Apart
• Abduzeedo
• Astheria
• Font Lover
• Smashing Magazine
• The Typographic Archives
• TypeNow Type Glossary
• Typophile
• Web Designer Depot
• Web Typography Guide

Gibi kaynakları takip ederek kendinizi sürekli geliştirmelisiniz. Öğretmenin en iyi öğrenme tekniği olduğundan bu konuda bir makale yazmaya çalışarak (benim gibi) kendinizi geliştirebilirsiniz.

Ek: Hatamız varsa affola, yorum ola, düzeltile.

CSS(Cascading Style Sheets) geliştiriciler için başlangıç seviyesinde sayılabilecek fakat arşivinizin bir köşesinde yer alması gereken, bazı pahalı hatalardan kaçınmak adına göz gezdirmenizin yararlı olacağı ‘CSS Geliştiricilere 30 İpucu’

1. Anlaşılır Olmak

CSS kodlarınızın anlaşılabilir olması oldukça önemli. Çeşitli güncellemeler yapmak istediğinizde kendinizi kaybetmek istemezsiniz. Kullandığınız bir div’in içeriğini parçalara bölmek yerine tek bir seferde yazmanız mantıklı olacaktır.

.herangibirDiv { background: red; padding: 2em; border: 1px solid black; }

Her stili tek bir satırda yazmanız ve div’in satırından 1 tab içeride olması anlaşılırlığını arttıracaktır.

.herangibirDiv {
           background: red;
           padding: 2em;
           border: 1px solid black;
       }

2. Tutarlılık

CSS için kendi standartlarınızı oluşturmaya başlayın. Böylelikle birden fazla projede benzer class’larla çalışıyor olacaksınız ve hakimiyetiniz kodları rahatlıkla hatırlıyor olacağınızdan artacaktır.

Örneğin bir wordpress sistemi default olarak görsel editörden bir fotoğrafı sağa yaslarsanız otomatik olarak .caption-right classını verecektir. Dolayısıyla birden fazla temanızda .caption-right ‘ı float: right; olarak aynı şekilde kullanıyor olmalısınız.

3. Framework

Her ne kadar kullanmasam ve hatta tavsiye etmesem de araba kullanmak için tekerleği tekrar icat etmek istemeyenler için faydalı olabilecek, size zaman kazandırabilecek olan Framework‘leri tercih eden geliştiriciler var.

Benim düşüncem mevzu araba veya tekerlekten öte arabanın nasıl çalıştığını bilmek ile ilgili. Kendinizi nasıl rahat hissediyorsanız o şekilde devam edin. Fakat framework ile başlamayın, belirli bir süre sonra doğru bir adım ile framework kullanmaya başlayabilir veya kendi framework’ünüzü yazabilirsiniz.

Tavsiye edebileceğim 960.gs var. (Tasarlarken kullanıyorum fakat CSS geliştirirken framework olarak faydalanmıyorum.)

4. Reset

h1 kodu için herangi bir stil tanımlamasanız da fontun otomatik olarak büyük olduğunu göreceksiniz. Bu browserların default olarak tanımladığı stil özelliklerinden biri. Ne yazık ki bu default olarak tanımlanan ögeler tüm browserlarda aynı şekilde tanımlı değil. Küçük bir örnek olarak Firefox 3′te paragraflardan önce boşluk olmasına rağmen IE 7′de herangi bir boşluk yok.

Bu tarz küçük ayrıntılar tasarımınızın farklı browserlarda farklı görüntülenmesine neden olacaktır ve bazı projelerde bu farklılıklar oldukça önemli.

İşte bu noktada Reset CSS olukça zekice bir iş yapıp tüm bu değerleri sıfırlayarak bize tam hakimiyet sağlıyor. Eric Meyer ve YUI 2‘yu Reset CSS olarak tavsiye ediyorum.

5. Yapı

Stil dosyanızı tasarımda kullandığınız öge sıralamasında kodlamanız kullanışlı olacaktır.

1. Genel classlar (body, a, p, h1, vs.)
2. #header
3. #nav-menu
4. #main-content

Ayrıca her bölüm başına notlar almayı da unutmayın.

/****** header *********/
header stil kodları

/****** footer *********/
footer stil kodları

6. Elementleri Birleştirmek

h1, h2, ve h3 isimleriyle 3 adet elementiniz var. tahoma fontu ve #333 rengi bu elementler için ortak, ayrıca her birinin birbirinden farklı boyutları var. Dolayısıyla ortak elementleri birlikte kodlamak ilerleyen günlerdeki değişikliklerinizde hakimiyet ve kolaylık sağlar.

    h1, h2, h3 {font-family: tahoma, color: #333}
    h1 {size: 2.1em}
    h2 {size: 1.6em}
    h3 {size: 1em}

7. Önce markup

İlk bakışta HTML ve CSS’i aynı anda geliştiriyor olmak mantıklı geliyor olabilir fakat yapılması gereken mockup olarak HTML’i kodlamak, zorlanılabilecek kısımları belirlemek, onlara göre özel çözümleri hayal ederek HTML’li geliştirmek, ardından CSS kodlarını yazmaktır. CSS’teki çeşitli gereksinimlerinizde HTML’de tekrar değişiklik elbette yapılabilir.

Öncelikle HTML’i yazmanız default layout olarak siteyi görmenizi, temiz bir kod yazmanızı sağlayacaktır. Ayrıca gereksinimlerden dolayı sürekli öncelik CSS kodlarınızı yenileme gereksinimizi de ortadan kaldırıyor olduğunu farkedeceksiniz.

8. Çoklu Class Kullanmak

Sağa yaslanmış bir kutu oluşturmak için .box olarak css’te kutu tasarlayıp, right ile yaslama işlemini gerçekleştirip aşağıdaki gibi kullanabilirsiniz.

<div class="box right"></div>

Ufak bir not: HTML semantik olarak markup ve içerik içindir, CSS ile sunarsınız. Eğer bir değişiklik için CSS değil de HTML’i düzenliyorsunuz bir şeyleri yanlış yapıyorsunuz demektir.

9. Doğru Doctype

CSS doğrulamaları Doctype’ınıza göre yapılır, Doctype’ınıza göre browserlar sitenizi bambaşka okuyabilir. Fix Your Site With the Right DOCTYPE! bu konuda önemli bir kaynak.

Ben tüm projelerimde HTML5 Doctype kullanmaya başladım.

    <!DOCTYPE html>  

10. Kısaltmak

padding, margin, font gibi çeşitli değerlerde kodlarınızı kısaltmanız gayet mümkün.

    #rss {
        margin-left:    5px;
        margin-right:   7px;
        margin-top: 8px;
    }

yerine aşağıdaki şekilde de kodlayabilirsin.

    #rss {
        margin: 8px 7px 0px 5px;
    }

11. Yorum

    /* yorumlar */  

şeklinde css kodlarınıza yorum ekleyebilir, belirli bir özelliği /* … */ arasına alarak pasif hale getirebilir, çeşitli bugları not alabilirsiniz.

Block vs. Inline

Inline veya Block elemenletler:

    span, a, strong, em, img, br, input, abbr, acronym  

Block elemenletler:

    div, h1...h6, p, ul, li, table, blockquote, pre, form  

Block ve Inline olarak kullanabileceğiniz, clearfix’e gerek duyacağınız durumları sürekli kontrol edin.

13. Alfebatik Sıra

Anlamsız gözükse de birkaç kullanımdan sonra bu ipucunu kullandığınızı dahi farketmeyeceksiniz. CSS element özelliklerinizi alfebatik olarak kodlayın.

    #alfebatik {
        color: #fff;
        float: left;
        font-weight:
        height: 200px;
        margin: 0;
        padding: 0;
        width: 150px;
    }

Göz ile taramanızda uzun vadede size zaman kazandıracak, ayrıca firebug gibi eklentilerle css’nizi görüntülediğinizde otomatik olarak alfebatik sıraladığından çeşitli değişikliklerinizi el ile güncellemek istediğinizde beni hatırlayacaksınız.

14. Sıkıştırma

CSS dosyalarının boyutu normalde fazla büyük olmaz fakat sitenizin açılışını bir nebze olsun hızlandırmak için final dosyanızın satır boşluklarından CSS Compressor ve CSS Optimizer kullarak kurtulabilirsiniz.

15. Genel Classlar

#8′de bahsettiğimiz gibi belirli classları sürekli olarak kullanıyor olacağınızdan genel classlarınızı kullanın. Bu projeyi devrettiğinizde yerinize gelecek develeper’a da yardımcı olacaktır.

    .left {float:left}
    .rightright {float:rightright}  

    <div id="coolbox" class="left">...</div>

16. Margin: 0 auto

Ögelerinizi ortalamak için float:center; yerine

    margin: 0 auto; 

kullanmalısınız.

17. Div Saçmak

    <div class="header-text"><h1>Header Text</h1></div>  

şeklinde kullanmak yerine h1′i kapsayan div’i parent olarak kullanıp stil verebilirsiniz.

    <h1>Header Text</h1>    

18. Firebug

Firebug eğer kullanmıyorduysanız napıyorsanız durun, Firebug’ı kurun. Olmazsa olmaz aracınız olacak! debug JavaScript, inspect HTML, hata bulma gibi özellikleri real-time düzenlemeler derken ertesi gün Firebug yokken geliştiriciler ne yapıyordu diyeceksiniz.

19. Cross-Browser

Cross-Browser desteklemiyor olsa bile CSS ile kimi browserlara güzellikler yapabilirsiniz. Hatta sonrasında Prefixr ile mümkün olduğunca tüm browserlara uygulayabilirsiniz.

.box {
   opacity: .5;
}

Cross-Browser:

.box {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
}

20. Absolute Position

Absolute positioning sanırım en sevdiğim yenilikliklerden. Absolute Position ile Parent olarak div’e aldırmadan relative verdiğiniz div’e göre kendini konumlandırıp istediğiniz gibi at koşturun. Tabi birden fazla absolute postion ile veya dikkatsizce atılan adımlarda oldukça komik duruma da düşebilirsiniz.

21. Text-transform

Text-transform ile içeriklerinizi CSS üzerinden yönetebilirsiniz.

22. h1′i gizlemek için Nagatif Margin Kullanmayın

Google’ın web spam tim lideri Matt Cutts’ın söylediğine göre bu spam olarak algılanmakta. alt tagini kullanmanız semantic olarak kendinizi ifade etmeniz için yeterli.

23. Validate CSS ve XHTML

CSS validator ile kodunuzdaki olası hataları giderebilirsiniz. Ben pek umursamam.

24. Ems vs. Pixels

Font boyutlarını tanımlarken em veya pixel’den hangisini kullacağınızın sonucu browserlara göre fark yaratır. Ben pixelcilerdenim. Fakat siz Sizes In Webdesign: Em Vs. Px – and why em is better ve Using Points, Pixels, Ems, or Percentages for CSS Fonts makalelerini de inceleyin, kendiniz karar verin.

25. Listelemenin Gücü

Listeleme oldukça güzel ve güçlü bir özelliktir. Ayrıca semantic olarak da anlam verir. CSS3′ün sağladığı güzelliklerle nth-child (first,last, 1, 5.. )’a özel stil verebilmemiz bence çığır açan özelliklerden.

<ul id="nav">
							<li class="cat-item cat-item-291"><a title="Manşet Alanında Yayınlanan Makaleler" href="http://www.rsskitap.com/bolum/manset/">#</a>
</li>
	<li class="cat-item cat-item-187"><a title="Medyada RSS Kitap'a Yer Verenler" href="http://www.rsskitap.com/bolum/basin/">Basından</a>
</li>
		</ul>

26. Extra Seçicilerden Kaçının

Gerekmediği taktirde parent olan seçicinize alt class eklemekten kaçının.

    body #container .someclass ul li {....}

yerine

    .someclass li {...}

şeklinde kullanmak daha doğru. Bu şekilde css dosyanız mahşer alanı gibi olmaz.

27. Margin ve Padding

Cross-browser sorununa çözüm olarak her şeye margin ve padding eklemek akıllıca olacaktır.

    * {margin:0;padding:0;}

28. Object Oriented CSS

OOCSS sayesinde Javascript’i unutabilirsiniz. Kısa bir sunum ile adım atabileceğiniz OOCSS yeni başlayanlar için zorlayıcı olabilecektir fakat en azından teorik bir bilgiyi edinmeniz ilerleyen günlerde standartlaştığınızda yabancılığınızı önleyecektir.

29. Çoklu Stiller

Bir CMS sisteminin tipografi veya renk seçenekleri olabilir. Ortak alanları style.css’e alıp değişkenler için red.css blue.css gibi çeşitlere ayırabilirsiniz.

Bu dosyaların cachelenmeleri konusunda dikkatli olmayı unutmayın.

30. / Kapatın

XHTML validator ile eksiklerinizi farkedin. Boşa kürek çekmeyin.

Not: Umarım anlaşılır bir makale olmuştur. Hatam varsa affola, yorumlarsanız anında düzeltmek için adım atabiliriz.

Unutmadan: Yazıyı betimleyen thumbnaili tamamen css ile oluşturuldu. Teşekkürler Jeffrey Way, ayrıca makale Nettuts‘a ve Glen Stansberry ayrıca teşekkürler.

Biraz daha teknik blog yazılarına yönelmek istiyorum, eğer blogun gidişatı konusunda söyleceğiniz olursa lütfen çekinmeyin.

Teşekkürler.

Tema Yayımcısı: digitalnature
Demo: Demo Alanı
Wordpress Download: İndir
Yılbaşı Ek Download: İndir 2

Blogcular için yılbaşı eki de olan mükemmel bir tema! Uzun zamandır gözümü dikmiştim, şimdi yayınlıyorum. Türkçeleştirmesi ve görseller bana ait değil. Sadece sizlerle buluşturuyorum temayı. Umarım beğenirsiniz.

Özellikleri

• Mükemmel Bir Üst Menü
• Bileşen Desteği
• Gelişmiş Admin Paneli Ayarları
• Kategori Görünümü
• Yorum Alanı
• Kaliteli CSS
• WordPress 2.5 ve yüksek versiyonları destekler
• Design + XHTML/CSS + Jquery + WordPress

Kurulum

1. »Zipten çıkan ‘mystique’ klasörünü blog FTP dizininizin wp-content/themes kısmına kopyalayın.
2. »Wordpress Admin Paneline Giriş yapın.
3. »Tasarım bölümüne gelin ve temanın üstüne tıklayarak aktifleştirin.
4. »Bileşen ayarlarını yapın.
5. »Tema ayarlarını yapın.
6. »Eğer yılbaşı ekini aktifleştirmek de isterseniz mystique-xmas.zip zipinden çıkan ‘mystique-xmas’ klasörünü blog FTP dizininizin wp-content/themes kısmına kopyalayın ve etkinleştirin.
7. »Tadını çıkarın!

(Türkçe)İndir
| Yılbaşı Ek Download: İndir 2 – Demo

Özel Not1: Çeviride ve bağlantılarda herhangi bir hata varsa lütfen belirtiniz.
Özel Not2: Tema hakkında demo sayfasında özellikleri oluşturamıyorsanız bu yazıya yorum yaptığınız taktirde ayrıntılı bilgi kesinlikle en yakın zamanda eklenecektir.

İşte bu fırsatı kullanarak bir yazı dizisi yayımladım.8 bölümden oluşan bu serinin her yazısı işte şu cümlelerle başladım; “Orijinal bir fikir var olan şeylerin yeni bir kombinasyonundan başka bir şey değildir. Var olanların en güzelleriyle bilinç altınız yoğrulduğunda yeni fikirler üretmeye başlarsınız. Yani ilham almış olursunuz.
Bu amaçla sizler için İlham Veren Renkler Serisine başlıyorum (demiştim).”

Eğer bu seriyi görme imkanınız olmadıysa kaçırmayın derim.İşte adresleri de yayımlıyorum;

1-İlham Veren Renkler Serisi – Kırmızı
2-İlham Veren Renkler Serisi – Turuncu
3-İlham Veren Renkler Serisi – Sarı
4-İlham Veren Renkler Serisi – Yeşil
5-İlham Veren Renkler Serisi – Mavi
6-İlham Veren Renkler Serisi – Eflatun
7-İlham Veren Renkler Serisi – Kahverengi
8-İlham Veren Renkler Serisi – Gökkuşağı

Beğenmeniz,ilham almanız dileğiyle.. Saygılarımla.