Belajar CSS3 - RGBA dan Gardien

RGBA

Sebagai pengembang web, saya yakin Anda tahu apa artinya RGB. Red Green Blue. Tiga warna dasar yang menggabungkan untuk memberikan semua warna lain yang kita gunakan dalam bentuk digital. Anda dapat menentukan warna dalam format heksadesimal (#RRGGBB) atau dalam bentuk numerik - rgb (x, y, z). tapi apa yang terjadi ketika Anda ingin membuat elemen tembus? Dengan kata lain Anda ingin menjatuhkan opacity dari elemen. Salah satu solusi lurus ke depan untuk melakukan itu akan menentukan properti opacity dari elemen. background: rgb (222,43,91); opacity: 0.5; Di bawah ini adalah screenshot dari apa yang kita dapatkan ketika kita menggunakan properti opacity.

Opacity menetapkan nilai opacity untuk elemen. Hal ini membuat teks dalam div juga transparan.
Untuk mengatasi masalah ini, CSS3 telah memperkenalkan metode baru yang memungkinkan Anda untuk menentukan Alpha-channel warna. Ini menetapkan nilai opacity hanya untuk deklarasi tertentu.
background: RGBA (222,43,91, 0,5);

Berikut adalah screenshot dari contoh yang sama di atas tapi kali ini kami telah menggunakan nilai transparansi alpha bukan nilai opacity.

Catatan: Dalam contoh di atas, saya telah mengatur warna latar belakang menggunakan model warna RGBA. Hal ini dapat digunakan di mana saja bahwa Anda menentukan warna. Penggunaan lain yang menarik dari ini adalah ketika Anda memiliki keterangan atas gambar.

Gradien

Salah satu pola estetis menyenangkan untuk mata adalah gradien. Radial atau linear, mereka juga dapat digunakan untuk menarik perhatian pengguna untuk daerah tertentu. Sampai beberapa waktu lalu, kami harus menggunakan gambar jika kita ingin memiliki gradien di situs. Masalah dengan yang jelas, jadi saya tidak akan masuk ke mereka. CSS3 diselesaikan dengan memungkinkan kita untuk membuat linear dan radial gradien. Jika Anda membutuhkan jenis lain dari gradien, maka Anda akan mungkin masih harus menggunakan gambar.

Linear Gradient
Gradien tidak sederhana properti di CSS, tetapi mereka pasti salah satu yang paling menarik dari mereka diperkenalkan di CSS3. Ada beberapa nilai yang Anda perlu menentukan dan itu hanya akan memperburuk ketika Anda melihat gradien radial.
background: -moz-linear-gradient (pos, color1 percentage1, COLOR2 percentage2);
pos = posisi warna pertama, memberikan arahan kepada gradien
color1 = warna dasar
= Percentage1 memudar dimulai (%)
COLOR2 = warna sekunder
= Percentage2 memudar dimulai (%)

Webkit browser memiliki sintaks yang sedikit berbeda, namun mereka mengambil parameter yang sama. pengguna Internet Explorer, akan menunggu sampai pemirsa Anda pindah ke IE 10 untuk dapat menggunakan fitur ini.
background: -moz-linear-gradient (top, # 768C6A 0%, # 91D6BC 100%);
background: -webkit-gradien (linier, kiri atas, kiri bawah, dari (# 768C6A), untuk (# 91D6BC));
background: -o-gradien (# 768C6A, # 91D6BC);

Berikut adalah screenshot dari apa yang menjadikan kode di atas.

Radial Gradient
Mirip dengan gradien linier, dapat dibuat gradien radial pada beberapa browser. Sejauh ini, hanya Mozilla dan Webkit browser mendukung gradien radial. Mengingat dukungan browser terbatas, banyak pengembang web memilih untuk terus menggunakan gambar untuk gradien radial.

Sementara gradien mungkin tampak sedikit rumit, mereka sangat berguna untuk pengembangan web. Model warna baru juga membantu mengurangi markup dan membuat kode lebih semantik ketika Anda ingin memiliki latar belakang yang sedikit transparan.