Ragam Bisnis Online Blogger Yang Populer Saat Ini Dan Paling Banyak Peminat Serta Popular Dengan Menggunakan Media Website

Hal Baru dari Cascading Style Sheets - CSS3

Posted by farah aksesoris 0 komentar

CSS3 merupakan standarisasi versi terbaru dari CSS yang dikembangkan oleh W3C dan masih hanya diimplementasikan sebagian oleh browser-browser Website. Beberapa point berikut merupakan hal-hal yang sangat menarik untuk dibahas dalam konteks CSS3.

RGBA

RGBA merupakan cara memasukan parameter color/warna terbaru yang didukung oleh CSS3, pada CSS versi sebelumnya terdapat RGB yang menyatakan Red,Green,Blue. Pada RGBA ditambah satu parameter lagi, yaitu Alpha atau Opacity. Berikut adalah cara penulisannya:

background: rgba(0, 100, 100, .5);
color: rgba(200, 0, 0, 0.75);

rgba backgroundDengan menggunakan RGBA Kita dapat memilih warna untuk background atau text color dengan dukungan transparansi.

 

 

Text Shadow
Dengan text shadow Kita dapat menambahkan bayangan pada teks di halaman web Kita. Cara penulisannya adalah sebagai berikut:

text-shadow: 2px 3px 4px #444;

text shadowDimana 2px adalah X-offset, 3px adalah Y-offset, 4px adalah Blur, dan #444 adalah warna text shadow.

 

Border Radius
Biasanya Kita menggunakan image untuk menampilkan blok html yang akan ditampilkan secara melengkung/rounded. Pada CSS3 Kita dapat menggunakan fasilitas Border Radius seperti pada contoh di bawah ini:

border-radius: 10px; /* W3C */ 
-webkit-border-radius: 10px; /* Webkit (chrome/safari) */ 
-moz-border-radius: 10px; /* Mozilla Firefox */

image

Selain untuk semua sudut, Kita juga dapat men-set radius per sudut. Lihat gambar berikut:

image

Box Shadow
Selain Text Shadow, CSS3 juga mendukung Box Shadow, dimana satu blok berupa div, span atau sebagainya akan diberikan shadow pada blok yang dimaksud. Bedanya dengan text shadow adalah bila text shadow menambahkan bayangan pada teks, sedangkan box shadow menambahkan bayangan pada blok.

box-shadow :2px 2px 4px #888; /* W3C */ 
-webkit-box-shadow :2px 2px 4px #888; /* Webkit (chrome/safari) */  -moz-box-shadow :2px 2px 4px #888; /* Mozilla Firefox */

image

Nah mungkin hanya itu beberapa informasi yang menarik tentang CSS3.

Semoga bermanfaat