Property CSS : Part 3

Assalamualaikum Wr. Wb.
Saya akan melanjutkan tentang CSS, namun akan sedikit loncat ke CSS versi 3 / CSS3. Yaitu colors, gradient dan shadow.

1. CSS3 Colors

Dalam postingan lama, telah dijelaskan bahwa warna dapat dideklarasikan dengan value rgb, warna standard, dan hexadecimal. Namun agak sedikit berbeda dengan yang sebelumnya. Selain itu CSS3 juga memperkenalkan :

• RGBA colors
• HSL colors
• HSLA colors
• opacity

 untuk RGBA sendiri tidak ada perbedaan yang signifikan, hanya pada penambahan alpha pada valuenya.Parameter alpha yaitu 0.0 ( transparant) dan 1.0 ( nontransparant).
contoh :

Untuk HSL singkatan dari Hue, Saturation dan Lightness.

1. Hue adalah gelar pada roda warna (dari 0 sampai 360):
   • 0 (atau 360) merah
   • 120 hijau
   • 240 berwarna biru
2. Saturasi adalah nilai persentase: 100% adalah penuh warna.
3. Lightness juga persentase; 0% gelap (hitam) dan 100% adalah putih.

contoh :

Untuk HSLA color, merupakan gabungan dari HSL dan alpha. Seperti di RGBA tadi parameter alpha masih sama.
contoh :

Untuk opocity, diterapkan untuk semua elemen agar menjadi transparant atau buram.

Contoh :

2. CSS3 Gradient
Property ini berguna agar background anda memiliki transisi warna yang halus. Property ini memiliki 2 type yaitu linier gradient ( deklarasi dari atas, bawah, kanan dan kiri) dan radial gradient ( ditentukan dari tengah elemen).
Propertynya seperti :

• linier-gradient
• radial-gradient
• repeating-linier-gradient
• repeating-linier-gradient

Namun, property ini masih bergantung pad aversi web browser yang digunakkan. Jadi perhatikan untuk pemakaiannya ya teman.

Sekian ya teman, terima kasih.
Referensi :
http://www.w3schools.com/css/css3_gradients.asp
http://www.w3schools.com/css/css3_colors.asp