Membuat Gradasi Warna Border di css

Halo teman teman dumenity, jumpa kembali di tutorial tutorial pemrogramman website dumet school, kalo kemarin kita hanya membuat gradasi warna untuk font, nah kali ini kita akan Membuat Gradasi Warna Border di css, yuk langsung saja kita praktekan yah teman teman.

buka teks editor teman teman dan buat 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> Dumet School </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 membuat 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 fungsi nya membuat warna gradasi di border teman teman buat tadi, hasil nya seperti gambar berikut yah teman teman.

terlihat bagus dan menarik bukan gradasi warna untuk border nya, klaian bisa praktekan lebih dari ini,

sekian tutorial Membuat Gradasi Warna Border di css, semoga bermanfaat yah teman teman..

Kategori