Menu
Membuat 3d icon sosial media dengan css

Membuat 3d icon sosial media dengan css

  • December 3rd, 2018

Terkadang kita ingin menambahkan icon sosial media di website atau blog kita baik untuk keperluan menampilkan link sosial media kita atau keperluan sharing tulisan kita ke sosial media. Coba teman-teman lihat list icon sosial media berikut ini.

Boring. List icon tersebut merupakan icon bawaan dari font awesome yang sedikit ditambahkan css sehingga menghasilkan tampilan seperti di atas. Desainnya biasa-biasa saja tidak menarik dan bisa dibilang simple banget. berikut ini code html dan css nya.

<div class="wrap">
	<ul>
		<li><a href="#"><i class="fa fa-facebook"></i></a></li>
		<li><a href="#"><i class="fa fa-twitter"></i></a></li>
		<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
		<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
		<li><a href="#"><i class="fa fa-instagram"></i></a></li>
	</ul>
</div>
<style>
.wrap{
	margin: 0 auto;
	padding: 0;
}
ul{
	margin: 0;
	padding: 0;
	display: flex;
}
ul li{
	list-style: none;
	margin: 0 40px;
}
ul li .fa{
	font-size: 40px;
	color: #262626;
	line-height: 80px;
	transition: .5s;
}
</style>

Karena desainnya membosankan, so mari kita percantik agar lebih sedap dipandang mata. Kita tambahkan sedikit css code tentang css transofrm agar tampilannya lebih cakep kayak penulis, hehe. Berikut ini tambahan css nya.

ul li a{
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
	background-color: #fff;
	text-align: center;
	transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0);
	transition: .5s;
	box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
}
ul li a::before{
	content: "";
	position: absolute;
	top: 10px;
	left: -20px;
	height: 100%;
	width: 20px;
	background: #b1b1b1;
	transition: .5s;
	transform: rotate(0deg) skewY(-45deg);
}
ul li a::after{
	content: "";
	position: absolute;
	top: 80px;
	left: -11px;
	height: 20px;
	width: 100%;
	background: #b1b1b1;
	transition: .5s;
	transform: rotate(0deg) skewX(-45deg);
}

Dan hasil dari biasa-biasa saja menjadi list 3d sosial media icon yang sedap dipandang. Check this out.

Masih kurang kah? oke mari kita lebih percantik lagi dengan animasi hover dan color yang disesuaikan dengan warna icon sebenarnya. Berikut ini tambahan css nya.

/*-- Hover box dan icon --*/
ul li:hover .fa{
	color: #fff;
}
ul li a:hover{
	transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
	box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}
/*-- icon pertama --*/
ul li:hover:nth-child(1) a{
	background: #3b5999;
}
ul li:hover:nth-child(1) a:before{
	background: #2e4a86;
}
ul li:hover:nth-child(1) a:after{
	background: #4a69ad;
}
/*-- icon kedua --*/
ul li:hover:nth-child(2) a{
	background: #55acee;
}
ul li:hover:nth-child(2) a:before{
	background: #4184b7;
}
ul li:hover:nth-child(2) a:after{
	background: #4d9fde;
}
/*-- icon ketiga --*/
ul li:hover:nth-child(3) a{
	background: #dd4b39;
}
ul li:hover:nth-child(3) a:before{
	background: #c13929;
}
ul li:hover:nth-child(3) a:after{
	background: #e83322;
}
/*-- icon keempat --*/
ul li:hover:nth-child(4) a{
	background: #0077B5;
}
ul li:hover:nth-child(4) a:before{
	background: #036aa0;
}
ul li:hover:nth-child(4) a:after{
	background: #0d82bf;
}
/*-- icon kelima --*/
ul li:hover:nth-child(5) a{
	background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
ul li:hover:nth-child(5) a:before{
	background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}
ul li:hover:nth-child(5) a:after{
	background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
}

Dan hasil final dari 3d icon sosial media adalah seperti ini. Coba di hover iconnya atau istilah awamnya di sentuh. hihi.

Cantik bukan. sedikit catatan dari penulis. jangan lupa menambahkan atau menyisipkan atau mengimport stylesheet fontawesome di codingan agar font icon nya keluar. Masukkan dibagian head html kode berikut ini.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Dah dulu ya man teman, selamat mencobanya sendiri 3d social media icon-nya. Have a good day.

Posted In:
web desain

Add commentYour email address will not be published

Kategori