CSS3 Blending Mode

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 :

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

Sekarang kita buat kode CSS-nya :

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 :

Sekarang, kita tambahkan kode CSS seperti berikut :

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

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 :)