CSS3 Gradient Kullanımı

Merhaba Arkadaşlar,

Bu makalede sizlere CSS3 ile birlikte hayatımıza giren ve bizi arka planlarda resim kullanmaktan kurtaran bir özellik olan ” gradient ” ten bahsedeceğim. Bildiğiniz üzere CSS3 öncesinde genelde iki renk tonunun hakim olacağı arka planlarda çözümü ya internetten bulduğumuz bir resim ile ya da photoshop tarzı çizim programlarından oluşturacağımız bir dosya yardımı ile bulurduk. Ancak bu işlemler sonucu arkaplan için koyacağımız resmin sitenin açılışında sürekli yüklenmesi gerektiği için gözle görülür yavaşlıklar ve gecikmeler olmaktaydı. Ayrıca resmin belli bir boyutu olduğu için değişik çözünürlükte ve değişik büyüklükteki monitörlerde her zaman için sorun yaratmaktaydı.

Günümüz teknolojileri arasında yer alan CSS3 ile önümüze gelen yenilikler arasında tasarımcıların bu sorununa da çare olan bir işlem bulunmaktadır. ” Gradient ” adı verilen bu sistem ile sayfada yukarıdan aşşağı , soldan sağa , dışarıdan içeri ve tam ters yönlerinde değişik renk tonları kullanarak sayfa arka planlarını ve div gibi sayfa içi materyallerin arka planlarını düzenleyebiliyoruz.

Her yeni teknolojide gördüğümüz gibi bu gradient işleminde de farklı tarayıcılarda farklı sonuçların çıkması veya hiç sonucun çıkmaması gibi sorunlarla da karşılaşabiliyoruz. Bunun çözümü için de farklı tarayıcılar için farklı tanımlamalar yapmamız gerekecektir. Uygulamamıza geçelim ve bir kaç küçük örnek ile bu makaleyi daha iyi kavrayalım.

İlk olarak bir klasör yaratıyoruz ve içerisine ” index.html ” ve ” stil.css ” isimli iki adet sayfa yaratıyoruz. Bu uygulamada sadece sayfa arkaplanlarının görüntülerini alacağımız için index içerisine herhangi bir materyal eklemeye gerek görmüyorum. En sade hali ile index sayfamızın kodları şu şekilde olacaktır :


   <html>
    <head>
    <title>BilgiSayaci.Org - CSS3 Gradient</title>
    <link rel="stylesheet" type="text/css" href="stil.css" />
    </head>
    <body>
        
    </body>
</html>

Şimdi ilk olarak sayfanın üst bölümünden altına doğru değişen bir arkaplan yaratacağız. Bunun için bir çok değişik site içerisinde bir çok kod bloğu bulabiliriz ancak benim önerim ” css3pie.com ” ve ” colorzilla.com ” siteleri olacaktır. Örneğin bu adresler içerisinden css3pie.com ‘ a giriyoruz ve border-radius ile box-shadow değerlerini Enabled ‘ den çıkardıktan sonra Show CSS yazılı checkbox ‘ ı işaretliyoruz. Hemen alt bölümde açılan CSS kodları içerisinden başında ” background ” yazılı olan tüm tüm kodları kopyalayarak stil dosyamızda body içerisine yapıştırıyoruz.


