CSS3 Rollover Sosyal Medya Simgeler

Görüntülenme : 1907

Güncellenme Tarihi : 16.5.2015

Slide rollover animation






İlk görünüşte sade renksiz bir tasarım olarak görünse de simgelerin üzerine gelindiğinde yumuşak bir geçişle alt taraftan çıkan renkli simgeler bu tasarıma ayrı bir renk katmış. Kolay CSS kodlarıyla da rahat bir şekilde web sitenizin üzerine uygulayabilirsiniz.

CSS Kodu

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Spinning rollover animation






Yine sade ve renksiz görünen bu tasarım üzerine gelindiğinde resmin kendi etrafında tam bir şekilde dönüp renkli simgelerin gelmesi bu tasarımı göze çarpıcı bir hale getirmiştir. Web sitenizde çarpıcı sosyal medya simgeleri istiyorsanız bu tasarım size göre.

CSS Kodu

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Pop-out icons






Diğer sosyal medya simgelerinin aksine renkli şekilde gelen simgeler, üzerlerine gelindiğinde öne çıkarak altında bıraktığı gölgeyle, tasarımın sosyal medya simgelerinin daha ilgi çekici bir hale gelmesi sağlanmış. CSS kodunun yanında HTML kodu ile birlikte kod kısmı daha kolay bir hal almıştır.

HTML Kodu


<div class="social-popout"><img src="path/to/image.png" /></div>

CSS Kodu

.social-popout {
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img {
	border-radius: 50%;
	margin: 8px;
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img:hover {
	margin: 0px;
	box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}

İLETİŞİM

Antalya Web Tasarım® bir Karayel Tasarım® markasıdır.

0242 344 1020 - info@antalyawebtasarim.com

Tüm hakları saklıdır.

© 2015