bildirgec.org

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı… CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners

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

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow’u aslında jQuery‘nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

Bildirgec’de daha önce şu yazıda css round ile yuvarlak köşeli kutucuklar hazırlanmasından bahsedilmişti.

CSS Round ile kutucuk yapma

Yazıyı çevreleyen yuvarlak köşeli bloklar oluşturmadan farklı olarak genellikle tablarda gördüğümüz üzerine gelince değişen yuvarlak köşeli linkler oluşturmak istersek şu CSS kodları kullanılabilir.

Birçok resim tek bir resim dosyasında

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.

Burada css yuvarlak kutular yapabileceksiniz.
Extra özellikler;# sayfanızın arka plan rengini# css yuvarlak kutunuzun rengini belirleyebiliyorsunuz.# Oluşturulacak yuvarlak parçaların yarıçapını ayarlayabiliyorsunuz.# Yine oluşturulacak yuvarlak parçaların transparan mı olup olmayacağını belirlemek elinizde.# Hemen altında css ve html kodlarını da ekliyor. Tek yapmanız gereken kodları yerleştirmek oluyor.

ekran görüntüsü

ve bana kalırsa pekçok bu tip siteler arasından bu özellikleriyle sıyrılıyor.yorum sizin.

http://inviz.ru/moo/meet-transcorners

Mootools kullanarak oluşturulmuş sadece 4 kb boyutunda bir js.Birkaç değişik uyarlaması mevcut.Örnekler için buraya, yüklemek içinse şuraya

sitelerimize web2.0 tasarımı için yine-yeni-alternatif bir köşe yuvarlaklaştırma yöntemi. roundedcornr, isminden anlaşıldığı gibi köşelerimize oval resimler yapıyor ve css+html kodunu elimize veriyormuş.