Cara Membuat Efek Shine dengan CSS

Cara Membuat Efek Shine dengan CSS - Ada yang tau efek shine (mengkilat) ? Seperti namanya shine merupakan efek kilatan cahaya pada  suatu objek. Nah, pada website kita dapat menerapkan efek shine pada objek berupa gambar ataupun pada objek lainnya dengan memanfaatkan properties yang terdapat pada CSS. Pada kesempatan kali ini saya akan bagikan tutorialnya buat kalian mengenai Cara Membuat Efek Shine dengan CSS. Penasaran seperti apa cara membuatnya, berikut akan saya praktekan Cara Membuat Efek Shine dengan CSS.

Langkah 1 : Cara Membuat Efek Shine dengan CSS

Pada kasus yang akan kita buat kali ini adalah membuat efek shine pada objek berupa gambar, untuk itu silahkan kalian siapkan beberapa gambar sebagai objeknya.
Langkah pertama silahkan kalian buat satu file dengan nama index.html kemudian ketikan struktur sederhana untuk menampilkan gambar terlebih dahulu seperti berikut ini.

<body>

<h2>Shine Effect</h2>
<div class="shines column">
  <div>
    <figure>
        <img src="image-1.jpeg" />
    </figure>
  </div>

  <div>
    <figure>
        <img src="image-2.jpeg" />
    </figure>
  </div>
</div>

</body>

Langkah 2 : Cara Membuat Efek Shine dengan CSS

Setelah membuat struktur HTML dan pastikan gambar sudah tampil pada browser, selanjutnya kita akan desain tampilan dan efek shine pada gambarnya, silahkan kalian ketikan sintak CSS berikut.

.column div {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 0 0 25px;
    padding: 0;
}
.column div:first-child {
    margin-left: 0;
}

figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
img {
    width: 300px;
    height: 200px;
    border-radius: 5px;
}
.shines figure {
    position: relative;
}
.shines figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.shines figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

Setelah semua sintak diketikan, silahkan simpan filenya kemudian silahkan buka pada browser masing - masing dan lihat hasilnya.

Bagaimana, menarik bukan efek shine nya ? baiklah cukup sekian tutorial mengenai Cara Membuat Efek Shine dengan CSS, semoga bermanfaat dan selamat mencoba :)

26 Juni 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat