Örnek
Aşağıdaki örnek, üst kısmında başlar doğrusal bir gradyanı gösterir. Mavi, sonra sarı geçiş, kırmızı başlar:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
Kendin dene " Tanımı ve Kullanımı
linear- gradient() işlevi, bir oluşturur "image" renk arasındaki bir doğrusal eğimi temsil eder.
Eğer en az iki renkli durur tanımlamalıdır bir doğrusal eğimi yaratmak. Renk durakları arasında yumuşak geçişler görüntülenmesini istediğiniz renklerdir. Ayrıca, bir başlangıç noktası ve bir yönünü ayarlamak için (or an angle) gradyan etkisi ile birlikte.
Linear Gradient örneği:
| Versiyon: | CSS3 |
|---|
Tarayıcı Desteği
Tablodaki rakamlar tamamen işlevini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| fonksiyon | |||||
|---|---|---|---|---|---|
| linear- gradient() | 26,0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS sözdizimi
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| değer | Açıklama |
|---|---|
| direction | Bir başlangıç noktası ve bir yön tanımlar (or an angle) gradyan etkisi ile birlikte. |
| color-stop1, color-stop2,... | Renk durakları arasında yumuşak geçişler görüntülenmesini istediğiniz renklerdir. Bu değer, isteğe bağlı bir durma konumunda ve ardından bir renk değeri oluşur (a percentage between 0% and 100% or a length along the gradient axis) . |
Diğer Örnekler
Örnek
Sol başlayarak devam eden bir doğrusal gradyan. Mavi geçiş, kırmızı başlar:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} Kendin dene " Örnek
Sol üst kısmında başlayan bir doğrusal gradyan (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} Kendin dene " Örnek
belirli bir açı ile bir doğrusal gradyan:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} Kendin dene " Örnek
Birden fazla renk duraklı bir doğrusal gradyan:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Kendin dene " Örnek
şeffaflık ile bir doğrusal gradyan:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Kendin dene " İlgili Sayfalar
CSS öğretici: CSS3 Gradients
CSS İşlevleri Referans