CSS gradient Özelliği Nedir ve Nasıl Kullanılır?

CSS gradient ile renk geçişi CSS3 ile birlikte gelen güzel bir özelliktir. Resim kullanmadan bir renkten diğerine geçiş yapmayı sağlayan CSS gradient özelliği bize tasarımsal anlamda çok büyük avantaj sağlar. Ayrıca resim kullanmadığımız için HTTP isteği yapmamış oluruz ve böylelikle hız kazanmış oluruz.

Esneklik açısından da avantajlıdır. Renk geçişi resimleri esnek değildir, ancak CSS3 renk geçişi özelliği bize istediğimiz esnekliği sağlar. Böylece kontrollerdeki birçok iş yükünden kurtarır. Genişleyebilir alanlarda renk geçişi kullanmamızı sağlar.

CSS renk geçişi özelliği resim tanımlanan her özelliğe atanabilir; background-image, list-style-image, border-image vd. Teoride böyle olmasına karşı pratikte şu an tarayıcılar sadece background-image yani background özelliğine eklemeyi desteklemektedir.

CSS3 renk geçişi iki çeşittir. Bunlar; doğrusal (linear) ve radyal (radial).

Doğrusal Renk Geçişleri

Doğrusal renk geçişleri soldan sağa, yukarıdan aşağı veya istediğimiz doğrusal yönler arası geçiş yapmamızı sağlar. Renk geçişi en basit hali ile iki renk arasındaki geçiştir. Bir örnek ile gösterelim.

background: linear-gradient(red , blue);

Renk Geçişine Yön Verme

Yukarıdan aşağı, sağdan sola vd. gibi yönleri açı ile belirleyebiliriz. Yukarıdaki örnek için kodumuz şu şekilde tekrar yazalım.

background-image: linear-gradient(left, red, blue);

İlk rengin nereden başlayacağını belirledik ve virgül ile diğer tanımlardan ayırdık. Bu tanım ile soldan kırmızı renk ile başlayacak ve en sağda mavi ile bitecek. Benzer şekilde yönlerin İngilizce karşılıkları ile diğer yönleri tanımlayabiliriz. Bunlar; top, bottom, left, right. Benzer tanımları açı ile de yapabiliriz. 0deg(sol); 90deg(alt); 180deg(sağ); 270deg(üst) ve 360deg(sol) iki sol değeri var.

Renk Durma Noktaları Oluşturma

Her ne kadar basit bir tanım ile iki renk arasında geçiş olarak tanımlasakta, aslında renk geçişi kullanımında daha farklı yöntemlerde vardır. Bu yöntemi araya özel bir renk atamak için kullanırız.

Durma noktalarını da eklersek yukarıdaki kodumuz aşağıdaki gibi olacaktır.

background-image: linear-gradient(top, red 0%, blue 100%);

Renk sıfır noktasından (0%) başlıyor ve son noktada (100%) geçiş bitiyor.

Benzer şekilde araya renk ekleyebilir ve orta noktalardan başlayıp bitirebiliriz.

background: linear-gradient(top, red 0%, yellow 50%, blue 51%, green 100%);

Renk Geçişinde Saydamlık Kullanımı

CSS3 ile birlikte renk tanımlarına alfa kanalları da eklenmiştir. Bu sayede renk tanımladığımız her yerde saydamlık özelliğini de kullanabiliriz. Burada renkler ile çalıştığımız için alfa kanalı yardımı ile renk geçişlerinde saydamlıktan da yararlanabiliriz.

rgba tanımlarında alfa kanalı 0 ile 1 arasında değer alır. 0 etkisiz kılarken 1 değeri bize katı bir renk verir.

background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

Renk Geçişi Tekrarı

Tanımladığımız renk geçişinin belli aralıklarla tekrarını sağlar. Bunun için ayrı bir kod yazarız. Ancak mantık doğrusal renk geçişi ile aynıdır.

background-image: repeating-linear-gradient(0deg, red, blue 20px, yellow 40px);

