CSS3 ve güzellikleri
CSS3 kulislerde konuşula dursun, tasarımcılar CSS3′ün getirdiği yeniliklerle gelen kolaylıkları kullandıkları günü hayal etmeye devam ediyorlar. Gerçi CSS ve tasarımcı dostu tarayıcımız Firefox bazı yeni özellikleri şimdiden getirmiş olsa da (örneğin: CSS3 ile gelecek olan border-radius özelliğini moz-border-radius olarak Firefox’ta şimdiden kullanabiliyoruz), en azından sorunlu ‘tarayıcımız’ Internet Exporer’ın da bu özellikleri anlayabileceği gün için biraz daha beklememiz gerekiyor.
Peki nedir bu yeni özellikler? Aslında hepimiz bir çoğunu uzun zamandan beri kullanmamıza rağmen, kullanabilmek için ‘bin dereden su getiriyoruz’. Haydi, ileriki günlerde sahip olacağımız bu özelliklerden bazılarına beraber göz atalım.
Resimleri kenar olarak atama (border-image)
CSS3 ile öğelere atadığımız kenarlıklara (border) pek güzel yenilikler geliyor. Bunlardan biri ‘border-image’. Bu yeni ve hoş özellik ile istediğimiz herhangi bir resmi öğelere kenarlık olarak atayabiliyor, yüksekliklerini belirleyebiliyoruz.
Yukarıdaki örnekte olduğu gibi, CSS’in 3. versiyonu ile istediğimiz bir resmi herhangi bir öğeye kenarlık olarak atayabileceğiz.
Kenar köşelerini ovallaştırma (border-radius)
CSS3 ile gelen muazzam yeniliklerden biri de öğenin kenarlıklarını ovallaştırma özelliği. Bu özellik ile herhangi bir öğenin istediğimiz bir kenarını ovallaştırma şansına sahip olacağız.
Tarayıcımız Firefox, bu özelliğe şimdiden alışmamız için şimdiden kısmen destekliyor bile. Özelliği aşağıdaki gibi kullanmamız mümkün:
.isim { border: 1px solid #333; -moz-border-radius:10px; } .isim2 { border:1px solid #000; -moz-border-radius-topleft:10px; -moz-border-radius-bottomright:10px; }
Kenarlara birden çok renk atama (border-color)
Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!
Gördüğünüz gibi, CSS3′ün farklı ve pek yararlı bir özelliği de, örneğin 8 piksellik bir kenarın her pikseline istediğimiz rengi verebilmemiz. Bu özelliğin yardımıyla rengarenk kenarlar oluşturabileceğiniz gibi, rengi pikselden piksele açarak artalan efektli kenarlar oluşturabilirsiniz.
Tarayıcımız Firefox ile bu özelliği aşağıdaki kullanım şekliyle şimdiden kullanmanız mümkün;
.isim { border: 6px solid #000; -moz-border-top-colors: #555 #666 #777 #888 #999 #000 ; }
Arkaplan boyutunu belirleme (Background-size)
CSS3 ile gelen yenilikler tabii ki sadece kenarlık cephesinde değil. Yeni ve yararlı özelliklerden bir diğeri ise arkaplan boyutunun belirlenebilmesi.
Bu yararlı özelliğin yardımı ile, örneğin 100×100 piksel boyutlarındaki bir resmi, 50×50 pixel boyutlarında arkaplan olarak atamanız mümkün olacak.
Kullanabilmek için biraz beklememiz gerekecek olan özelliği ileriki zamanlarda şu şekilde kullanacağız;
.isim { background-size: 200px 50px; background:#333; }
Birden fazla arkaplan
Bu pek güzel özellik ile, herhangi bir öğeye birden fazla arkaplan öğesi ekleyebilme şansına sahip olacağız. Arkaplanları ise arada virgül (,) kullanarak belirleyeceğiz.
.isim { background:url('birinciresminadresi') no-repeat left, url('ikinciresminadresi') no-repeat right; }
Renk opaklığını belirleme (Opacity)
Diğer bir muazzam özellik ise, herhangi bir öğeye atadığımız rengin transparanlık oranını belirleyebilmemiz.
Özelliğin yardımıyla, herhangi bir grafik işleme programında bolca kullandığımız ‘Alpha’ veya ‘Transparency’ özelliğini CSS üzerinden istediğimiz öğeye atayabileceğiz.
Metinleri birden fazla sütuna paylaştırma
Bu muazzam özelliğin yardımıyla, herhangi bir metni birden fazla sütuna paylaştırabileceğiz.
Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!
.isim { width:300px; -moz-column-count: 2; -moz-column-gap: 10px; } .isim2 { width:300px; -moz-column-width: 140px; -moz-column-gap: 10px; }
Yukarıdaki örnek kodlarda dikkatinizi çekmiş olan ‘-moz-column-gap’ ile sütunların arasındaki boşluğun genişliğini belirliyoruz.
3. versiyon CSS’in getireceği bazı güzelliklerden bahsettik. Bu özelliklerin ne zaman gelecekleri ve tarayıcıların (özellikle Internet Explorer’ın) ne zaman tam olarak destekleneceğini tam olarak bilemesek de, geldikleri zaman işe yarayacak olan özellikler olacaklarını görmüş olduk.
Son güncelleme: 23 Haziran 2006, 14:10
YORUMLAR
TOPLAM 28 YORUM.
Yorumlarınız değerlidir. Bu yazıyla ilgili düşüncelerinizi belirtebilir, yardım talebinde bulunabilirsiniz.
Süleyman Şentürk, (#) - 20.6.2006
İlk teşekkür eden ben olayım.Çok güzel br haber.Sitelerimiz daha da güzelleşecek.
ntguzel, (#) - 21.6.2006
gerçekten harika ! renk opaklığını belirleme hadisesini kullanmıştım ; gerçekten çok hoş.firefox’u tebrik etmek gerekiyor herhalde bu durum karşısında , adamlar ne kadar ileri görüşlü :D
Ali BEŞKAZALI, (#) - 22.6.2006
(border-radius) özelliğine bayıldım doğrusu. :) Genel anlamdada hepsi hoş olmuş. Bu güzel çalışman için sana teşekkür ederim. Kolay gelsin.
Hidayet Bayraktar, (#) - 22.6.2006
Ellerine sağlık…
Hüseyin Tüfekçilerli, (#) - 23.6.2006
Öncelikle böyle güzel bir tanıtım için teşekkürler.
Birden fazla arkaplan başlığı altında yapılan şey şu an kullandığımız kuralların üstüne yazma (overriding) ile aynı şey değil mi? Yani anladığım kadarıyla bu özellik ile birlikte bir elmente aynı kuralı ikinci bir defa tanımladığımızda, yani üstüne yazdığımızda, bunu üstüne yazma olarak algılamıyacak ta yeni bir background image olarak algılayacak. Bir de yine aynı başlık altında şöyle bir şey var:
Ama verilen örnekte virgüllü bir kullanım yok.
Batuhan Bayrakçı, (#) - 23.6.2006
Eğer bu özellikleri çoğu tarayıcı desteklerse artık sadece not defterini kullanarak iyi siteler tasarlayabilicez. Bazı ufak işlemler için grafik programlarını açmaya da gerek kalmayacak.
TEŞEKKÜRLER
volkan, (#) - 23.6.2006
haberler süper :)
uzun zamandır eksikliğini hissettiğim özellikler yavaş yavaş kendini göstermeye başlamış. okudukça keyiflendim.
Muhammet Sevim, (#) - 23.6.2006
@Hüseyin, tam olarak öyle değil. Örneğin benim bu sitede beyaz arkaplanda kullandığım gölge efektini üçe bölüp birkaç farklı div’de hazırladım. Öncelikle üst taraf, ve arkaplan resmi, orta bölümde tekrarlanan bölüm ve alt bölüm. Ama CSS3′teki birden fazla arkaplan ile bunların tümünü bir div içinde de hazırlayabiliriz. Yani demek istediğim, atadığımız arkaplanlar alt alta sıralanıyor, üst üste gelmiyor. Eskiden birden fazla div ile yaptığımız işi ileride tek div ile yapabileceğiz.
Benim hatam, uyarın için teşekkür ederim. Şu an düzgün durumda.
Hüseyin Tüfekçilerli, (#) - 23.6.2006
Biraz yanlış anladın beni sanırım. Mesela şu an şöyle bir kullanım mevcut:
div {background-image: url(resim.png)} // ilk tanımlama
…
…
…
div {background-image: url(baska-resim.png)} // burada override yapıyoruz
CSS2′ye göre yukardaki kurallara göre div etiketlerimde baska-resim.png görünecektir. Ama yazdığın kadarıyla CSS3′te gelen bu özellik ile artık override yapamıyacağımız anlamı çıkıyordu. Noktalı virgülü virgüle çevirince bu karmaşa biraz düzeldi ama hala bir eksik var. Verdiğin örnek kod:
.isim { background:url(‘birinciresminadresi’) no-repeat left, background:url(‘ikinciresminadresi’) no-repeat right; }
yerine
.isim { background-image:url(‘birinciresminadresi’), url(‘ikinciresminadresi’);
background-repeat: no-repeat left, no-repeat right; }
olması gerkiyor. Daha fazla bilgi için şuraya bakabilirsiniz.
mirturk, (#) - 23.6.2006
Etkileşimli çok güzel oluyor öğrendiklerimiz pekişiyor. :) Teşekkürler Muhammet Sevim ve Huseyin Tüfekçilerli.
slayerrrr, (#) - 23.6.2006
Her şey iyi güzel de, IE kullanıcılarıyla adeta dalga geçmişsin gibi. Sırf bu özelliklerin nasıl olduğunu görmek için Firefox kurmak zorunda değilim ki. Özellikle bu yorumu kendi makinemden uzakta yazıyorken :) Keşke tüm özellikleri jpg dosyası halinde koysaydın.
Muhammet Sevim, (#) - 23.6.2006
@slayerrrr, ben de artık herkesin Firefox kullanmasının zamanı geldiğini bir kez daha hatırlatmak istedim. Neden mi dersin? En kolay cevap sanırım bu sayfadaki örnekleri görebilmen olacaktır. Firefox önceden davranıp bu özellikleri şimdiden kısmen desteklemeye başlıyor, ama biz CSS3 çıktığında bile IE’nin bu özellikleri ne zaman destekleyeceği konusunda kaygılar taşıyoruz..
Muhammet Sevim* Web tasarımı üzerine » İlk ayın ilk istatistikleri, (#) - 24.6.2006
[...] Şimdiye kadar en çok ilgi gören yazılar ‘Oğlum beni okula gönder‘, ‘CSS3 ve güzellikleri‘, ve ‘CSS Layout Rehberi‘ olmuş. [...]
oCRaCy, (#) - 28.6.2006
Css3 yenilikleri, özellikle border-image ve border-radius çok hoşuma gitti. Keşke IE de bu yenilikleri destekleseydi yapılan tasarımların herkesde aynı olması çok daha güzel olurdu.
bedafocb, (#) - 28.6.2006
Gerçekten hoş olacak gibi bu CSS3. Makale için teşekkürler bu arada…
Ömer Sinan Ağacan, (#) - 18.8.2006
Sabırsızlıkla bekliyorum, bu sıralar CSS ile çok problem yaşıyorum(IE6 kullanmakta ısrar edenler yüzünden)..
Ugur, (#) - 1.9.2006
Açıkçası ellerinize sağlık…..
Ufuk Eskici, (#) - 15.9.2006
Gavur yapıyor be abi:)
Yapanın da bizlere aktaranın da eline sağlık.
Çok güzel bilgiler bunlar.
Sanal Çöplük » Blog Archive » Muhammet ve CSS 3.0 hakkında, (#) - 21.9.2006
[...] Guzel bilgilerini paylaştığı için muhammet e teşekkürler ellerine sağlık Muhammet in sitesi CSS 3.0 hakkında [...]
Türkçe CSS kaynakları | Blog ve Wolkanca - işimiz gücümüz blog!, (#) - 15.2.2007
[...] CSS3 ve güzellikleri [...]
Savaş ŞAHİN, (#) - 7.6.2008
Biz halen CSS 2 lerdeyiz, CSS 3 çıkmış haberimiz yok :(
Mustafaayan, (#) - 30.6.2008
açıklamaların için teşekkür ederim zaman zaman siteni takip edeceğim bundan sonra… Başarılar
jack_o_latern, (#) - 11.7.2008
border radius örneğinde çerçeve içindeki yazının fontunu öğrenebilir miyim? o font css ile mi yapılmış? windowstaki gibi cleartype benzeri bir özellik verebiliyor muyuz css ile?
Muhammet Sevim, (#) - 11.7.2008
jack_o_latern, fontun ismi ‘Lucida Grande’, ancak bu font sadece Mac OS X’te bulunuyor… Windows’taki Lucida Sans ile karşılaştırılabilir. Cleartype özelliği CSS ile verilemiyor, ancak Windows üzerinde Safari kullanırsan farklı renderleme özelliğini göreceksin…
Web Standartları Nedir - yücel eroğlu - web tasarımı ve internet kültürü, (#) - 16.7.2008
[...] CSS3 ve güzellikleri http://www.muhammetsevim.com/yazi/css3-ve-guzellikleri/ [...]
jack_o_latern, (#) - 20.7.2008
safari kurdum ve inceledim. tüm yazılar çok güzel ve rahat okunabiliyor bu font ile. ben bunu siteme firefox ile giren ziyaretçiye de uygulayamazmıyım? malum safari kullanan çok az kişi var.
ayrıca apple ın sitesi de bu fontu kullanıyor ve firefox, ie, opera farketmiyor. apple, mac bu işi aşmış. bi şekilde bulmam lazım bu fontu.
adıyok, (#) - 1.9.2008
bu kadarcıkmı?
Türkçe CSS Kaynakları ve Yazıları « WebeGe Blog, (#) - 12.12.2009
[...] CSS3 ve güzellikleri [...]
Yorumunuzu ekleyin
E-posta adresiniz hiçbir zaman yayınlanmayacaktır. Temel HTML metin şekillendirilmesi izinlidir. Sadece bu konuyla ilgili yorum yapmayı unutmayınız. Teşekkürler :)