CSS3 Gradien membiarkan anda 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 untuk download dan bandwith. Selain itu, unsur-unsur dengan gradien terlihat lebih baik ketika diperbesar, karena gradien yang dihasilkan oleh browser.
CSS3 mendefinisikan dua jenis gradien:
- Linear gradients (naik /turun / kanan / kiri / diagonal)
- Radial gradients (Di definisikan oleh pusat mereka)
CSS3 Linear Gradients
Untuk membuat gradien linear anda harus menentukkan setidaknya dua color stops. Color stops adalah warna yang anda inginkan untuk membuat transisi halus. Anda juga dapat mengatur titik awal dan arah (atau sudut) dengan efek gradien.
Syntax
Linear Gradient - Top to Bottom (this is default)
Contoh berikut menunjukkan gradien linear yang dimulai dari bagian atas. Dimulai dari merah, transisi ke kuning.
Linear Gradient - Left to Right
Contoh berikut menunjukkan gradien linear yang dimulai dari kiri. Dimulai dari merah, transisi ke kuning.
Linear Gradient - Diagonal
Anda dapat membuat gradien diagonal dengan menentukan baik posisi awal horizontal dan vertical.
Contoh berikut menunjukkan gradien linear yang dimulai pada kiri atas (kemudian ke kanan bawah). Dimulai dari merah, transisi ke kuning.
Using Angels
Jika anda ingin mengontrol arah gradien, anda dapat menentukan sudut, bukan arah yang telah di tetapkan (ke atas, bawah, kanan, kiri, dll)
Syntax
Sudut ditentukan sebagai sudut antara garis horizontal dan garis gradien.
Contoh berikut menunjukkan bagaimana menggunakan sudut pada gradien linear:
Using Multiple Color Stops
Contoh berikut menunjukkan gradien linear (dari atas ke bawah) dengan beberapa color stops:
Contoh berikut menunjukkan cara membuat gradien linear (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:
Using Transparency
Gradien CSS3 juga mendukung transparansi yang dapat digunakan untuk memberikan efek memudar/tranparan.
Untuk menambah transparasi kita menggunakan fungsi RGBA ( ) untuk menentukan color stops. Parameter terakhir dalam fungsi RGBA ( ) dapat menjadi nilai dari 0 ke 1 dan mendeskripsikan transparasi warna: 0 menunjukan transparasi warna penuh, 1 menunjukkan warna penuh (tidak ada transparasi).
Contoh berikut menunjukkan gradien linear yang dimulai dari kiri. Dimulai sepenuhnya transparan, transisi ke warna penuh merah
Repeating a Linear - Gradient
Repeating a Linear - Gradient adalah fungsi yang digunakan untuk mengulang gradien linear.
CSS3 Radial Gradients
Sebuah gradien radial di definisikan oleh pusatnya.
Untuk membuat gradien radial anda juga harus menentukan setidaknya dua color stops.
Radial Gradient - Differently Spaced Color Stops
Set Shape
Parameter bentuk mendefinisikan bentuk. Hal ini dapat mengambil lingkaran nilai / elips. Nilai default adalah elips.
Use Of Different Size Keywords
Parameter ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:
- Closest-side
- Farthest-side
- Closest-corner
- Farthest-corner
Repeating a radial gradient () adalah fungsi yang digunakan untuk mengulang gradien radial:
