CSS3 gradien Anda dapat menampilkan transisi halus antara dua atau lebih warna tertentu.
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)
CSS3 Gradien Linear
Untuk membuat gradien linier Anda harus menentukan setidaknya dua berhenti warna. Berhenti antara warna ke warna yang Anda inginkan untuk membuat transisi halus. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
Sintaksis
background: linear-gradient( direction , color-stop1 , color-stop2, ... );
Gradient Linear - Atas ke Bawah (ini adalah default)
Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai kuning, transisi ke hijau:
.grad{
height: 50px;
background: -webkit-linear-gradient(yellow,green); /*untuk chrome*/
background: -o-linear-gradient(yellow,green); /*untuk opera*/
background: -moz-linear-gradient(yellow,green); /*untuk firefox*/
background: -ms-linear-gradient(yellow,green); /*untuk IE*/
background: linear-gradient(yellow,green); /*syntak standar*/
}
Gradient Linear - Kiri ke Kanan
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai kuning, transisi ke hijau:
.grad{
height: 50px;
background: -webkit-linear-gradient(left, yellow,green); /*untuk chrome*/
background: -o-linear-gradient(left, yellow,green); /*untuk opera*/
background: -moz-linear-gradient(left, yellow,green); /*untuk firefox*/
background: -ms-linear-gradient(left, yellow,green); /*untuk IE*/
background: linear-gradient(to right, yellow,green); /*syntak standar*/
}
Gradient Linear - 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 kuning, transisi ke hijau:
.grad{
height: 50px;
background: -webkit-linear-gradient(left top, yellow, green); /*untuk chrome*/
background: -o-linear-gradient(left top, yellow, green); /*untuk opera*/
background: -moz-linear-gradient(left top, yellow, green); /*untuk firefox*/
background: -ms-linear-gradient(left top, yellow, green); /*untuk IE*/
background: linear-gradient(to left top, yellow, green); /*syntak standar*/
}
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, akan berlawanan arah jarum jam. Dengan kata lain, 0deg menciptakan bawah ke atas gradien, semetara 90deg menghasilkan kiri ke kanan gradien.
Contoh berikut menunjukkan bagaimana menggunakan sudut pada gradien linier:
.grad{
height: 50px;
background: -webkit-linear-gradient(180deg, yellow, green); /*untuk chrome*/
background: -o-linear-gradient(180deg, yellow, green); /*untuk opera*/
background: -moz-linear-gradient(180deg, yellow, green); /*untuk firefox*/
background: -ms-linear-gradient(180deg, yellow, green); /*untuk IE*/
background: linear-gradient(180deg, yellow, green); /*syntak standar*/
}
Menggunakan Beberapa Stops Warna
Contoh berikut menunjukkan cara mengatur beberapa berhenti warna:
.grad{
height: 50px;
background: -webkit-linear-gradient(blue, yellow, green); /*untuk chrome*/
background: -o-linear-gradient(blue, yellow, green); /*untuk opera*/
background: -moz-linear-gradient(blue, yellow, green); /*untuk firefox*/
background: -ms-linear-gradient(blue, yellow, green); /*untuk IE*/
background: linear-gradient(blue, yellow, green); /*syntak standar*/
}
Contoh berikut menunjukkan cara membuat gradien linier dengan warna pelangi.
.grad{
height: 50px;
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /*untuk chrome*/
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /*untuk opera*/
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /*untuk firefox*/
background: -ms-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /*untuk IE*/
background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); /*syntak standar*/
}
Menggunakan Transparansi
Gradien CSS3 juga mendukung transparansi, yang dapat menggunakan untuk membuat efek memudar.
Untuk menambah transparansi, kita menggunakan RGBA () fungsi untuk menentukan berhenti warna. Parameter terakhir di RGBA () fungsi dapat menjadi nilai dari 0 ke 1, dan mendefinisikan transparansi warna: 0 menunjukkan transparansi penuh, 1 menunjukkan penuh warna (tidak ada transparansi).
Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Dimulai sepenuhnya transparan, transisi ke merah penuh warna:
.grad{
height: 50px;
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*untuk chrome*/
background: -o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*untuk opera*/
background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*untuk firefox*/
background: -ms-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*untuk IE*/
background: linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*syntak standar*/
}
Mengulangi linear-gradient
repeating-linear-gradient () adalah fungsi yang digunakan untuk mengulang gradien linier:
.grad{
height: 50px;
background: -webkit-linear-gradient(red, yellow 10%, green 20%); /*untuk chrome*/
background: -o-linear-gradient(red, yellow 10%, green 20%); /*untuk opera*/
background: -moz-linear-gradient(red, yellow 10%, green 20%); /*untuk firefox*/
background: -ms-linear-gradient(red, yellow 10%, green 20%); /*untuk IE*/
background: linear-gradient(red, yellow 10%, green 20%); /*syntak standar*/
}
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.
.grad{
height: 50px;
background: -webkit-radial-gradient(red, yellow, green ); /*untuk chrome*/
background: -o-radial-gradient(red, yellow, green ); /*untuk opera*/
background: -moz-radial-gradient(red, yellow, green ); /*untuk firefox*/
background: -ms-radial-gradient(red, yellow, green ); /*untuk IE*/
background: radial-gradient(red, yellow, green ); /*syntak standar*/
}
Radial Gradient - Berbeda Spaced Warna Stops
Contoh
Sebuah gradien radial dengan warna berbeda:
.grad{
height: 50px;
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60% ); /*untuk chrome*/
background: -o-radial-gradient(red 5%, yellow 15%, green 60% ); /*untuk opera*/
background: -moz-radial-gradient(red 5%, yellow 15%, green 60% ); /*untuk firefox*/
background: -ms-radial-gradient(red 5%, yellow 15%, green 60% ); /*untuk IE*/
background: radial-gradient(red 5%, yellow 15%, green 60%); /*syntak standar*/
}
Set Bentuk
Parameter bentuk mendefinisikan bentuk. Hal ini dapat mengambil lingkaran nilai atau elips. Nilai default adalah elips.
Contoh
Sebuah gradien radial dengan bentuk lingkaran:
.grad{
height: 50px;
background: -webkit-radial-gradient(circle, red, yellow, green ); /*untuk chrome*/
background: -o-radial-gradient(circle, red, yellow, green ); /*untuk opera*/
background: -moz-radial-gradient(circle, red, yellow, green ); /*untuk firefox*/
background: -ms-radial-gradient(circle, red, yellow, green ); /*untuk IE*/
background: radial-gradient(circle, red, yellow, green ); /*syntak standar*/
}
Penggunaan Kata kunci Ukuran Berbeda
Parameter Ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Contoh
Sebuah gradien radial dengan kata kunci ukuran yang berbeda:
.grad1{
height: 50px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black ); /*untuk chrome*/
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black ); /*untuk opera*/
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black ); /*untuk firefox*/
background: -ms-radial-gradient(60% 55%, closest-side,blue,green,yellow,black ); /*untuk IE*/
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black ); /*syntak standar*/
}
.grad2{
height: 50px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black ); /*untuk chrome*/
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black ); /*untuk opera*/
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black ); /*untuk firefox*/
background: -ms-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black ); /*untuk IE*/
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black ); /*syntak standar*/
}
Mengulangi radial-gradient
The mengulangi-radial-gradien () adalah fungsi yang digunakan untuk mengulang gradien radial:
Contoh
Sebuah mengulangi radial gradient:
.grad{
height: 50px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /*untuk chrome*/
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /*untuk opera*/
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /*untuk firefox*/
background: -ms-repeating-radial-gradient(red, yellow 10%, green 15%); /*untuk IE*/
background: repeating-radial-gradient(red, yellow 10%, green 15%); /*syntak standar*/
}
0 komentar:
Posting Komentar