Warna RGBA Pada CSS3
Alpha pada RGBA fungsinya sama dengan Opacity, yaitu digunakan untuk mengatur tingkat transparansi dari warna RGB yang sudah kita tentukan.
Batasan nilai yang digunakan pada Alpha adalah 0 sampai dengan 1. Jika kita menggunakan nilai 1 pada Alpha maka akan menghasilkan efek transparan 0% alias terlihat jelas, dan sebaliknya jika menggunakan 0 maka akan menghasilkan efek transparan 100% alias tidak terlihat.
Penggunaan warna RGBA sama seperti CSS sebelumnya yaitu bisa digunakan untuk semua property CSS yang bisa diwarnai. Misalnya text, border dan backgound.
Jika menggunakan RGB saja:
div {
background-color: rgb(255,0,0);
opacity: 0.5;
}
Maka jika menggunakan RGBA:
div {
background-color: rgba(255,0,0,0.5);
}
Penulisan 0.5 pada alpha juga bisa kita ganti dengan .5 saja.
Contoh penerapannya:
<html>
<head>
<title>Mencoba Warna rgba</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
background:#000;
}
.jelas {
color:rgba(255, 255, 255, 1);
}
.pudar {
color:rgba(255, 255, 255, .6);
}
.sangatpudar {
color:rgba(255, 255, 255, .3);
}
.hilang {
color:rgba(255, 255, 255, 0);
}
</style>
</head>
<body>
<h1 class="jelas">Khoiruddin.Com</h1>
<h1 class="pudar">Khoiruddin.Com</h1>
<h1 class="sangatpudar">Khoiruddin.Com</h1>
<h1 class="hilang">Khoiruddin.Com</h1>
</body>
</html>
Hasilnya:
0 komentar:
Posting Komentar