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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
