Sharing Teknologi – Membuat Neon Light Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Neon Light Animation HTML CSS Di WordPress.
HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML memanfaatkan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, dan tautan dalam halaman.
Tag ini membentuk struktur hierarkis, memberikan dasar untuk menyusun konten dalam dokumen HTML. Contohnya, tag <head> berisi informasi tentang dokumen, seperti judul halaman, sementara tag <body> memuat konten utama.
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang digunakan untuk mempercantik dan memformat halaman web yang dibangun dengan HTML. CSS memungkinkan pengembang mengontrol tata letak, warna, dan gaya elemen HTML. Dengan cara ini, presentasi dipisahkan dari struktur, memungkinkan perubahan gaya tanpa memengaruhi kerangka dasar halaman.
CSS beroperasi melalui aturan yang terdiri dari selektor (elemen yang akan diubah gayanya) dan properti (cara elemen tersebut akan diubah). Sebagai contoh, aturan CSS dapat mengubah font dan warna teks pada semua paragraf dalam halaman web. Responsivitas juga menjadi fitur kunci CSS, memungkinkan desainer mengadaptasi tampilan halaman untuk berbagai perangkat, dari komputer desktop hingga perangkat mobile.
HTML dan CSS bekerja secara sinergis untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML menyediakan struktur dan konten dasar, sementara CSS menangani presentasi. Dengan evolusi HTML5 dan CSS3, pengembang dapat mengakses fitur-fitur baru untuk meningkatkan kreativitas dan fungsionalitas halaman web, menjadikan kombinasi keduanya sebagai fondasi utama pengembangan web modern.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Neon Light Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="position-relative p-3 my-1 overflow-hidden">
<div class="neonlight">
<section class="Main">
<div class="h1">Visit Klaten</div>
</section>
</div>
</div>
Style CSS
@import url('https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Neonderthaw&display=swap');
@import url('https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap');
/* Shirak Soghomonian 2022 10 29 */
:root{
--color: #ff8c00;
}
.neonlight {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
min-height: 300px;
background:radial-gradient(rgb(37, 55, 91), rgb(0, 6, 18));
}
.neonlight .Main{
display: flex;
position: relative;
}
.neonlight .Main .h1{
cursor:none;
color:var(--color);
font-size: 3rem;
font-family: 'Balsamiq Sans';
text-shadow:
0 0 .5rem currentColor,
0 0 .6rem currentColor;
animation: example 3s linear infinite alternate ;
}
.neonlight .Main .h1:before{
content:'';
position: absolute;
top: 80%;
width: 100%;
height: 3rem;
background: var(--color);
transform: perspective(3rem) rotateX(40deg) scale(1,0.45);
filter: blur(2rem);
opacity: .8;
animation: example 3s linear infinite alternate ;
}
.neonlight .Main .h1:after{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color);
z-index: -1;
filter: blur(4rem);
opacity: .3;
animation: example 3s linear infinite alternate ;
}
@keyframes example {
0%{--color: #ffab43;}
25%{--color: #3fa6ff;}
50%{--color: #ff4949;}
75%{--color: #ff5edf;}
100%{--color: #adfe4a;}
}
.neonlight .Main .h1::selection{
display: none;
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar