CSS3 Gradient Kullanımı Ve Özellikleri

CSS de arkaplan için tek bir renk veya gradient özelliğini kullanabilirsiniz. CSS3 ten itibaren kullanılmaya başlanan gradient özelliği resim kullanmak yerine ihtiyacınız olan alanda, geçişli renkler kullanmanıza olanak sağlar. (Renk geçişlerinde kullanımının yanı sıra farklı amaçlarla da kullanılabildiği için, renk geçişi olarak çevirmek doğru bir ifade olmayacaktır. )

Gradientler arkaplan resimleridir

Arkaplanda tek bir renk kullanmak istediğinizde background-color özelliğini kullanırken, gradientler için background-image özelliği kullanılır.

Css3te Linear ve Radial olmak üzere 2 gradient çeşidi bulunmaktadır.

Linear (Doğrusal) Gradient

Doğrusal gradient “linear-gradient()” belkide en sık kullanılan gradient türüdür. Seçiminize göre gradient alanın ekseni sağdan-sola, aşağıdan-yukarı veya seçtiğiniz açı yönünde olabilir. Herhangi bir açı belirtilmediğinde, varsayılan yukarıdan-aşağı olarak kullanılacaktır.

 

See the Pen mJLNPy by MinimalCoding (@MinimalCoding) on CodePen.

Virgülle ayrılmış renkler normalde kullandığınız alandırılmış renkler, rgba, hsla gibi renkler olabilir.

Gradient yönünü soldan-sağa yapmak için linear-gradient() özelliğini “to right” olarak belirterek kullanabilirsiniz. “to” kelimesi yön belirtmek için kullanılır.

 

See the Pen RPyXRw by MinimalCoding (@MinimalCoding) on CodePen.

Aynı şekilde köşeler içinde “to” kullanımı mümkündür. Gradient ekseninin aşağı sol köşeden başlayıp, üst sağ köşeye gitmesini istiyorsanız “to top right” ı ekleyerek istediğiniz yönü belirtmiş olursunuz.

 

See the Pen WvJVxp by MinimalCoding (@MinimalCoding) on CodePen.

 

Renk geçişleri oluştururken 2 renk kullanmakla sınırlı değilsiniz, istediğiniz sayıda rengi virgüllerle ekleyerek, çok renkli gradient kullanımını sağlayabilirsiniz.

See the Pen mJLNOJ by MinimalCoding (@MinimalCoding) on CodePen.

 

“color-stops” olarak adlandırılan özellik sayesinde, belirli bir rengin hangi noktadan itibaren kullanılmaya başlayacağını belirleyebilirsiniz. Mesela kullanmak istediğiniz renklerden hangisinin daha baskın olmasını istiyorsanız, color-stop özelliğiyle, yüzde oranını baskın olacak rengin sonrasında belirtmelisiniz.Bu şekilde Web 2.0 Button yapılarını kolayca oluşturabilirsiniz.

 

See the Pen eNrqBr by MinimalCoding (@MinimalCoding) on CodePen.

Gradient kullanımını genel olarak geçişli renk kullanımı olarak algılasakta, kullanımı bundan ibaret değildir. Eğer birden fazla color stop kullanıyorsak, sabit renklerden birinden diğerine hemen geçişi sağlayabiliriz.

See the Pen GJdVmo by MinimalCoding (@MinimalCoding) on CodePen.

Yazının devamı ve Dairesel Degrade kullanımı için diğer sayfaya geçiniz…