CSS3’ün güzel nimeti gradient’i kullanmamızı kolaylaştıran yüzlerce güzel servisten birisi olan Gradient Scanner ile yüklediğimiz herhangi bir resimdeki renk geçişinin CSS kodunu alabiliyoruz.
Resmi yüklüyoruz ve “next” butonundan kodumuzu alıyoruz. Hepsi bu kadar.
CSS3’ün nadide özelliklerini gün geçtikçe birlikte görüyoruz. Bazı arkadaşlarımız ise bizden daha fazla uğraştıkları için ortaya ilginç ama güzel şeyler çıkarıyorlar. Onlardan biri de birazdan sizleri göndereceğim listedeki kare, çember, oval şekiller, üçgen, pacman ikonu ve diğer şekillerden görebileceğiz. Işınlan
CSS3 ile birlikte işlerimizi grafik kullanmadan büyük ölçüde kolaylaştıran border-radius, box-shadow, background-gradient ve opacity özelliklerini aynı anda kod yazmadan görsel olarak ayarlamamıza izin veren CSS3.me aynı zamanda internet explorer 7 ve 8 için destek veriyor. Mutlaka yer imlerinde olması gereken servis tamamen ücretsiz.
CSS3 içeriğinde yer alan; gölgelendirme, oval köşe, yazı gölgelendirmesi, döndürme, gradient, görünürlük, çerçeve gibi özellikleri denemek üzere CSS3 Playground‘a bir uğrayabilirsiniz. Yapılan etkilerin CSS kodunu da beraberinde alarak kendimizi geliştirmek de mümkün.
CSS3 ile gelen gradient özelliğini kullanmak için birçok servis kuruldu. Buradaki serviste jQuery kullanılarak hazırlanmış renk paleti üzerinden seçilecek iki renk ile gradient geçişimizi oluşturuyoruz. Show CSS butonu ile de CSS kodunu alıp projelerimizde kullanabiliyoruz. Bu tür servislerin yaygınlaşması geliştiriciler açısından zaman tasarrufu sağlamakla birlikte büyük ölçüde kolaylık sağlıyor.
CSS3 ile gelen yeniliklerden birisi de renk geçişleri dediğimiz gradient nesnelerinin resim dosyası kullanmadan yapabilmemizdir. Hem sitelerin bant kullanımını düşürme hem de hızlı açılması açısından önemli bir gelişme bu özelliği kullanım ise oldukça kolay.
Kod kullanımı yerine renklerini seçtiğimiz taktirde bunu bizim yerimize oluşturacak, ortadan, yandan, üstten olmak üzere farklı konumlamalara göre bize kodunu verecek bir servis var.
Yapmamız gereken şey serviste renkleri seçip alt kısımda çıkan yönlenlerden bizim isteğimize yanıt verenin CSS sınıfını seçip CSS dosyasına eklemek olacak.
CSS3 ile birlikte hem kodlayanlara çok büyük kolaylıklar geldi hem de kullanıcılara birçok avantaj sağlandı. Kendi resmimizi kullanabileceğimiz çerçeve deseninden arkaplan boyutlarını ayarlamaya, kutuları döndürmeye kadar çok güzel özellikler eklendi. CSS3 Click Chart tüm bu yeni CSS3 özelliklerini gösteren çok güzel bir yol gösterici. Galeri şeklinde gösterilen özelliklerin yanındaki soru işaretlerine tıkladığımız zaman kullanım şekli sayfanın en altında gösteriliyor.
Web sayfalarında görsel açıdan önemli yer tutan öğelerden birisi de oval köşelerdir. Oval köşelerin tasarım aşamasında çizimi basit olsa da kod dökümünde oldukça sıkıntı verenek bir olaydır. CSS3’e kadar her köşeye bir resim atayıp oval görüntüyü bu şekilde elde ediyorduk. Ancak bu durum gereğinden fazla kodu, gereksiz resimleri de yanında getiriyordu. Bu da sayfayı görüntülemek isteyince de haliyle daha yavaş yüklenmekte. Resimlerin gereksiz bantwith kullanımını hiç söylemeyelim bile. İşte tüm bunlar CSS3 ile birlikte son buluyor. CSS3’ü de şu anda modern tarayıcalardan olan Firefox ve Opera tarafından ağırlıklı olarak destekleniyor. Yani aşağıda yapacağımız örnekleri bu iki tarayıcıdan birinde görüntülemek en doğrusu olacaktır.
Örnek 1: Her Köşeye Ovallik Verme
#ornek1{ width:500px; height:100px; background:#C6EAFF; border:2px solid #0080FF; -moz-border-radius:10px; -webkit-border-radius:0px; padding:10px;} |
Yukarıdaki kodlarda -moz-border-radius ve -webkit-border-radius yardımıyla köşeleri oval yapabiliyoruz. Buralardaki pixel değerlerinde oynama yaparak daha oval veya daha düz görüntüler elde etmek mümkün. Örnekteki 10px ovallik değeri ile aşağıdaki görüntüyü elde ediyoruz.
Örnek2: İstediğimiz Köşeyi Oval Yapma
Yukarıdaki örnekte her köşe yazdığımız standart kod yardımıyla oval oldu. Ancak istediğimiz köşeyi oval istediğimizi keskin yapmak mümkün.
#ornek2{ width:500px; height:100px; background:#FDD; border:solid 2px #EA0000; -moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; padding:10px;} |
Biz bu örnekte sol üst köşeyi ve sağ alt köşeyi oval yaptık. İstersek tam tersini de yapmak mümkün. Bunun için aşağıdaki değerlere göz atmak gerekiyor.
Yukarıdaki konumlamalar ile kodlarımızı oluştururarak istediğimiz köşeye istediğimiz ovalliği verebiliyoruz.
Örneği görüntülemek için buraya CSS dosyasına bakmak için de buraya bağlantı vererek yazımızı bitirelim. Sorularınızı yorumlardan iletebilirsiniz.
CSS3’ün ne gibi nimetler getireceğini biliyoruz. Bunlardan birisi de resimler ve biçimlendirmeler üzerine. CSS-Tricks de CSS3’den yararlanıp jQuery ve HTML5 yardımıyla çok güzel bir resim galerisi örneği yapmışlar. Galeri önizlemesinde üzerine geldiğimiz resim büyüyor veya eğimli duran resim düz hale geliyor. Mantık olarak eğik durması ve üzerine geldiğimizde büyümesi için birden fazla önizleme resmi kullanılıyor. Rastgele bir resmin seçilmesi ve önizlemenin oluşturulması için de jQuery kullanılıyor. Oldukça ilginç ve güzel bir galeri örneği.
