Cara Membuat Efek Radial Dengan CSS3

Halo, jumpa lagi dengan saya 🙂 , pada artikel kali ini saya akan kasih tau kalian tutorial mengenai bagaimana Cara Membuat Efek Radial Dengan CSS3, Nah, buat kalian yang ingin membuat frame gambar kalian bisa menggunakan cara berikut.

Pertama, silahkan kalian siapkan satu buah gambar berukuran 400×200 pixel, kemudian kita buat struktur HTML seperti berikut.

<div class="stamp">
	<img src="gambar.png" />
</div>

Pada bagian img silahkan masukan gambar nya, setelah itu kita akan buat Efek Radial dengan kode CSS3 berikut.

* {margin: 0; padding: 0;}

body {
	padding: 100px;
	text-align: center;
}

.wrapper {
	width: 280px;
	height: 180px;
	display: inline-block;
	padding: 10px;
	background: white;
	position: relative;
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
	background: radial-gradient(
		transparent 0px, 
		transparent 4px, 
		white 4px,
		white
	);
  
	background-size: 20px 20px;
	background-position: -10px -10px;
}
.wrapper:after {
	content: '';
	position: absolute;
	left: 5px; top: 5px; right: 5px; bottom: 5px;
	z-index: -1;
}

.wrapper:before {
	content: 'CSS3';
	position: absolute;
	bottom: 0; left: 0;
	font: bold 24px arial;
	color: white;
	opacity: 0.75;
	line-height: 100%;
	padding: 20px;
}

Kalo sudah semua kode diatas diketikan, simpan terlebih dahulu file nya dengan nama index.html, kemudian buka dan jalankan dibrowser masing-masing dan lihat hasilnya.

Bagaimana, keren bukan dan cukup mudah untuk membuatnya ? Baik sampai disini tutorial mengenai Cara Membuat Efek Radial Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Kategori