Background color property merupakan efek background yang paling sering digunakan dan hingga saat ini dikembangkan dengan sangat intensif melalui css3. Berkat pengembangan tersebut penggunaannya menjadi semakin variatif dan dalam beberapa hal bahkan mampu menggantikan fungsi efek background yang sebelumnya harus menggunakan background image seperti yang terjadi pada background gradient. CSS3 background gradient pada saat ini banyak digunakan untuk menggantikan fungsi efek dari background gradient dari sebuah image. Kelebihan utama background color dibandingkan background image adalah pada beban yang jauh lebih ringan sehingga beban loading blog tak terlalu bertambah berat. Bahkan, banyak image kini bisa dibuat hanya dengan memanfaatkan kode css dan css3 yang melibatkan property backgrouns color, background gradient dan border-radius property.
Dalam penggunaanya ada beberapa jenis background color yang dapat dipergunakan dan hampir semuanya telah mendapat dukungan penuh dari browser ternama seperti Mozilla, Google Chrome, Safari, Opera dan IE.
Dalam penggunaanya ada beberapa jenis background color yang dapat dipergunakan dan hampir semuanya telah mendapat dukungan penuh dari browser ternama seperti Mozilla, Google Chrome, Safari, Opera dan IE.
Background color yang saat ini biasa dipergunakan
- Names Color (red, green, blue, etc)
- Hexadecimal/Hex colors (#f00, #333333, #000, etc)
- RGB colors ( rgb(255,255,0), rgba(0,0,50), rgb(20%,40%,80%), etc)
- RGBA colors ( rgba(255,0,255,0.3), rgba(40,40,185,0.8), etc)
- HSL colors » hue, saturation, lightness ( hsl(70,20%,85%), hsl(110,50%,55%), etc)
- HSLA colors ( hsla(70,20%,85%,0.6), hsl(110,50%,55%,0.2), etc)
h3{
background:yellow;
padding:4px 10px;
color:#000;
}
p{
background:#333;
padding:4px 10px;
color:#fff;
}
.boks-1{ background:rgb(0,255,255); width:80%; padding:5px; margin:20px auto 0; text-align:center; font-size:22px; color:rgb(0,0,155); } .boks-2{ background:rgba(0,255,255,0.4); width:80%; padding:5px; margin:20px auto 0; text-align:center; font-size:22px; color:#fff; } .boks-3{ background:hsl(110,55%,85%); width:80%; padding:5px; margin:20px auto 0; text-align:center; font-size:27px; color:rgb(0,0,155); } .boks-4{ background:hsla(115,165%,45%,0.5); width:80%; padding:5px; margin:20px auto 0; text-align:center; font-size:32px; color:yellow; }
Keterangan:
- Background rgba & hsla akan membentuk background dengan efek transparansi. Kode terakhir merupakan kekuatan transparansi yang nilainya antara 0 s/d 1.
- background:rgba(0,255,255,0.4);
- background:hsla(115,165%,45%,0.5); - Semakin kecil nilai maka background semakin transparan dan begitu juga sebaliknya jika semakin besar maka transparansi semakin berkurang (kode berwarna merah).
Di bawah ini ada beberapa contoh background color. Edit kode untuk mendapatkan hasil berbeda!
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar