Memahami gradien linier CSS3

Membuat gambar hanya untuk menampilkan gradien adalah tindakan yang tidak fleksibel dan dapat dengan cepat menjadi praktik yang buruk. Namun sayangnya, saat tulisan ini dibuat, hal tersebut mungkin masih harus dilakukan, namun mudah-mudahan tidak akan bertahan lama. Berkat Firefox dan Safari/Chrome, kini kami dapat mencapai gradien yang kuat dengan sedikit usaha. Pada artikel ini, kami akan menunjukkan implementasi sederhana gradien CSS dan perbedaan properti ini di browser Mozilla dan webkit.

PS: Teks asli artikel ini menyediakan video, namun karena alasan yang diketahui, video ini tidak dapat kami tonton di Youtube. Bagi pelajar yang ingin menontonnya, silakan cari cara untuk menontonnya sendiri (maksimal 720P): http //www.youtube.com/watch?v=9D2hyM5SSCE

perangkat web

Meskipun Mozilla dan Webkit umumnya mengadopsi sintaks yang sama untuk properti CSS3, sayangnya mereka tidak dapat menyetujui gradien. Webkit adalah kernel browser pertama yang mendukung gradien, menggunakan struktur berikut:

/* Sintaks, diambil dari: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradien(, [, ]?, [, ]? [, ]*)

/* Dalam praktiknya... */
latar belakang: -webkit-gradient(linier, 0 0, 0 100%, dari(merah), ke(biru));