Seperti biasa, aku galau menciptakan pembukaan setiap nulis artikel,
jadi eksklusif aja,
buat kalian yang galau apa itu Gradient Box? dan menyerupai apa itu gradient box ?
kalian dapat melihatnya menyerupai gambar diatas, atau kalian dapat lihat demonya, dibawah ini.
Animated Gradient Box tersebut hanya memakai CSS,
jadi kalian dapat mengedit tampilan atau mengubah warnanya, dan kalian juga dapat jadikan itu sebagai background button,
Untuk menampilkan di blog atau web kalian, kalian hanya perlu menyalin script dibawah ini.
@import url('https://fonts.googleapis.com/css?family=Raleway:200'); #box { display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; color: white; font-family: 'Raleway'; font-size: 2.5rem; } .gradient-border { --borderWidth: 5px; position: relative; border-radius: var(--borderWidth); } .gradient-border:after { content: ''; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); border-radius: calc(2 * var(--borderWidth)); z-index: -1; animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } yand diatas itu yakni CSSnya,
kalau kalian ingin edit tampilannya, edit pada CSSnya
dibawah ini HTMLnya, untuk menampilkannya
<div class="gradient-border" id="box">VAMOUS.ID <br>CSS<br>Gradient Box</div> Ganti Tulisan Kuning, dengan goresan pena yang kalian inginkan
Gradient box tersebut dapat kalian gunakan untuk template blog kalian, atau kalian dapat berimajinasikan untuk sesuatu yang menarik.
sekian artikelnya
Jika masih ada yang dibingungkan, aku menyediakan kolom komentar.
