/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption, tbody, tfoot, thead, th {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{    outline: 0; }

/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}

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

/* Css Sifirlama */

Aşağıdaki linkten diğer 5 adayı görebilirsiniz
http://www.altinorumcek.com/halkoylamasi/halkinfavorileri2009.html#bilgi_teknolojileri_donanim_yazilim

Türkiye’de böyle bir mantıkla kurulmuş ilk proje olan cssaddons.com zaman geçtikçe içindeki bilgiler ile internette yerini gitgide sağlamlaştırmakta. Bizim gibi duyarlı internet kullanıcıları sayesinde çok daha iyi yerlere geleceğinden eminim.

Projeye destek vermek istiyorsanız ve oylamak istiyorsanız cep telefonunuzun mesaj bölümüne girip ALTIN yazıp bir boşluk bırakarak 150 yazıp 3969 ‘a kısa mesaj olarak yollayabilirsiniz.
Destekleriniz için teşekkürler.

• Text Shadow,
• Border Radius
• Box shadow
• Opacity
• Multi Column
• Border image
• Font-face

Text Shadow:

Photoshopta kullandığımız drop shadow etkisini pratik bir şekilde uygulayabiliyoruz.

text-shadow:1px 1px 1px #eee;

1. değer x ekseninde aralık vermek için

2. değer y ekseninde aralık vermek için

3. değer ise verdiğimiz etkinin bulanıklaşması için kullandık

4. değer #fff verdiğimiz gölge etkisinin rengi için kullandık

Border Radius

Border radius web 2.0 stili tasarımlarda en çok kullanılan özelliklerden birisi tablo ve div lerde verdiğimiz kenarlıkları ovalleştirerek daha şık bir görünüm vermemizi sağlıyor.

border:2px solid #ccc;
-moz-border-radius:4px 4px 4px;//firefox için
-webkit-border-radius:4px 4px 4px;//safari ve chrome için

Border ImageBazı tasarımlarda gördüğüm kenarlıklar yerine resim kullanılıyor. Css 3 ile bunu yapmak mümkünmüş…

Round özelliği için

border:1.0em double; -moz-border-image: url(border.png) 28 round round;

Stretch border için

border:1.0em double; -moz-border-image: url(border.png) 28 stretch stretch;

Box ShadowText shadow tekniğine benzer bir örnek

-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.7);

1. değer x ekseni için

2. değer y ekseni için

3. değer blur

4. değer ise renk kodu

Opacity

Web 2.0 ile birlikte tasarımlarda yer yer transparan objelerde kullanılmaya başlandı eskiden transparan background için transparan png dosyasını kullanıyorduk fakat css3 opacity ile tasarımlarımızdaki transparan alanlar oluşturabiliyoruz.

opacity:0.2//%20 lik bir görünürlük değeri vermiş olduk.

Multi Column

Tasarımlarımızda kolonlu yapı için genellikle div, span ile ya da table ile kolonlu yapılar oluşturabiliyoruz fakat dinamik yapı kullandığımız zaman kolondan taşan yazının devamının bir sonraki kolonda çıkması problem oluşturabiliyor. Bu sorunu Multi Column ile çözebiliyoruz.

-moz-column-count:3;/* Kolon Sayısı*/
-moz-column-rule: solid 1px #fff; /*Kolonlar arasında aytaç için beyaz border kullandım */
-moz-column-gap:20px; /*kolonlar arası boşluk*/

@Font-Face

Web tasarımlarında yenilenen tasarım trendleriyle birlikte tipografide öne çıkmaya başladı dolayısıyla font seçimi önem kazandı ve sistem fontları yetersiz kalmaya başladı. Ancak web tasarımında özgürce font kullanılamıyor ya sistem fontu olması gerekiyor ya da resim olarak fontu siteye eklememiz gerekiyordu. Sistemde olmayan fontların kullanılmasını sağlamak için javascript ve flash kullanılarak bir çok teknik geliştirildi (sIFR, Cufon, Typeface…). Yalnız bu teknikler tam anlamıyla verimli olamıyor ya css desteği tam olmuyor ya da google tarafından indexlenmesinde problem çıkıyordu.Css 3 ile de artık sistem fontu olmayan fontlar eklenebiliyor. Fakat halen problemler devam ediyor…

dipnot:@font-face Css2 ile gelmişti fakat bazı problemlerden dolayı Css 2.1 de kaldırıldı Css3 ile tekrar geldi. – Fatih Hayrioğlu

style dosyamızda tanımlamamızı yapıyoruz

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Kullanımı

h3 { font-family: Delicious, sans-serif; }

Not: Bir kaç şekilde renk kodunu verebilirsiniz. rgb(0,0,0) = black = #000

