Membuat Gradasi Warna Border di css
Halo teman teman dumenity, jumpa kembali di panduan panduan pemrogramman laman Source Code Aplikasi, kalo kemarin kita hanya merancang gradasi warna bagi font, nah kali ini kita akan Membangun Gradasi Warna Border di css, yuk seketika saja kita praktekan yah teman teman.
buka teks editor teman teman dan bikin file index.html dan ketikan srtuktur kode berikut yah teman teman dan jangan lupa di simpan dengan nama index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> Border Gradasi CSS3 </title>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class =row>
<h2> Source Code Aplikasi </h2>
</div>
</body>
</html>
setekah itu teman teman ketikan kode css berikut dan simpan dengan nama file style. css.
@import url('https://fonts.googleapis.com/css?family=Gugi');
*{
padding: 0;
margin: 0;
}
body{
background: #123;
}
.row{
margin-top: 30%;
}
h2{
text-align: center;
font-family: 'Gugi', cursive;
font-size: 5em;
background: -webkit-linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
background: linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
setelah itu kita akan merancang bordernya dengan cara berikut yah teman teman, ketikan atau tambah kan di baris teakhir css nya.
h2::after{
content: '';
border-bottom: 10px solid;
border-image: linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
border-image-slice: 1;
width: 60%;
display: block;
margin: auto;
}efect css border-imge di atas memanggil linear-gradient yang manfaat nya merancang warna gradasi di border teman teman bikin tadi, hasil nya seperti gambar berikut yah teman teman.
terlihat bagus dan menarik bukan gradasi warna bagi border nya, klaian dapat praktekan lebih dari ini,
sekianlah panduan Membangun Gradasi Warna Border di css, semoga bermanfaat yah teman teman..
Sumber https://kursuswebsite.org
