Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Fitur Property Color Dalam CSS3

Warna dalam CSS yang biasa kita pakai menggunakan angka heksadesimal yang menggantikan kode untuk kombinasi warna Red, Green, Blue (RGB). Nilai paling rendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 & paling tertinggi adalah 255. Properti ini digunakan untuk memberikan pewarnaan. Dalam CSS3 ada beberapa properti color yang bisa kita gunakan & akan saya bahas dibawah ini.

HSL & HSLA Color

HSL memiliki 3 nilai yaitu Hue (derajat warna), Saturation (nilai persentasi), & Lightness (nilai presentasi warna). HSL lebih ditujukan untuk penggunaan pewarnaan pada suatu background.

HSLA fungsinya sama dengan HSL, hanya saja pada property ini terdapat tambahan Alpha yang digunakan untuk memberikan ketebalan pada warna sehingga menyerupai efek bayangan dibelakang objek. Contoh penggunaan pewarnaan HSL & HSLA dapat anda praktekan dengan menuliskan kode dibawah ini kedalam HTML & CSS Live Editor.

<p style="background-color:hsl(120,65%,75%);color:#000;">Ini menggunakan background dengan HSL Color</p>
<p style="background-color:hsla(120,65%,75%,0.3);color:#000;">Ini menggunakan background dengan HSLA Color</p>

RGBA Color

RGBA Color adalah singkatan dari Red, Green, Blue, & Alpha diartikan sebagai ruang warna. Fungsinya untuk memberi warna background pada suatu elemen. Apa keunggulan RGBA dengan lainnya ? RGBA bisa diatur nilai transparan pada background tanpa membuat semua isi konten tersebut menjadi transparan. Untuk lebih jelasnya silahkan coba dengan menuliskan kode dibawah ini kedalam HTML & CSS Live Editor.

<p style="-moz-background:linear-gradient(top,rgba(120,65,75,0)0%,rgba(120,65,75,0)0%,rgba(120,65,75,0.3)5%,rgba(120,65,75,0.4)10%,rgba(120,65,75,0.8)15%,rgba(120,65,75,1)20%,;color:#000;">Ini menggunakan background gradient dengan RGBA Color</p>

Opacity

Opacity adalah salah satu properti CSS3. Opacity berfungsi untuk mentransparankan elemen tergantung dengan tingkat transparansinya. Opacity ini tidak bisa berjalan di IE, namun anda bisa menggunakan Opacity ini dengan menambahkan perintah filter. Untuk lebih jelasnya, silahkan praktekkan kode dibawah ini & jalankan melalui HTML & CSS Live Editor.

<p style="background:#000;border:1px solid #000;opacity:0.5;color:#fff;">Ini menggunakan background opacity</p>

Kita bisa kreasikan fitur CSS3 ini sesuai dengan ide kita. Namun yang terpenting, pahami dulu syntax dasar CSS3 ini. Selanjutnya saya akan menuliskan tentang Property Text Dalam CSS3 baik text-shadow dll.

3 Comments

  1. Banten IT SolutionsReply

    Ingin membuat web / blog keren seperti blog ini ? Kunjungi http://www.banten-it.com sekarang juga !

  2. RirinReply

    sepertinya jago banget nich mas nurul kalau membahas tentang color hehehe :D
    asalkan jangan color ijo aja ya mas hehehe :D

    • Nurul ImamReply

      Itu kan beda jurusan mba :p

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>