Örnek Sayfa

Faydalı Linkler:

http://www.fatihhayrioglu.com/

http://www.css3.info

http://sixrevisions.com/css/basic-css3-techniques-that-you-should-know/

http://www.1stwebdesigner.com/css/css3-techniques/

sIFR tekniği ile bu sorun ortadan kalkıyor bunu yaparken teknoloji javascript kütüphanesini ve flash ı kullanıyor böylece hem indexlenme sorunu hem de html sayfasının sunucudan isteği azalıyor(5 dosya isteği ) bunu nasılmı yapıyor. Bu çok karmaşık gibi gözüksede çok basit bir uygulaması var. Kısaca bahsedeyim

Bunun için yayınlayan kişide sadece flash yüklü olması gerekiyor çünkü fontu flash dosyasında belirleyip swf olarak servera atacağız.

Javascript dosyasında ufak değişiklikler yapacağız ve işlem tamamdır.

1. Dosyayı http://wiki.novemberborn.net/sifr3/ adresinden indiriyoruz.

2. İndirdiğimiz dosya içindeki flash klasörünü açıp içindeki yazıtipini kullanmak istediğimiz yazıtipi ile değiştiriyoruz.(ben futura seçtim ve swf dosyamın adını futura.swf olarak kaydettim)

3. font stili olarak ne kullanılacaksa onu atıyoruz (bold, normal, italic…)

4.flash da işimizi bitirdikten sonra publish ederken jpeg quality 100 şeklinde ayarlayıp publish edelim.

5.sifr-config.js dosyasında ufak değişiklikler yapılması gerekiyor. Buradaki kodumuzu sifr-config.js dosyasına yapıştırıp düzenleyebilirsiniz.
var futura = {
src: ‘flash/futura.swf’
};
sIFR.activate(futura);
sIFR.replace(futura, {
selector: ‘h1′,//h1 tagında kullanılacak ise
css: [
'.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }',
'em { font-style:italic; }',//h1 tagının içinde hangi taglar kullanılacak ise onları yazıyoruz
'strong { font-weight:bold; color:#000; }'
],
wmode: ‘transparent’
});
6.Html kodumuza bazı dosyaları import ediyoruz. Aşağıdaki kodu dosyaları import etmek için kullanabilirsiniz kendi dizin yapınıza göre değiştirmeniz yeterli olacaktır

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print">
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

Önizleme: http://www.hamzaerbay.com/ornekler/sIFR/
http://www.hamzaerbay.com/ornekler/sIFR2/

Not: sIFR server a atıldığı zaman sağlıklı olarak çalışıyor

sIFR hakkında yararlı birkaç site

sIFR son sürüm http://dev.novemberborn.net/sifr3/nightlies/

http://www.muhammetsevim.com/yazi/sifr-3-kullanim-kilavuzu/
http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/
http://webdeneyimleri.donanimhaber.com/sifr-nedir-nedegildir/

örnek site

http://www.lightweb.pl/

- Görsel düzenlemeleri yaparken bize kolaylık sağlar örneğin köşeleri oval bir tablo stili yapıyorsak siteye bunu birden fazla yerde kullanacaksak bunu eklemek için kullanabiliriz. Ya da çeşitli görsel özellikleri uygulamada örneğin resmin saydamlık değeri yada contrast değerleriyle ilgili işlemler yaparak resimlerinizin daha hoş gözükmesini sağlayabilirsiniz…

- Tek CSS dosyası ile tüm sitenizin tasarımını şekillendirebilirsiniz bu sitenizin daha hoş gözükmesini sağlıyacaktır. Tüm sayfalarınıza aynı stili atayarak sayfaların uyumluluğunu sağlayabilirsiniz. Web sayfanızın uyumlu gözükmesi ziyaretçininde sitede daha çok kalmasında bir etkendir.

- Sayfalar aynı stili kullanmasından dolayı sayfa yüklenmesi daha hızlı olacaktır. Çünkü aynı stili kullandığımızda o stil özelliklerini tekrar tekrar yüklemeyecektir.

LİNK ÖZELLİKLERİ

a: Linkin, sayfa açıldığında tıklanmadan veya imleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.BİÇİMLENDİRME:
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ

disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ

position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

FONT ÖZELLİKLERİ

font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ

word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ

crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar

ZEMİN ÖZELLİKLERİ

background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

TABLO ÖZELLİKLERİ

margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.

NOT: Başlık “TABLO” olarak verildi Ancak bu nitelikler başta TD, TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS’ yi özel kılan da zaten bu

KAYDIRMA ÇUBUĞU ÖZELLİKLERİ

scrollbar-face-color : Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color : Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color : Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color : Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color : Yön oklarının rengi