CSS3 Gradient

♠ Posted by Unknown at 18.30

CSS3 Gradient

      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 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 warna adalah warna yang Anda inginkan untuk membuat transisi halus antara. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.

Syntax 

Linear Gradient - Top to Bottom (this is default)

Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi ke kuning:  

 

Linear Gradient - Left to Right

Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Dimulai merah, transisi ke kuning: 

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: 

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).

 Syntax

Sudut ditentukan sebagai sudut antara garis horizontal dan garis gradien. Contoh berikut menunjukkan cara menggunakan sudut pada gradien linier:
  

Menggunakan Beberapa Stop Warna

Contoh berikut menunjukkan gradien linier (dari atas ke bawah) dengan beberapa berhenti warna: 

Contoh berikut menunjukkan cara membuat gradien linier (dari kiri ke kanan) dengan warna pelangi dan beberapa teks:

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 () 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:
  

Mengulangi linear-gradient

The berulang-linear-gradient () adalah fungsi yang digunakan untuk mengulang gradien linier: 

CSS3 Gradien Radial

Sebuah gradien radial didefinisikan oleh pusatnya.

Untuk membuat gradien radial Anda juga harus menentukan setidaknya dua berhenti warna.

Syntax

Secara default, bentuknya elips, ukuran terjauh-sudut, dan posisi adalah pusat.


Radial Gradient - Merata Spaced Warna Stop (ini adalah default)

Contoh berikut menunjukkan gradien radial dengan warna berhenti merata spasi: 

Radial Gradient - Berbeda Spaced Warna Stops
Contoh berikut menunjukkan gradien radial dengan warna berbeda berhenti spasi:

Set Shape (Set Bentuk)
Parameter bentuk mendefinisikan bentuk. Hal ini dapat mengambil lingkaran nilai atau elips. Nilai default adalah elips.

Contoh berikut menunjukkan gradien radial dengan bentuk lingkaran:

Penggunaan Kata kunci Ukuran Berbeda
Parameter Ukuran mendefinisikan ukuran gradien. Hal ini dapat mengambil empat nilai:

• closest-side (sisi terdekat)
• farthest-side (sisi terjauh)
• closest-corner (sudut terdekat)
• farthest-corner (sudut terjauh)

Mengulangi radial-gradien
Mengulangi-radial-gradien () adalah fungsi yang digunakan untuk mengulang gradien radial:

 



Sumber : http://www.w3schools.com