Embedded Files
Hazırlayan: Ömer Faruk Aktaş
CSS' de Renk Geçişleri (Gradient) nasıl kullanılır?
CSS3 Gradient, belirtilen iki veya daha fazla renk arasında yumuşak bir geçiş göstermenizi sağlar. Önceden, bu etiketleri elde etmek için resimleri kullanmak zorundaydınız. Ancak, CSS3 gradientleri kullanarak indirme süresini ve geniş bant kullanımını azaltabilirsiniz. Ek olarak, gradyan efektinin elemanları yakınlaştırıldığında daha iyi görünür çünkü gradyan tarayıcı tarafından oluşturulur.
Gradient, arka planlar gibi bir <image> kullanacağınız her yerde kullanılabilir. Gradient dinamik olarak oluşturulduğundan, geleneksel olarak benzer efektler elde etmek için kullanılan raster görüntü dosyalarına duyulan ihtiyacı reddedebilir. Ayrıca, gradyanlar tarayıcı tarafından oluşturulduğundan, yakınlaştırıldığında raster görüntülerden daha iyi görünürler ve anında yeniden boyutlandırılabilirler.
Gradient (Renk Geçişi) Çeşitleri
Linear (Doğrusal) Gradient (aşağı/yukarı/sol/sağ/çapraz)
Radial (Radyal) Gradient
Linear Gradient (Doğrusal Renk Geçişi)
Doğrusal renk geçişleri, yukarı veya aşağı gibi doğrusal biçimlerde iki veya daha fazla rengi bir arada kullanmak içindir.
Yukarıdan Aşağıya
Bu örnekte, doğrusal bir gradyan bir tepeden başlar ve geçişler aşağıya iner. Direction anahtar sözcüğü kullanmaz, bu yüzden tarayıcı varsayılanı kullanır.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink, green);
background: -o-linear-gradient(pink, green);
background: -moz-linear-gradient(pink, green);
background: linear-gradient(pink, green);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Soldan Sağa
Aşağıdaki örnek soldan sağa başlayan doğrusal bir gradient göstermektedir.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Çapraz (Diyagonal)
Hem yatay hem de dikey başlangıç konumlarını belirleyerek bir gradient oluşturabilirsiniz. Aşağıdaki örnek, sol üstte başlayan (ve alt sağa doğru giden) doğrusal bir gradient gösterir.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red, blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red, blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
İkiden Fazla Renk Kullanmak
Daha önce belirtildiği gibi, gradyanları kullanarak bir web sitesi arka planı oluşturmak için istediğiniz kadar renk düğümü belirleyebilirsiniz. Tabi ki, en az iki tane tarif etmelisiniz.
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>
Radial Gradient (Radyal Renk Geçişi)
Radyal gradyan, merkezi tarafından belirtilir. CSS radyal gradient kullanarak bir web sitesi arka planı oluşturmak için ayrıca birden fazla renk düğümü belirtmeniz gerekir.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Tekrarlı Radyal Renk Geçişi
Radyal gradient tekrarı, lineer olanla yaptığımız gibi tekrarlamak için aynı tekniği kullanıyoruz. Sadece bir fark var. "repeating-linear-gradient" Bunun yerine başlama beyanı "repeating-radial-gradient" kullanırız. Sonra kalan değerleri normal olarak tanımlarız.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
Page updated
Report abuse