body
{
    background: #EEFF99;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
    background: -webkit-linear-gradient(#EEFF99, #66EE33);
    background: -moz-linear-gradient(#EEFF99, #66EE33);
    background: -ms-linear-gradient(#EEFF99, #66EE33);
    background: -o-linear-gradient(#EEFF99, #66EE33);
    background: linear-gradient(#EEFF99, #66EE33);
}

İndex sayfamızı çalıştırdığımızda üstten aşşağıya doğru sarı bir renk tonundan yeşil bir renk tonuna doğru olan değişimi göreceğiz. Bu da işlemimizin doğru bir şekilde sonuçlandığı anlamına gelmektedir.

Bu tarz üstten alta doğru olan çalışmalarda bazı istekler de doğabiliyor. Örneğin biz en üst ve en alt renklerini belirledikten sonra gördük ki sayfanın hemen hemen her noktasında değişik bir renk tonu ile geçişler sağlanmıştır. Ancak müşteriler en üst noktadan başlayarak örneğin sayfanın %25 ‘lik bir bölümüne kadar aynı renk tonunun ve daha sonra da en alt noktadan başlayarak ta %70 ‘luk bir renk tonunun sabit , arada kalan kısımların ise ince bir geçiş ile sağlanmasını isteyebilir. Bunun için de kendimiz anlaşılması kolay bir satır ile örneğin ” -webkit- ” için şöyle birşeyler yazabiliriz :


body{background: -webkit-gradient(linear,left top,left bottom,color-stop(0.25,rgb(76,80,105)),color-stop(0.70,rgb(208,163,202)));}

Bu kısa kodu biraz açmak gerekir ise parantez ilk açıldığı andan itibaren baktığımızda ” left top ” ve ” left bottom ” tanımlamaları ile gradient ile belirtilen ilk renk tonunun sol üst bölümden başlayacağını ve son renk tonunun sol alt bölümde biteceği belirtilmiştir. ” color-stop ” seçenekleri içerisinde belirtilen 0.25 ve 0.70 seçenekleri içeriklerde belirtilen renk tonlarının sayfanın ne kadarında etkin olacağını göstermektedir. RGB ‘ler içerisindeki rakamlar ise hepimizin tahmin edebileceği gibi renk tonlarına karşılık gelmektedir.

Dairesel (Radial) Gradient

Kafanızda bir soru olabilir. Acaba Düz (Linear) Gradient için neden bir başlık verilmezken Radial Gradient için verildi. Bunun en basit cevabını web sayfalarını gezerken bulabileceğinizi düşünüyorum. Her gün girdiğimiz onlarca web sitesi eğer Gradient kullanıyorsa bu genellikle Linear gradient olmaktadır. Belli bir sebebi tabi ki yoktur ama genel de hareketli içeriklerle göze hitap eden sayfaların Radial Gradient kullanması daha uygun görülmektedir. Her neyse uygulamamıza geçelim.

Kullandığımız CSS sayfası içerisine aşşağıdaki kodları ekleyerek sonucu hep birlikte görelim.


bbody
{
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

Tüm bu içerikleri tek tek yazmak , rakamları , kaplayacağı alanları , renk tonlarının yerleşimini vs. ayarlamak her kod yazan insana zor gelecektir ve daha kısa bir biçimde bu kodlar elde edilmek istenecektir. İşte bunun içinde makale başında belirttiğim adresler olan css3pie.com ve colorzilla.com adreslerini sık sık ziyaret etmenizi tavsiye ediyorum.

Css3Pie.Com : Bu adresten zaten makale içerisinde ” Linear Gradient ” bölümünde bahsetmiştik. Tekrar değinmek gerekirse adrese giriyoruz ve eğer amacımız sadece gradient kullanmak ise seçili olan ” border-radius ” ve ” box-shadow ” seçeneklerini seçili olmaktan çıkarıyoruz. Daha sonrada hemen alt bölümde bulunan ” Show CSS ” seçeneğini işaretleyerek açılan menüden başında ” background ” yazılır satırları kopyalayarak CSS dosyamız içerisine ekliyoruz.

ColorZilla.Com : Adrese giriyoruz ve ” Ultimate Gradient Editor ” seçeneğine tıklayarak gerekli sayfaya gidiyoruz. İlk olarak ” Presets ” bölümünden renk tonumuzu belirliyoruz ve hemen alttaki Color Bar ‘ dan renk tonumuz ile ilgili düzenlemeleri yapabiliyoruz. Eğer gerekli görülürse ” Hue / Saturation ” bölümünden seçilen renk tonunun da değiştirilebilmesi imkanı sağlanmaktadır. En son olarak ta sağ tarafta bulunan ” Orientation ” kısmındaki Dropdown Menü içerisinden Gradient ‘ in nereden nereye doğru olacağı belirlenecektir ve CSS menüsü içerisindeki tüm kodlar kopyalanarak CSS dosyamıza dahil edilecektir.

Ayrıca bu makale içerisinde belirtilen kodlar genellikle makaleyi yazarken kullandığım Browser olan Google Chrome için yazılmıştır. Ama müşterilerimiz bizden değişik tarayıcılarda da aynı görüntüyü alacak sistemi isteyeceklerdir. Renk tonlarınızı belirleyin ve verilen adreslere doğru bir ziyarete çıkın 🙂

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *