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.

<body>
    <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.

Membuat Animasi Shadow Teks dengan CSS

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 :)

13 Maret 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat