Cara Membuat Efek Neon Text dengan CSS

Cara Membuat Efek Neon Text dengan CSS

Cara Membuat Efek Neon Text dengan CSS

Cara Membuat Efek Neon Text dengan CSS , atau Membuat Tulisan Bercahaya di HTML Menggunakan CSS, seperti yang dapat sobat lihat gambar thumbnail yang admin telah buat, ya kita akan membuat efek terhadap teks yang nantinya kita akan buat, dengan menggunakan bahasa pemrograman CSS dan HTML cara nya juga begitu cukup mudah ya sobat, hanya menggunakan CSS dan HTML saja sobat bisa mengkreasikan efek dari Text yang sobat buat, agar terlihat lebih keren dengan efek Neon yang diberikan nantinya.

Cara Membuat Efek Animasi Neon Text dengan CSS :


Baiklah tanpa banyak basa - basi silahkan sobat buka Text Editor sobat, disini admin menggunakan Text Editor Atom yang bisa sobat download disini, kenapa menggunakan Text Editor Atom, karena admin bisa langsung Live Preview hasil codingan HTML dan CSS admin, tanpa membuka Browser admin, lalu sobat buat sebuah folder baru disini admin menamai folder admin , dengan nama neon_ruangcoder.

Kemudian silahkan sobat buat file baru dengan nama index.html dan sobat isikan dengan codingan yang ada dibawah ini :



<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Neon Text Effect | RuangCoder.com</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="main">
    <span class="webdev">RuangCoder</span>
    <span class="socod">nrst112_</span>
</div>
</body>

</html>

Nah, pada tulisan ruangcoder dan nrst112 , silahkan sobat kreasikan sesuka sobat, dengan Text yang sobat inginkan, setelah ini tentu kita akan membuat sebuah Style daripada Efek Neon nya tersebut, silahkan sobat, buat file baru dengan nama style.css kemudian sobat salin codingan yang ada dibawah ini.



@font-face {
  font-family: 'neontubes';
  src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot");
  src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot?#iefix") format("embedded-opentype"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff2") format("woff2"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff") format("woff"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #030c1c;
}

.main {
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50vw;
  height: auto;
  font-family: "neontubes";
  font-size: 16vw;
  text-align: center;
  white-space: nowrap;
}
.main span {
  display: block;
  position: relative;
  -webkit-transform: translateZ(0) translate3D(0, 0, 0);
          transform: translateZ(0) translate3D(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity;
}
.main .webdev {
  color: #ffd9e2;
  text-shadow: 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c;
  -webkit-animation: blink 4s infinite alternate;
          animation: blink 4s infinite alternate;
}
.main .socod {
  font-size: 11vw;
  color: #d4eaff;
  text-shadow: 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba(38, 149, 255, 0.5), 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff;
  -webkit-animation: buzz 0.01s infinite alternate;
          animation: buzz 0.01s infinite alternate;
}

@-webkit-keyframes buzz {
  70% {
    opacity: 0.80;
  }
}

@keyframes buzz {
  70% {
    opacity: 0.80;
  }
}
@-webkit-keyframes blink {
  40% {
    opacity: 1;
  }
  42% {
    opacity: 0.8;
  }
  43% {
    opacity: 1;
  }
  45% {
    opacity: 0.2;
  }
  46% {
    opacity: 1;
  }
}
@keyframes blink {
  40% {
    opacity: 1;
  }
  42% {
    opacity: 0.8;
  }
  43% {
    opacity: 1;
  }
  45% {
    opacity: 0.2;
  }
  46% {
    opacity: 1;
  }
}
@media screen and (min-width: 1000px) {
  .main {
    width: 400px;
    font-size: 150px;
  }

  .main .socod {
    font-size: 103px;
  }
}

Dan kita sudah berhasil membuat Efek Animasi Neon Text dengan CSS dimana sobat bisa lihat yang sudah admin bilang sebelumnya admin bisa live preview hasil codingan admin , langsung di text editor atom, tanpa membuka browser admin sendiri, sobat bisa lihat gambar dibawhah ini.

Penutup

Oke sobat ruangcoder, mungkin itu saja tutorial pada kesempatan kali ini dalam Membuat Efek Animasi Neon Text dengan CSS, semoga bermanfaat buat sobat semuanya, dan sampai jumpa di artikel selanjutnya, Terimakasih sobat sudah berkunjung di blog ini.

Anda mungkin menyukai postingan ini