CSS Renk Geçişleri

CSS ile renk geçişi CSS3 ile birlikte gelen güzel bir özelliktir. Resim kullanmadan bir renkten diğerine geçiş yapmayı sağlayan css3 gradients ö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.

Renk geçişi resimleri genelde jpeg olarak kaydedilir, resimde fazla renk olduğu için, bazen bu renk geçişi resimleri yüksek boyutlara erişebiliyor. CSS3’ün bu özelliği ile resim yerini kod blokları alır ve buda bize hız kazandırır.

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 revizelerdeki 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.

Tüm tarayıcılar için üretilen çözüm için 8 satırlık bir kod yazmamız gerekiyor. CSS3 renk geçişi özelliğini ilk webkit çıkardı, daha sonra Firefox desteklemeye başladı, ancak kodun karışıklığını Firefox azalttı. Webkit kodu daha karışık ve detaylı iken Firefox kodu daha sadeleştirdi ve w3c sonrasında diğer yeni nesil tarayıcılar aynı yolu izledi.

CSS3 renk geçişi özelliğini kullanabilmek için en az Firefox 3.6+, Safari4+, Chrome2+, Opera 11.10(sadece doğrusal renk geçişini) ve son olarakta İnternet Explorer 10 kullanmanız gerekmektedir. Her tarayıcı kendinden önceki ile bu özelliği destekler. Chrome ve Safari -webkit- ön eki ile, Firefox -moz- ön eki ile, Opera -o- ön eki ile, İnternet Explorer ise -ms- ön eki ile destekler. İnternet Explorer 6-9 sürümleri arası için filter: progid:DXImageTransform.Microsoft.gradient özelliğini kullanarak çözüm üretebiliyoruz. Makale boyunca w3c kodu şablonu gösterilecek, hemen peşinden jsfiddle’deki örneklerde ise tüm tarayıcıların kodları verilecektir.

CSS3 renk geçişi iki çeşittir. Doğrusal(Linear) ve Radyal(Radial) Şimdi bu çeşitleri inceleyelim.

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. Photoshop gibi programları kullananların alışık olduğu bir kullanımı vardır.

CSS3 renk geçişinin dezavantajlarından birisi farklı tarayıcılar için farklı kod yazma gereksinimidir.

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]* )</stop></stop></stop></angle></point>

Kod yukarıdaki gibi standartlaşsa da farklı tarayıcılar için farklı kod yazmamız gerekir. Doğrusal renk geçişi kodunun en basit hali.

background: linear-gradient(#fff,#f8b500);

Renk geçişi en basit hali ile iki renk arasındaki geçiştir. Yukarıdaki kod ile en basit renk geçişi sağlanmış olur.

Renk Geçişine Yön Verelim

Yukarıdaki basit kodlamada renkleri yazdık ama açısını, yönünü belirlemedik. Yukarıdan aşağı, sağdan sola vd. gibi yönleri açı ile belirleyebiliriz. Yukarıdaki örnek için kodumuz şu şekilde değişecek

background-image: linear-gradient(top,#fff,#f8b500);

İlk rengin nereden başlayacağını belirledik ve virgül ile diğer tanımlardan ayırdık. Bu tanım ile yukarıdan beyaz renk(#fff) ile başlayacağız ve en altta turuncu(#f8b500) ile bitiriyoruz. Benzer şekilde yönlerin İngilizce karşılıkları ile diğer yönleri tanımlayabiliriz. Diğer tanımlar 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.

Yukarıdaki tanımı birde dereceli yapalım.

background-image: linear-gradient(270deg,#fff,#f8b500);

Tabi açı olarak istediğimiz değeri vererek farklı renk geçişlerini de elde edebiliriz.

Renk Durma Noktaları Oluşturmak

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. Araya özel bir renk atamak için kullanırız bu yöntemi ve çok güzel renk geçişleri oluşturmamıza yardımcı olur.

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

background-image: linear-gradient(top,#fff 0%,#f8b500 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, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 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ğinide kullanabilmemize olanak sağlıyor. Tabi bizde 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,#f8b500,#FEF4B6 20px, #f8b500 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çenekleride kullanılabileceğini unutmayalım.

Ç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 eklememizede izin veriyor.

background-image: linear-gradient(left top, #FF9900, #FF0000, 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 ardalanlar 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. İnternet Explorer 10’nuncu sürümü hariç desteklemediği için uygulanabilirliği azalıyor. Uygulamak için beklememiz gerekiyor

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

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

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

shape(şekil):İki değer alır. circle ve ellipse. circle(dair) 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(boyut):Renk geçişinin boyutunu belirler. Belli değerler alır. Aşağıda açıklanacaktır.

stop(durak):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ı

Bu terimleri uygulayarak daha iyi öğreneceğimizi düşünüyorum.

En basit radyal renk geçişi

radial-gradient(circle farthest-side, #ff9900, #ff0000)

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, #FF9900, #FF0000, #FF9900);

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(#FF9900, #FF9900 5px, #FF0000 5px, #FF0000 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, #FF0000, #FF9900 95%, transparent), radial-gradient(50% 50%, circle contain, #FF0000, #FF9900 95%, transparent), radial-gradient(80%

50%,circle contain, #FF0000, #FF9900 95%,transparent);

Sonuç

Evet arkadaşlar bir CSS dersimizin daha sonuna geldik hepinize iyi çalışmalar dilerim.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: Bu içerik korunmaktadır!!