Örnek
Tekrar eden bir doğrusal gradyan:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Kendin dene " Tanımı ve Kullanımı
repeating-linear- gradient() fonksiyonu doğrusal gradyanlar tekrar kullanılır.
| 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 | |||||
|---|---|---|---|---|---|
| repeating-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:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| değer | Açıklama |
|---|---|
| angle | gradyan için yön açısını tanımlar. 0deg itibaren 360deg için. Standart 180deg olduğunu. |
| side-or-corner | gradyan hattın başlangıç noktasının konumunu tanımlar. Birincisi, sol ya da sağ yatay kenarı gösterir ve ikinci dikey yan, üst ve alt olmak üzere iki anahtar kelimelerden oluşur. Sipariş alakalı değildir ve anahtar kelimenin her isteğe bağlıdır. |
| 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
Farklı tekrar eden çizgisel gradyanlar:
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1
to 12.0 */
background: -moz-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera
11.1 to 12.0 */
background: -moz-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad3 {
height: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background:
-moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox
3.6 to 15 */
background: repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* Standard syntax (must be last) */
} Kendin dene " İlgili Sayfalar
CSS öğretici: CSS3 Gradients
CSS İşlevleri Referans