Cara Membuat Efek Double Exposure dengan HTML & CSS

15/01/2018    Risman Hakim    820     Website

Cara Membuat Efek Double Exposure dengan HTML & CSS - Double Exposure merupakan suatu cara atau teknik menggabungkan dua objek gambar menjadi satu sehingga menampilkan desain yang sangat menarik. Kebanyakan efek ini dibuat dengan software photoshop, namun buat kalian yang ingin menampilkan desain double exposure pada halaman website dan masih bingung bagaimana cara membuatnya, kali ini saya akan kasih tutorialnya buat kalian. Penasaran ? simak tutorial Cara Membuat Efek Double Exposure dengan HTML & CSS berikut ini.

Sebelum memulai praktek membuat efek double exposure kalian wajib mempersiapkan bahan - bahanya terlebih dahulu, cukup siapkan dua gambar dengan format png berwarna hitam putih dan gambar atau wallpaper bebas, atau kalian bisa mendownload gambar dibawah ini sebagai bahannya.

Cara Membuat Efek Double Exposure dengan HTML & CSS

Langkah 1 : Cara Membuat Efek Double Exposure dengan HTML & CSS

Langkah pertama dalam membuat efek double exposure adalah dengan membuat struktur HTML 5, kalian bisa ketikan struktur HTML 5 berikut ini.

<body>
    <div class="wrapper relative">
       <img id="image" src="img.png">
       <div class="content">
          <h1>Hallo...</h1>
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
       </div>
    </div>
</body>

Langkah 2 : Cara Membuat Efek Double Exposure dengan HTML & CSS

Berikutnya adalah, kita akan memulai mendesain tampilan efek double exposure dengan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Macondo');
* {
    padding: 0;
    margin: 0;
}
.wrapper{
    width: 800px;
    height: 520px;
    margin: auto;
    position: relative;
    animation: animate 300s infinite;
    background: url("bg-img.jpg");
}

.wrapper #image{
    mix-blend-mode: lighten;
    width: 800px;
    margin: auto;
}
.wrapper img {
    width: 800px;
    height: 520px;
}
.content {
    position: absolute;
    width: 250px;
    top: 150px;
    left: 50px;
    font-family: 'Macondo', cursive;
}

@keyframes animate {
   0%   { background-position:0% 100%; }
   50%   { background-position:100% 100%; }
   100%   { background-position:0% 100%; }
}

Pada bagian sintak background:url silahkan isikan gambar atau wallpaper bebas, setelah semua sintak diatas telah diketikan, simpan filenya kemudian silahkan buka pada browser masin - masing dan lihat hasilnya, maka hasilnya akan terlihat seperti pada gambar dibawah ini.

Cara Membuat Efek Double Exposure dengan HTML & CSS

Bagaiaman, menarik bukan efek yang ditampilkan ? dengan hanya menggunakan HTML dan CSS kita sudah bisa membuat efek double exposure seperti yang dibuat pada photoshop, intinya kita hanya perlu terus belajar dan mengulik saja. Cukup sekian tutorial Cara Membuat Efek Double Exposure dengan HTML & CSS, semoga bermanfaat dan tetap semangat.

Artikel, Web Design, HTML CSS, website

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