CSS3 geçişlerini İki veya daha fazla belirtilen renkler arasında yumuşak geçişler görüntüler sağlar.
Daha önce, bu etkileri için görüntüleri kullanmak zorunda kaldı. Ancak, CSS3 geçişlerini kullanarak indirmek zaman ve bant genişliği kullanımını azaltabilir. yakınlaştırıldığında gradyan tarayıcı tarafından oluşturulan çünkü Ayrıca, gradyanlar ile elementler, daha iyi görünür.
CSS3 iki tür degrade tanımlar:
- Lineer Gradyanları (goes down/up/left/right/diagonally)
- Radyal Gradyanlar (defined by their center)
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| 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- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 Doğrusal Degradeleri
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.
Sözdizimi
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Lineer Gradyan - Üstten Alta (this is default)
Aşağıdaki örnek, üst kısmında başlar doğrusal bir gradyanı gösterir. Bu sarı geçiş, kırmızı başlar:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Kendin dene " Lineer Gradyan - Soldan Sağa
Aşağıdaki örnek, soldan başlar doğrusal bir gradyanı gösterir. Bu sarı geçiş, kırmızı başlar:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Kendin dene " Lineer Gradyan - Çapraz
Çapraz olarak hem yatay hem de dikey bir başlangıç pozisyonlarını belirleyerek bir gradyan yapabilir.
Aşağıdaki örnek, üst soldan başlamakta (ve sağ alt gider) bir doğrusal eğimi göstermektedir. Bu sarı geçiş, kırmızı başlar:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Kendin dene " açıları kullanma
Eğer eğim yönünde üzerinde daha fazla kontrol istiyorsanız, (vs, sol sağ alt kısma, sağa, dön, aşağıya) yerine önceden tanımlanmış yönlere, bir açı tanımlayabilirsiniz.
Sözdizimi
background: linear- gradient( angle , color-stop1 ,
color-stop2 ) ;
a açısı, yatay çizgi ve gradyan hattı arasında bir açı olarak tanımlanır.
Aşağıdaki örnek doğrusal yokuşlarda açıları nasıl kullanılacağını gösterir:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Kendin dene " Çoklu Renk Durak Kullanma
Aşağıdaki örnek, bir doğrusal eğimi göstermektedir (from top to bottom) çok renkli duraklı:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Kendin dene " Aşağıdaki örnek, gökkuşağı bazı metin rengi ile (soldan sağa) bir lineer gradyan oluşturmak için gösterilmiştir:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
/* 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 " Şeffaflık kullanma
CSS3 gradyanları ayrıca solma efektleri oluşturmak için kullanılabilecek saydamlığını destekler.
Şeffaflık eklemek için kullandığımız rgba() renk duraklarını tanımlamak için işlevini. Son parametre rgba() işlevi, 0 ile 1 arasında bir değer olabilir, ve renk şeffaflığını tanımlar: 0 tam şeffaflık gösterir, 1 tam renk gösterir (no transparency) .
Aşağıdaki örnek, soldan başlar doğrusal bir gradyanı gösterir. Tam kırmızı renk geçiş, tamamen şeffaf başlar:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
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 " lineer gradyanı tekrarı
repeating-linear- gradient() fonksiyonu doğrusal gradyanlar tekrar kullanılır:
Örnek
Tekrar eden bir doğrusal gradyan:
#grad {
background: red; /* For browsers that do not
support gradients */
/* 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 " CSS3 Radyal Gradyanları
Bir radyal gradyan, merkezinden tanımlanır.
Ayrıca, en az iki renkli durur tanımlamalıdır radyal gradyan oluşturmak.
Sözdizimi
background: radial-gradient( shape size at position, start-color, ..., last-color );Varsayılan olarak, şekil elips, boyut en uzak-köşesidir ve konumunu merkezidir.
Radyal Gradient - Eşit Olarak Aralık Renk Durak (this is default)
Aşağıdaki örnek, eşit aralıklı renk duraklı radyal bir gradyanı gösterir:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Kendin dene " Radyal Gradient - Farklı Aralıklı Renk Duraklar
Aşağıdaki örnek, farklı aralıklı renk duraklı radyal bir gradyanı gösterir:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Kendin dene " Set Şekli
şekil parametresi şeklini tanımlar. Bu değer bir daire veya elips sunar. Varsayılan değer elips olduğunu.
Aşağıdaki örnek, bir daire şeklinde olan radyal bir gradyanı gösterir:
Örnek
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Kendin dene " Farklı Boyut Anahtar Kelimeler Kullanımı
büyüklük parametresi gradyanı boyutunu tanımlar. Dört değerleri alabilir:
- En yakın-taraf
- en uzak tarafı
- En yakın-köşe
- en uzak köşe
Örnek
Farklı boyut anahtar kelimeler içeren bir radyal gradyan:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Kendin dene " bir radyal gradyan tekrarı
repeating-radial- gradient() işlevi, radyal gradyanlardır tekrar kullanılır:
Örnek
Tekrar eden radyal gradyan:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6» Egzersiz 7 »