Cara Membuat Efek Neon pada Teks

21/07/2019    Risman Hakim    99     Website

Cara Membuat Efek Neon pada Teks - Efek neon merupakan salah satu efek yang bisa kita terapkan pada elemen teks karena dengan tambahan efek neon pada teks akan memberikan kesan seolah - olah teks sedang diberikan cahaya oleh neon. Menarik bukan ? Nah, jika teman - teman ingin membuat efek ini tapi bingung cara membuat nya, jangan khawatir pada kesempatan kali ini saya akan bagikan bagaimana Cara Membuat Efek Neon pada Teks. Penasaran seperti apa cara membuatnya ? Yuk, simak langkah - langkah nya berikut ini.

Baik, kita awali tutorial membuat efek neon dengan membuat elemen teks nya terlebih dahulu, silahkan kalian buat file HTML kemudian ketikan kode HTML berikut untuk elemen teks yang akan diberikan efek neon nanti nya.

<body>
    <h1>Dumet school.</h1>
</body>

Setelah membuat elemen teks seperti diatas, langkah selanjutnya adalah kita akan desain elemen teks nya dan tentunya memberikan sentuhan efek neon pada elemen teks, pada kasus ini efek neon pada elemen teks nya akan dibuat dengan kode CSS. Untuk itu silahkan kalian bisa ketikan kode CSS berikut untuk memberikan efek neon pada teks nya.

@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');

h1 {
    font-size: calc(20px + 18vh);
    line-height: calc(20px + 20vh);
    text-shadow:0 0 5px #e61940, 
                0 0 15px #e61940, 0 0 20px #e61940, 
                0 0 40px #e61940, 0 0 60px #ff0000, 
                0 0 10px #f5f6fa, 0 0 98px #ff0000;
    color: #f5f6fa;
    font-family: 'Pacifico', cursive;
    text-align: center;
    animation: neonEffect 12s infinite;
}

body {
    padding: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000;
}

@-webkit-keyframes neonEffect {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
  text-shadow:0 0 5px #e61940, 
              0 0 15px #e61940, 0 0 20px #e61940, 
              0 0 40px #e61940, 0 0 60px #ff0000, 
              0 0 10px #f5f6fa, 0 0 98px #ff0000;
    color: #f5f6fa;
  }
}

@keyframes neonEffect {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
  text-shadow:0 0 5px #e61940, 
              0 0 15px #e61940, 0 0 20px #e61940, 
              0 0 40px #e61940, 0 0 60px #ff0000, 
              0 0 10px #f5f6fa, 0 0 98px #ff0000;
    color: #f5f6fa;
  }
}

Langkah terakhir, setelah kalian mengetikan semua kode HTML dan CSS, simpan kembali file nya kemudian kalian bisa melihat hasil hasil akhir pada browser masing - masing.
Bagaimana, lumayan menarik bukan efek neon pada teks nya ? Silahkan kalian juga bisa kembangkan lagi efek pada elemen teks nya, dengan penambahan efek ini teks yang tadinya biasa - biasa saja bisa terlihat lebih menarik bukan ? Baiklah, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Efek Neon pada Teks. Semoga tutorial ini bermanfaat dan selamat mencoba :)

Web Design

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