CSS Degradeler | EFORWEB

Web tasarım kursumuzun CSS derslerine degradelerle devam ediyoruz.

Bu zamana kadar işlediğimiz CSS konuları temel seviyedeydi. Bu dersten itibaren CSS3 ile gelen özellikleri işlemeye başlayacağız.

Herkese başarılar dilerim.

CSS3’ün amaçlarından biri, başka bir dil veya araç kullanmadan daha işlevsel ve gösterişli içerikler elde etmektir.

Buna verilebilecek en güzel örneklerin başında degradeler gelir.

Daha önceleri sayfamıza degrade eklemek için img öğesini kullanıyorduk, yani degradeyi resim olarak ekleyebiliyorduk.

CSS3’te ise degradeleri kendi kodlarımızla oluşturduğumuz için iş hem daha kolaydır hem de resim yüklemekten kaçındığımız için sitenin bant genişliği kullanımını ve yükünü azaltmış oluruz. Bu da sitemizin daha hızlı açılmasını sağlar.

Aynı zamanda degradeyi tarayıcı çizdiği için sayfayı yakınlaştırdığımızda görüntü bozulmaz.

İki tür degrade vardır:

Doğrusal degradeler (aşağı, yukarı, sağa, sola, çapraza)
Radyal degradeler (merkezden dışa doğru yayılan)

CSS3 Doğrusal Degradeler

Doğrusal bir degrade oluşturmak için en az iki renk durağına ihtiyacımız vardır.
Bu renk durakları, aralarında yumuşak bir geçiş olmasını istediğiniz renklerdir.
Degradeye ayrıca bir yön (ya da açı) verebilirsiniz; yön verilmezse degrade yukarıdan aşağıya doğru uygulanır.

#grad {
    background: red; /* Degradeyi desteklemeyen tarayıcılar için */
    background: linear-gradient(red, yellow); /* Standart kullanım */
}

Not: Eski derste aynı kod Safari, Opera ve Firefox’un eski sürümleri için -webkit-, -o- ve -moz- önekli satırlarla da yazılıyordu. Günümüz tarayıcıları standart linear-gradient yazımını desteklediği için bu satırlara gerek yoktur.

Doğrusal Degrade (soldan sağa)

Aşağıdaki örnek soldan başlayan bir degradeyi göstermektedir. Kırmızıdan başlayıp sarıya doğru değişen bir renk örneğidir.

#grad {
    background: red;
    background: linear-gradient(to right, red, yellow);
}

Doğrusal Degrade – Çapraz

Yönü hem yatay hem dikey olarak belirterek çapraz bir degrade elde etmemiz mümkün.

Aşağıdaki örnek sol üstten başlayıp sağ alta doğru ilerleyen doğrusal bir degradeyi göstermektedir. Kırmızıdan başlar, sarıya dönüşür:

#grad {
    background: red;
    background: linear-gradient(to bottom right, red, yellow);
}

Açıları Kullanarak Degrade Oluşturmak

Degradenin yönü üzerinde daha fazla kontrol istiyorsanız önceden tanımlanmış yönler (sağ, sol, üst, alt) yerine bir açı tanımlayabilirsiniz.

Standart yazımda 0deg aşağıdan yukarıya, 90deg soldan sağa, 180deg yukarıdan aşağıya doğru bir degrade verir. Aşağıdaki örnekteki -90deg ise sağdan sola doğru bir degrade oluşturur.

#grad {
    background: red;
    background: linear-gradient(-90deg, red, yellow);
}

Çoklu Renk Kullanımı

Aşağıdaki örnek birden fazla renge sahip, yukarıdan aşağıya doğru degrade verilmiş bir öğeyi göstermektedir.

Kod örneği:

#grad {
    background: red;
    background: linear-gradient(red, yellow, green);
}

Degrade Arka Planı

Kod örneği:

#grad {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.