Membuat Clipping Mask di HTML5 dan CSS3

28/01/2014    Faizal Ryza    976     Website

Hallo Dumenity pecinta desain grafis ketemu lagi di blog DUMET School. Kali ini Saya ingin memberikan tutorial tentang Clipping Mask di HTML5 dan CSS3, pasti bagi pecinta desain grafis tidak asing lagi dengan yang namanya Clipping Mask, semua Designer pasti tau cara membuat Clipping Mask di Photoshop atau di software desain lainnya. Nah ada yang tau bagaimana membuat Clipping Mask di HTML5 dan CSS3?, di sini saya akan share caranya. Ikuti langkah - langkah berikut ini:

1. Silahkan buka Software yang biasa kalian gunakan untuk membuat HTML5 dan CSS3, di sini saya akan menggunakan Software Adobe Dreamweaver CS6.
2. Buatlah file HTML baru dengan mengkilik menu File > New > kita pilih Page Type = HTML dan DocType = HTML5

maskinghtml1

maskinghtml2

3. Kita buat Tag HTML <h1>DUMET School</h1>

maskinghtml3

4. Kita buat CSS seperti gambar di bawah ini

maskinghtml4

5. Jika sudah Save dan preview di browser, lihat hasilnya Clipping Mask sudah jadi.

maskinghtml5

Mudah bukan, Silahkan mencoba

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