CSS3 gradien membiarkan Anda menampilkan transisi halus antara dua atau lebih tertentu warna.
Sebelumnya, Anda harus menggunakan gambar untuk efek ini. Namun, dengan menggunakan gradien CSS3 Anda dapat mengurangi waktu download dan penggunaan bandwidth. Selain itu, unsur-unsur dengan gradien terlihat lebih baik ketika diperbesar, karena gradien yang dihasilkan oleh browser.
CSS3 mendefinisikan dua jenis gradien:
- Linear Gradien (turun / naik / kiri / kanan / diagonal)
- Gradien radial (didefinisikan oleh pusat mereka)
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, -moz- , atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| 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 Gradien Linear
Untuk membuat gradien linier Anda harus menentukan setidaknya dua berhenti warna. berhenti warna warna yang Anda inginkan untuk membuat transisi halus antara. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
Sintaksis
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Linear Gradient - Atas ke Bawah (ini adalah default)
Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi ke kuning:
Contoh
#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 */
} Cobalah sendiri " Linear Gradient - Kiri ke Kanan
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai merah, transisi ke kuning:
Contoh
#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 */
} Cobalah sendiri " Linear Gradient - Diagonal
Anda dapat membuat gradien diagonal dengan menentukan baik posisi awal horisontal dan vertikal.
Contoh berikut menunjukkan gradien linier yang dimulai pada kiri atas (dan pergi ke kanan bawah). Dimulai merah, transisi ke kuning:
Contoh
#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 */
} Cobalah sendiri " menggunakan Angles
Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, bukan arah yang telah ditetapkan (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll).
Sintaksis
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
Sudut ditentukan sebagai sudut antara garis horizontal dan garis gradien.
Contoh berikut menunjukkan bagaimana menggunakan sudut pada gradien linier:
Contoh
#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 */
} Cobalah sendiri " Menggunakan Beberapa Stops Warna
Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa berhenti warna:
Contoh
#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 */
} Cobalah sendiri " Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:
Contoh
#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);
} Cobalah sendiri " menggunakan Transparansi
gradien CSS3 juga mendukung transparansi, yang dapat digunakan untuk menciptakan efek memudar.
Untuk menambah transparansi, kita menggunakan rgba() fungsi untuk menentukan berhenti warna. Parameter terakhir di rgba() function dapat menjadi nilai dari 0 ke 1, dan mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan warna penuh (tidak ada transparansi).
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai sepenuhnya transparan, transisi ke warna merah penuh:
Contoh
#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*/
} Cobalah sendiri " Mengulangi linear-gradient
The repeating-linear-gradient() adalah fungsi yang digunakan untuk mengulang gradien linier:
Contoh
Sebuah mengulangi gradien linier:
#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%);
} Cobalah sendiri " CSS3 Radial Gradien
Sebuah gradien radial didefinisikan oleh pusatnya.
Untuk membuat gradien radial Anda juga harus menentukan setidaknya dua berhenti warna.
Sintaksis
background: radial-gradient( shape size at position, start-color, ..., last-color );Secara default, bentuknya elips, ukuran terjauh-sudut, dan posisi adalah pusat.
Radial Gradient - Merata Spaced Warna Stops (ini adalah default)
Contoh berikut menunjukkan gradien radial dengan berhenti warna merata spasi:
Contoh
#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 */
} Cobalah sendiri " Radial Gradient - Berbeda Spaced Warna Stops
Contoh berikut menunjukkan gradien radial dengan berhenti warna berbeda spasi:
Contoh
#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 */
} Cobalah sendiri " set Shape
Parameter bentuk mendefinisikan bentuk. Hal ini dapat mengambil lingkaran nilai atau elips. Nilai default adalah elips.
Contoh berikut menunjukkan gradien radial dengan bentuk lingkaran:
Contoh
#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 */
} Cobalah sendiri " Penggunaan Kata kunci Ukuran Berbeda
Parameter ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:
- terdekat-side
- terjauh-side
- terdekat-sudut
- terjauh-sudut
Contoh
Sebuah gradien radial dengan kata kunci ukuran yang berbeda:
#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);
} Cobalah sendiri " Mengulangi radial-gradient
The repeating-radial-gradient() adalah fungsi yang digunakan untuk mengulang gradien radial:
Contoh
Sebuah mengulangi radial gradient:
#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%);
} Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6» Latihan 7 »