CSS3 Blending Mode

15/09/2014    Aulia Rahmah Alhafidz    570     Website

Apa yang ada di benak kalian jika membaca kata "blending mode"? Photoshop? Ya, pasti seperti itu. Lalu, bagaimana dengan CSS? Apa bisa blending mode ini kita gunakan di CSS? Ya, itulah alasan artikel ini. Tidak hanya dalam Photoshop. Tetapi ini bisa digunakan di CSS3. Canggih bukan? Langsung saja ya!

Buatlah kode HTML seperti berikut :

css3-blending-mode

Karena kita akan membuat setiap huruf berwarna maka kita membutuhkan span.

Sekarang kita buat kode CSS-nya :

css3-blending-mode

css3-blending-mode

Disini kita menggunakan selektor nth-child. Seperti yang sudah dijelaskan di atas, setiap huruf akan dibuat berwarna, maka kita membutuhkan selektor nth-child untuk memanggil setiap hurufnya. Mulai dari huruf pertama sampai huruf terakhir (D - L)

Save dan ini hasilnya :

css3-blending-mode

Sekarang, kita tambahkan kode CSS seperti berikut :

css3-blending-mode

Save. Lihat hasilnya! Kita berhasil membuat tulisan "Dumet School" dengan Opacity dan CSS3 Blending Mode.

css3-blending-moe

Seperti photoshop, kita juga bisa menggunakan Properties di CSS seperti : normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color dan luminosity.

Sangat mudah ya?

Semoga bermanfaat ya :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More