repeating-linear-gradient özelliği linear-gradient ile benzer kullanıma sahiptir. Başta 0deg ile renk geçişinin yönünü belirliyoruz, sonra tekrar edecek renkleri virgül ile ayırarak yazıyoruz. Burada piksel değeri verildiği gibi CSS’in diğer değer seçenekleri de kullanabiliriz.

Çoklu Doğrusal Renk Geçişi Kullanımı

Renk geçişi background-images özelliğine atanıyor, background-images özelliği CSS3 ile birlikte çoklu kullanıma izin vermektedir. Aynı şekilde bir elamana birden fazla renk geçişi eklememize de izin veriyor.

background-image: linear-gradient(left top, red,  blue, transparent), -moz-linear-gradient(right top, #FF9900, #FF0000, transparent);

Yapmamız gerek sadece iki tanım arasını virgül ile ayırmak. Üst üste binmelerde saydam özelliğini kullanarak farklı resimler elde edilebilir.

Tüm bu özellikleri birleştirerek çok güzel arka planlar elde edebiliriz.

Radyal Renk Geçişleri

Diğer bir renk geçiş türü de radyal renk geçişleridir. Radyal renk geçişi, merkezi bir noktadan tüm yönlere renk geçişi olarak tanımlanabilir. Yukarıdaki kullanıma yakın bir kullanımı vardır. Radyal renk geçişi bize özel şekil (daire ve elips) oluşturma imkanı verir.

position: background-position ile aynı şekilde yorumlanır. Başlangıç değeri center dir.

angel: Başlangıç noktası ile renk geçişi hattının açısını gösterir. Başlangıç değeri 0deg dir

shape: İki değer alır. circle ve ellipse. circle (daire) yarıçapı belli olan bir daire şeklinde renk geçişi uygulanır. ellipse (elips) bir elips şeklinde renk geçişi uygulanır. Başlangıç değeri ellipse’dir.

size: Renk geçişinin boyutunu belirler. Belli değerler alır.

stop: Renk geçişlerinde araya farklı renk atamak için belli durak noktaları oluşturmak için kullanılır. 0% ile 100% arasındaki değerleri alabilir.  

Radyal renk geçişinin doğrusal renk geçişinden farklı olarak size(boyut) tanımları vardır. Boyut değerlerini tek tek inceleyelim.

Boyut Değerleri

closest-side: Dairelerde, merkezden kutunun kenarına kadar anlamındadır. Elipslerde ise merkezden yatay ve dikey kenarlarının yakınına kadar anlamındadır.

closest-corner: Renk geçişi yapılan elemanın merkezinden tam köşelere kadar uygulanmasıdır.

farthest-side: closest-side ile benzer anlamdadır, yakın kenara değil uzak kenara kadar uygulanır. Elips şekillerde dikey ve yatay uzak kenarlara kadar uygulanır.

farthest-corner: Renk geçişi yapılan elemanın merkezinden uzak köşeye kadar uygulanır.

contain: closest-side ile eş anlamlı.

cover: farthest-corner ile eş anlamlı

Şimdi bir örnek gösterelim.

radial-gradient(circle farthest-side, red, blue);

Radyal Renk Geçişlerinde Durma Noktaları Oluşturmak

Doğrusal renk geçişinde olduğu gibi radyal renk geçişinde de birden fazla renk eklemek için durma noktaları oluşturabiliyoruz.

radial-gradient(circle farthest-side, red, yellow, blue);

Radyal Renk Geçişi Tekrarı

Doğrusal renk geçişinde olduğu gibi tanımladığımız renk geçişlerini ufak bir özellik ismi değişimi ile tekrarını sağlayabiliyoruz.

repeating-radial-gradient(red, yellow 5px, green 5px, blue 10px);

Çoklu Radyal Renk Geçişi Kullanımı

Doğrusal renk geçişinde olduğu gibi kullanımı vardır. İki tanım arasına virgül konularak uygulanır.

background-image: radial-gradient(20% 50%, circle contain, red, blue 95%, transparent), radial-gradient(50% 50%, circle contain, yellow, green 95%, transparent), radial gradient(80% 50%,circle contain, black, gray 95%,transparent);

CSS gradient özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar