CSS3 ile birlikte gelen yeni nesil tasarımcılığın temellerini oluşturan yapıları birlikte inceliyoruz.CSS ile tasarımlar oluşturmak web tasarım dünyasının vazgeçilmezidir. Standartların farklı platformlarda eşit olmamasından dolayı yıllarca tasarımsal öğelerin sunulmasında problemler yaşanıyordu. Her geçen zaman yeni getirilen standartlar ile uyum noktası hemen aynı seviyeye getirildi. CSS3 ile de artık tarayıcı uyumluluğu ve web tasarımcılar için olmazsa olmaz uygulamalar birer standart haline getirildi ve artık bu uygulamalar ile birlikte tasarımcıları yeni bir heyecan bekliyor.
CSS (Cascading Style Sheets) HTML’e ek olarak getirilen ve tasarımsal öğelere daha fazla özellik ile değinilmeye olanak sağlar. Yazı tipi, renk, konum vb. belirlemeleri CSS ile daha fazla olanak dâhilinde yapabiliyoruz. Tasarımsal öğelerin web şablonuna yerleştirilmesindeki konumların belirlenmesi ve yapısal olarak biçim standartlarının kolay uygulanabilmesine olanak tanıyor.
CSS dosyasında yapacağınız tanımlamaları web sayfalarınızda uygun kod bloklarına yerleştirerek fazla kod karmaşıklığından kurtulabiliyor ve daha sistematik bir yapıya sahip olabiliyorsunuz. Tüm bunları göz önüne aldığımızda CSS kullanmamak için bir sebep göremiyoruz.
CSS3 ile gelen yeni özellikleri hep birlikte daha yakından inceleyelim.
Yuvarlak Köşeler
Tasarımlarımızda özellikle header konumlarında ya da tablolarımızda kullandığımız oval köşeleri yapmak artık CSS3 ile daha da kolay hale geliyor.
CSS3 öncesinde grafik programları aracılığıyla oluşturduğumuz çizgilerimize verdiğimiz biçim ve konum tanımlamaları ile oval köşeler oluşturuyorduk. Yenilenen yapısıyla CSS3 ile artık bu özellik bir standart olarak geliyor ve basit birkaç kod yapısıyla kısa süre içinde yuvarlak köşeler oluşturabiliyorsunuz.
<div style=" background-color: #c0c0c0;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #000;
padding: 15px;
width:170px;" >
CSS3 ile Yuvarlak Köşeler
</div>
Evet, gördüğünüz gibi resimdeki örneğimizi basit birkaç satır kod yardımıyla gerçekleştirebiliyoruz.
Border-radius olarak adlandırılan yeni özellik ile tüm tarayıcılara uyumlu yapılar elde edebiliyoruz.
- -moz-border-radius-topleft / -webkit-border-top-left-radius
- -moz-border-radius-topright / -webkit-border-top-right-radius
- -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
- -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Tanımlamaları ise belirttiğimiz biçimleri kullanarak tasarımlarınızda kullanabilirsiniz.
Saydamlık Efekti
CSS3 ile gelen bir diğer güzel özellik ise resimler üzerinde saydamlaştırma efekti verebiliyor olmamızdır. CSS3 öncesinde javascript yardımıyla resimler üzerinde saydamlaştırma çalışmaları yapabiliyorduk.CSS3 ile artık saydamlaştırma efektlerini vermek çok basit hal alıyor.
Resmin ilk hali
Resmin saydam hali
a img {
border:solid 10px #000;
opacity:0.4;
filter:alpha(opacity=40);
}
a img:hover {
border:solid 10px #000;
opacity:1;
filter:alpha(opacity=100);
}
Resmin ilk halinin opacity değerini düşük bir değer veriyoruz ve ardından üzerine gidildiğinde hangi değeri alacağını belirtiyoruz. Kullanımı da bir hayli kolay olay yeni CSS3 tekniği ile artık fotoğraflarınıza daha hoş görünümler kazandırabilirsiniz.
Kenarlık Renklendirme
Çalışmalarımızda sıkça kullandığımız kenarlıklara CSS3 ile her bir kenarına farklı bir renk atayabiliyoruz.
Border-color olarak tanımlanan bu özellik ile tasarımlarınıza yeni stiller kazandırabilirsiniz.
.kenar
{
border: 6px solid #560e00;
width: 200px;
-moz-border-top-colors: #560e00 #f4f3f8 #dddddd #8d0100 #cf5b00 #4b4c3c ;
}
Gördüğünüz gibi farklı renk değerleri atayarak kenarlıkların renklerini istediğimiz gibi kolayca değiştirebiliyoruz.
İstediğiniz Fontu Kullanın
CSS3 ile gelen yeni özelliklerden biri de @font-face özelliği ile web sayfalarınızda istediğiniz yazı tiplerini kullanabiliyorsunuz.
Tasarımlarınızda farklı yazı tipleri kullanma imkânının sağlanması tasarımcılar için güzel bir gelişme oldu. Kullanıcılar tarafından dikkat çekilmesini istediğimiz noktalarda farklı yazı tiplerini resimlerle ya da sıfr kullanarak gerçekleştirebiliyorduk.
Fakat bu hem optimizasyon hem de esneklik bakımından göze hoş gelmiyordu.CSS3 ile gelen @font-face özelliği bizi ekstra yöntemlerden kurtarıyor ve daha verimli bir şekilde farklı yazı tipleri kullanma imkanını bize tanıyor.
Yazı kütüphaneleri css dosyasında belirtiliyor ve o yazı tipi karşı kullanıcıda yüklü olmadığı durumlarda da sorunsuz olarak çalışıyor.
@font-face {
font-family:'yorkville';
src: url('/images/yorkville.ttf') format('truetype');
}
Görüldüğü üzere yorkville adındaki yazı tipimizi images dosyası içine atıyoruz ve yazı tipi yolumuzu css yapımızda belirtiyoruz. Farklı yazı tiplerini h1,h2 vb. başlık yapılarında ve içerik bölümlerinde kullanabilirsiniz. Başka hiçbir yönteme gerek kalmadan kendi yazı tiplerinizden oluşan sayfanızı ziyaretçileriniz ile paylaşabilirsiniz.
Birden Fazla Arkaplan Kullanın
Web sitelerinde dinamik bir görünüm kazandırmak istenildiğinde içeriğimiz dışındaki yapılardan biri de arka planda dikkat çekici resimler kullanılmasıdır. CSS3 öncesinde birden fazla arka plan kullanma imkânına sahip değildik oysaki artık CSS3 ile birlikte gelen yeni özellik ile birden fazla arka planı web sitemizde uygun biçimlerde kullanabiliyoruz.
.bg
{
background:url('resim1.jpg') no-repeat left,
url('resim2.jpg') no-repeat right;
}
Basit bir css yapısıyla birden fazla arka planı web sitemizde kullanıp tasarımlarımıza hoş görünümler kazandırmak artık daha kolay bir hal alıyor.
CSS3 ile gelen yenilikler bunlar ile bitmiyor tabi ki biz sizler için en çok ihtiyaç duyulanları belirledik.CSS3 tasarımlarımızı daha kolay yönetebilme imkânı sağlamakla birlikte daha dinamik bir yapıda sunum yapmamızı da kolaylaştırıyor.
Yeni nesil tasarımcılığın temelleri CSS3 ile birlikte daha da güçlendi. Yeni gelişmeler ile birlikte tasarımcılığı önümüzdeki yazılarımızda daha yakından inceleyeceğiz.