bildirgec.org

css saydamlık hakkında tüm yazılar

Size Sıfırdan CSS3 Öğretecek 20 Kaynak

pinkfloyd | 06 April 2009 09:42

Her ne kadar W3C‘nin CSS3 tanımlamaları üzerinde çalışmalarını tamamlamamış olsa da, Mozilla Firefox, Opera ve WebKit tabanlı tarayıcılar (Safari, Chrome) halihazırda CSS3’ü tamamen ya da kısmen destekliyor durumda.

Bir web geliştiricisi olarak modern ve gelecekteki web standartları hakkında bilgi sahibi olabilmek önemlidir. Diğer geliştiricilerden bir adım önde olmak için yazının devamında bulacağınız CSS3 hakkında 20 mükemmel kaynak size CSS 3 öğrenmenizde yardımcı olacaktır.

1. CSS3 İlerleme Raporu

CSS Çalışma Ekibi tarafından geliştirilen CSS3 İlerleme Raporu web sitesi tüm CSS3 modüllerinin geçerli durumlarını belirtiyor. Özellikle CSS3’ün gelişimine katkıda bulunan ya da bulunmak isteyen geliştiriciler için bu kaynak, üzerinde çalışılan alanları görüp nereden katkıda bulunabileceğinize karar vermede yardımcı olacaktır.

Web Tasarımınızı CSS3 İle Geleceğe Taşıyın

pinkfloyd | 09 March 2009 14:25

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS’nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması‘nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius
border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız: