
CSS3 Gradient Kullanımı Ve Özellikleri
CSS de arkaplan için tek bir renk veya gradient özelliğini kullanabilirsini
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
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(
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ğlayabilirsini
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ı belirleyebilirsi
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…
Sayfa: 1 2
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.