Tutorial CSS3 Pengertian CSS Vendor Prefix dan Cara Penulisannya dan Membuat Efek Teks Berbayang dengan CSS3 ~ infoku.net

Pesatnya perkembangan modul-modul CSS3 memaksa perusahaan pembuat web browser untuk mendukung property CSS yang belum sepenuhnya menjadi standar W3C. Untuk property seperti ini, web browser memilih menggunakan CSS Vendor Prefix.

Pengertian CSS Vendor Prefix

Vendor prefix adalah sebutan untuk penambahan beberapa karakter khusus di awal penulisan property, terutama untuk property CSS3 terbaru. Sebagai contoh, untuk property column-count, jika menggunakan vendor prefix ditulis menjadi: -webkit-column-count.

Kenapa harus menggunakan CSS Vendor Prefix?

Seiring dengan cepatnya perkembangan CSS3, web browser seolah-olah berlomba untuk mengimplementasikan berbagai property baru yang belum resmi disetujui badan standarisasi web: W3C. Dalam istilah W3C, property yang belum standar ini bisanya berada dalam status draft, dan bisa berubah sewaktu-waktu.

Property yang belum ‘selesai’ ini diimplementasikan oleh web browser menggunakan vendor prefix. Dengan tujuan, property ini bisa diuji coba oleh programmer web di seluruh dunia.
Pada awalnya, property dengan vendor prefix tidak ditujukan untuk website live, tapi hanya untuk uji coba. Ketika spesifikasi W3C masuk ke tahap rekomendasi (yaitu ketika property tersebut sudah dianggap selesai), tambahan vendor prefix juga akan dihapus.

Masalahnya, banyak web developer yang tidak sabar menunggu property ini resmi dirilis dan memilih untuk langsung menggunakannya. Oleh karena itu, jika kita ingin menggunakan property CSS3 yang masih baru harus dibuat menggunakan vendor prefix.

Cara Penulisan Vendor Prefix

Vendor prefix ditambahkan di awal penulisan property, sesuai dengan inisial web browser.
Berikut adalah awalan vendor prefix pada web browser populer:

-webkit- (Chrome, dan versi terbaru dari Opera)
-moz- (Firefox)
-o- (Opera versi lama)
-ms- (Internet Explorer)

Berikut contoh cara penulisan CSS Vendor Prefix:

div {

  -webkit-column-count: 3;

  -moz-column-count: 3;

  -o-column-count: 3;

  -ms-column-count: 3;

  column-count: 3;

}

Property column-count digunakan untuk membuat kolom koran (multiple column). Sayangnya property ini belum menjadi standar resmi, sehingga belum didukung penuh oleh web browser (pada saat artikel ini ditulis). Karena itu kita harus menulisnya dengan penambahan vendor prefix.
Pada baris terakhir terdapat penulisan property ‘resmi’, yakni tanpa vendor prefix. Ini dipersiapkan agar ketika property tersebut sudah dinyatakan stabil (sudah didukung penuh), nilai dari property ini akan menimpa efek sebelumnya (yang menggunakan vendor prefix). Dengan demikian, hasil yang di dapat akan seragam pada setiap web browser.

Penambahan property dengan vendor prefix memang sedikit merepotkan. Kode CSS kita menjadi 5 kali lebih panjang, namun ini hanya digunakan untuk property CSS3 yang relatif baru. Jika property tersebut sudah selesai, kita bisa ‘membuang’ bagian vendor prefix dan menggunakan nama property resmi.

Cara Membuat Efek Teks Berbayang dengan CSS

Sesuai dengan namanya, property text-shadow adalah modul baru di dalam CSS3 yang berfungsi untuk menghasilkan teks berbayang (text shadow).
Langsung saja kita masuk ke contoh kode HTML dan CSSnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   h1 {

     text-shadow: 2px 2px;

   }

</style>

</head>

<body>

<h1>Belajar CSS di infoku.net</h1>

</body>

</html>

Terlihat teks judul <h1> memiliki bayangan yang berada sedikit ke kanan dan kearah bawah. Penulisan property text-shadow: 2px 2px artinya: saya ingin membuat bayangan di arah 2 pixel ke kanan, dan 2 pixel ke bawah.

Bagaimana jika saya ingin bayangan ini berada di arah atas dan kiri? Tinggal menggunakan nilai negatif, seperti berikut:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   h1 {

     text-shadow: -10px -15px;

   }

</style>

</head>

<body>

<h1>Belajar CSS di infoku.net</h1>

</body>

</html>

Kali ini bayangan berada di 10 pixel ke kiri, dan 15 ke arah atas.

Cara Menambahkan Efek Blur pada Bayangan Teks

Selain mengatur posisi bayangan, kita juga bisa mengatur seberapa ‘kabur’ bayangan yang dihasilkan. Caranya dengan menambahkan nilai blur, seperti berikut:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   h1 {

     text-shadow: 10px -15px 5px;

   }

</style>

</head>

<body>

<h1>Belajar CSS di infoku.net</h1>

</body>

</html>

Nilai 5px dari penulisan text-shadow: 10px -15px 5px adalah nilai blur yang ingin ditambahkan. Semakin tinggi nilainya, semakin ‘kabur’ bayangan yang dihasilkan

Cara Mengubah Warna Bayangan Teks

Secara default, bayangan teks berwarna sama dengan teks itu sendiri. Dalam contoh sebelumnya teks saya berwarna hitam, sehingga bayangannya juga berwarna hitam. Bagaimana cara menukar warna ini?

Kita bisa menambahkan 1 lagi nilai kepada property text-shadow, langsung saja masuk ke contohnya:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Belajar CSS</title>

<style>

   h1.satu {

     text-shadow: 2px 2px 5px red;

   }

   h1.dua {

     text-shadow: 2px -2px 5px blue;

   }

   h1.tiga {

     text-shadow: -5px -5px 3px #FF68ED;

   }

   h1.empat {

     text-shadow: 2px -2px 15px #56FF67;

   }

</style>

</head>

<body>

<h1 class="satu">Belajar CSS di infoku.net</h1>

<h1 class="dua">Belajar CSS di infoku.net</h1>

<h1 class="tiga">Belajar CSS di infoku.net</h1>

<h1 class="empat">Belajar CSS di infoku.net</h1>

</body>

</html>

Dapat anda lihat sekarang setiap teks memiliki warna bayangan yang berbeda-beda. Dengan menukar nilai warna, kita bisa mendapatkan efek bayangan yang mempesona.

Dalam modul text-shadow CSS3, kita juga bisa menambahkan 2, 3 atau lebih efek bayangan pada teks yang sama.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.