Membuat Animasi Shadow Teks dengan CSS
Membuat Animasi Shadow Teks dengan CSS - Dengan adanya CSS3 saat ini, selain lebih mudah dalam menata desain web juga mudah dalam membuat efek ataupun animasi standar yang bisa diterapkan didalam halaman web. Misalnya saja, animasi objek (teks, gambar, dll). Seperti tutorial berikut yanga akan saya bagikan yaitu tutorial sederhana Membuat Animasi Shadow Teks dengan CSS. Baiklah, langsung saja kita mulai praktek untuk Membuat Animasi Shadow Teks dengan CSS berikut ini.
Langkah 1 : Membuat Animasi Shadow Teks dengan CSS
Pada kasus ini animasi yang akan kita buat yakni shadow pada objek teks, untuk itu kita akan buat struktur sederhana HTML berikut ini.
<h3 data-shadow='DUMETschool.'>DUMETschool.</h3>
</body>
Langkah 2 : Membuat Animasi Shadow Teks dengan CSS
Selanjutnya, untuk membuat shadow dan animasi tentu kita akan butuh CSS untuk menjalankan animasi shadownya, untuk itu silahkan ketikan sintak CSS berikut ini.
@import url('https://fonts.googleapis.com/css?family=Lily+Script+One');
*,
*:before,
*:after {
margin: 0;
padding: 0;
position: relative;
}
body {
text-align: center;
background-color: #0E4E5A;
}
body:before {
content: '';
display: inline-block;
vertical-align: middle;
font-size: 0;
height: 100%;
}
h3 {
display: inline-block;
color: #DAD9DE;
font-family: 'Lily Script One', cursive;
font-size: 14em;
text-shadow: .04em .04em 0 #0E4E5A;
}
h3:after {
content: attr(data-shadow);
position: absolute;
top: .07em; left: .07em;
z-index: -1;
text-shadow: none;
background-image:
linear-gradient(
40deg,
transparent 45%,
hsla(48,20%,90%,1) 45%,
hsla(48,20%,90%,1) 55%,
transparent 0
);
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 25s linear infinite;
}
@keyframes animate {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}
Setelah semua sintak diatas telah diketikan, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat seperti gambar dibawah ini.
Bagaimana, cukup mudah bukan untuk membuatnya ? Cukup sekian tutorial sederhana Membuat Animasi Shadow Teks dengan CSS, semoga tutorial ini bisa bermanfaat dan bisa menambah referensi dalam membuat animasi di CSS. 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)
