Blog Request tutorial? klik disini!

  • CSS3 Blending Mode

    Ditulis oleh: Aulia Rahmah Alhafidz
    622 kali dibaca
    15 Sep / 2014 16:02

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






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155