Belajar menggunakan gradient pada CSS3

belajar css

Apa itu gradient css ?

Pada CSS3 terdapat fitur baru yaitu gradient. Ini digunakan untuk mengahasilkan transisi yang halus antara dua atau lebih warna. Elemen yang diberi style gradient bisa diatur ke arah yang di inginkan, dan dengan menggunakan gradient output yang dihasilkan akan lebih cepat karena browser hanya memainkan warna bukan gambar. Gradien sendiri terdapat dua jenis, yaitu: linear dan radial.

CSS3 linear-gradient

Untuk membuat gradient, Anda harus menentukan setidaknya dua pemberhentian warna, yang dimaksud dengan pemberhentian warna ialah memilih warna yang Anda inginkan untuk dibuat transisi warna yang halus. Anda juga bisa mengatur posisi titik awal dan arah sudut dimana gradient ditetapkan.

Syntax linear-gradient:

background-image: linear-gradient( direction, color-stop1, color-stop2, … );

Ada browser versi lama yang tidak mendukung gradient, sebagai fallbacknya digantikan dengan warna background-color.

Linear-gradient – top to bottom (default)

Contoh berikut membuat linear-gradient dimulai di bagian atas lalu ke bawah. Dimulai dari warna hijau lalu transisi ke kuning:

Contoh:

Editor Online
  1. #linear {
  2. background-image: linear-gradient(green, yellow);
  3. }

Linear-gradient – left to right

Contoh berikut membuat linear-gradient dimulai di bagian kiri lalu ke kanan. Dimulai dari warna hijau lalu transisi ke kuning:

Contoh:

Editor Online
  1. #linear {
  2. background-image: linear-gradient(to right, green, yellow);
  3. }

Linear-gradient – diagonal

Anda bisa membuat gradient diagonal dengan menetapkan kedua posisi awal horizontal dan vertikal.

Contoh berikut membuat linear-gradient dimulai di bagian atas kiri lalu ke kanan bawah. Dimulai dari warna hijau lalu transisi ke kuning:

Contoh:

Editor Online
  1. #linear {
  2. background-image: linear-gradient(to bottom right, green, yellow);
  3. }

Mengatur arah linear-gradient

Anda bisa mengontrol arah sudut gradient, Sudut 0deg menciptakan gradient dari bawah ke atas dan nilai positif mewakili rotasi searah jarum jam. Jika nilai negatif sebaliknya. Jadi 45deg menciptakan gradient dari kiri ke kanan. Berbeda dengan -45deg menciptakan gradient dari kanan ke kiri.

Syntax mengatur arah linear-gradient:

background-image: linear-gradient( angle/sudut, color-stop1, color-stop2, … );


Contoh berikut membuat linear-gradient ditentukan sebagai angel atau sudut antara garis horizontal dan garis gradient. Dimulai dari warna hijau lalu transisi ke kuning:

Contoh:

Editor Online
  1. #linear1 {
  2. background-image: linear-gradient(0deg, green, yellow);
  3. }
  4. #linear2 {
  5. background-image: linear-gradient(60deg, green, yellow);
  6. }
  7. #linear3 {
  8. background-image: linear-gradient(120deg, green, yellow);
  9. }
  10. #linear4 {
  11. background-image: linear-gradient(180deg, green, yellow);
  12. }
  13. #linear5 {
  14. background-image: linear-gradient(-90deg, green, yellow);
  15. }

Menggunakan beberapa penghentian warna

Perhentian warna adalah titik di sepanjang garis gradient yang akan memiliki warna tertentu di lokasi itu. Lokasi pemberhentian warna dapat ditentukan sebagai persentase, atau sebagai panjang absolut. Anda dapat menentukan sebanyak mungkin penghentian warna untuk mencapai efek yang diinginkan.

Contoh:

Editor Online
  1. #linear {
  2. background-image: linear-gradient(red, yellow 40%, orange 50%);
  3. }

Mengulangi linear-gradient

Anda bisa mengulangi linear-gradient dengan menggunakan fungsi repeating-linear-gradient().

Contoh:

Editor Online
  1. #linear1 {
  2. background-image: repeating-linear-gradient(green, orange 10%, red 20%);
  3. }
  4. #linear2 {
  5. background-image: repeating-linear-gradient(45deg, orange 10%, red 20%);
  6. }
  7. #linear3 {
  8. background-image: repeating-linear-gradient(90deg, orange 10%, red 20%);
  9. }

CSS3 radial-gradient

Dengan radial-gradient Anda bisa membuat lingkaran yang berpusat di tengah, dan menyebar ke luar dalam bentuk lingkaran atau elips. Untuk membuat radial-gradient Anda juga harus menentukan setidaknya dua pemberhentian warna.

Syntax radial-gradient:

background-image: radial-gradient( shape size at position, start-color, …, last-color );

Ada browser versi lama yang tidak mendukung gradient, sebagai fallbacknya digantikan dengan warna background-color.

Radial-gradient – Pemberhentian warna yang merata (default)

Contoh berikut menunjukkan radial-gradient dengan pemberhentian warna yang merata:

Contoh:

Editor Online
  1. #radial {
  2. background-image: radial-gradient(red, yellow, green);
  3. }

Radial-gradient – Pemberhentian warna yang berbeda

Contoh berikut menunjukkan radial-gradient dengan pemberhentian warna yang berbeda:

Contoh:

Editor Online
  1. #radial {
  2. background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  3. }

Mengatur bentuk radial-gradient

Anda bisa mengatur bentuk radial-gradient() untuk menentukan apakah akan berbentuk circle atau ellipse. Secara default bentuk dari radial-gradient adalah ellipse. Berikut kedua contoh tersebut:

Contoh:

Editor Online
  1. #radial-ellipse {
  2. background-image: radial-gradient(red, yellow, green);
  3. }
  4. #radial-circle {
  5. background-image: radial-gradient(circle, red, yellow, green);
  6. }

Penggunaan kata kunci ukuran berbeda

Anda bisa mengatur ukuran fungsi radial-gradient() dengan memasukan kata kunci. Ukuran dapat diatur menggunakan unit atau kata kunci sebagai berikut:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Contoh:

Editor Online
  1. #closest-side {
  2. background-image: radial-gradient(closest-side at 60% 55%, red, yellow, brown);
  3. }
  4. #farthest-side {
  5. background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, brown);
  6. }
  7. #closest-corner {
  8. background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, brown);
  9. }
  10. #farthest-corner {
  11. background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, brown);
  12. }

Mengulangi radial-gradient

Anda bisa mengulangi radial-gradient dengan menggunakan fungsi repeating-radial-gradient().

Contoh:

Editor Online
  1. #radial {
  2. background-image: repeating-radial-gradient(yellow, red 15%, black 20%);
  3. }

Leave a Reply

Your email address will not be published. Required fields are marked *