Social icons – efekty przejścia

Media społecznościowe obecnie przeżywają swoje pięć minut. Są jednymi z najpopularniejszych portali w internecie. Każdy na stronie posiada linki w różnej formie powiązany z social media.Na stronach wiele jest pomysłów na zamieszczenie ikony facebooka, czy innej w oryginalny sposób. Ja postaram się również być oryginalny i zamieszczam trzy formy prezentacji ikon z mediów społecznościowych.

Zaokrąglone rogi

Bardzo prosty sposób na ciekawy efekt koła w css. Najważniejsze funkcje, które sprawiają taki efekt to border-radius, oraz umieszczenie obrazka za pomocą czcionek font awesome dokładnie na środku pola. Pozostałe opcje to gra kolorami.

.ewd_social #style-1
{
	clear:both;
	content:'';
	margin:20px 0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.ewd_social #style-1 a
{
	width:100px;
	height:100px;
	display:block;
	position:relative;
	float:left;
	background:#bbb;
	margin:20px;
	transition: all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.ewd_social #style-1 a:hover
{
	transition: all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	border-radius:50%;
}
.ewd_social #style-1 a i
{
color: white;
    left: 50%;
    max-width: 960px;
    position: absolute;
    text-rendering: optimizelegibility;
    top: 50%;
    transform: translate(-50%, -49%);
    width: 100%;
    text-align: center;
}
.ewd_social #style-1 a:hover i
{
	color:#fff;
}
.ewd_social #style-1 a.facebook:hover
{
	background:#3b5998;
}
.ewd_social #style-1 a.twitter:hover
{
	background:#00aced;
}
.ewd_social #style-1 a.linkedin:hover
{
	background:#dd4b39;
}
.ewd_social #style-1 a.google:hover
{
	background:#007bb6;
}

Stopniowanie tła

Bardzo ciekawy efekt, który można wykorzystać wyłącznie za pomocą css, bez żadnych plików graficznych. Jest to prosta metoda na naprawdę niespotykany efekt.
Jako główna funkcja służy nam transition. Pojawianie się liniowego tła dzięki zróżnicowaniu jego czasu pokrycia daje właśnie taki efekt jak poniżej.

.ewd_social #style-2
{
	clear:both;
	content:'';
	margin:20px 0;
	min-height:80px;
}
.ewd_social a, a:visited {
	-webkit-transition:color 0.3s ease;
	-moz-transition:color 0.3s ease;
	-o-transition:color 0.3s ease;
	transition:color 0.3s ease;
	outline:medium none !important;
	text-decoration:none !important;
}

.ewd_social #style-2 a {
	overflow:hidden !important;
	background:none !important;
	text-shadow:none;
	box-shadow:none;
	font:16px/30px 'Roboto', sans-serif !important;
	border:1px solid #d7d6d6;
	padding:9px 25px 9px !important;
	border-radius:0px;
	position:relative;
	text-transform:uppercase;
	overflow:hidden;
	color:#708090;
	z-index:1;
	margin:0 20px;
	position:relative;
	-webkit-transition:0.3s ease !important;
	-moz-transition:0.3s ease !important;
	-o-transition:0.3s ease !important;
	transition:0.3s ease !important;
	text-align:center;
}
.ewd_social #style-2 a strong{
	display:block;
	position:absolute;
	height:25%;
	top:0;
	opacity:0;
	left:0;
	width:0%;
	background-color:#1e1f1e;
	z-index:-1;
	-webkit-transition:0.3s ease;
	-moz-transition:0.3s ease;
	-o-transition:0.3s ease;
	transition:0.3s ease;
}
.ewd_social #style-2 a strong +strong {
	top:25%;
	-webkit-transition:0.4s ease;
	-moz-transition:0.4s ease;
	-o-transition:0.4s ease;
	transition:0.4s ease;
}
.ewd_social #style-2 a strong +strong+strong{
	top:50%;
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease;
}
.ewd_social #style-2 a strong +strong+strong+strong {
	top:75%;
	-webkit-transition:0.6s ease;
	-moz-transition:0.6s ease;
	-o-transition:0.6s ease;
	transition:0.6s ease;
}
.ewd_social #style-2 a:visited, .ewd_social #style-2 a:active{
	background:none !important1;
	text-shadow:none;
	box-shadow:none;
	color:#1e1f1e !important;
	z-index:1;
}
.ewd_social #style-2 a:hover, .ewd_social #style-2 a:focus, .ewd_social #style-2 a:active {
	background:none !important;
	box-shadow:none !important;
	border-color:#1e1f1e;
	background-color:#f8f8f8 !important;
}
.ewd_social #style-2 a:hover strong, .ewd_social #style-2 a:focus strong, .ewd_social #style-2 a:active strong {
	opacity:1;
	width:100%;
}
.ewd_social #style-2 a.ewd_sm {
	font:bold 17px/30px 'Open Sans', sans-serif !important;
	border:0px !important;
	color:#32506d !important;
	padding:33px !important;
}
.ewd_social #style-2 a.ewd_sm:before{
	position:absolute;
	z-index:-1;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color:#fff;
	content:'';
}
.ewd_social #style-2 a.ewd_sm:hover {color:#fff !important;}
.ewd_social #style-2 a.ewd_sm.st-1 strong{ background-color:#517fa4; }
.ewd_social #style-2 a.ewd_sm.st-2 { color:#bb0000; }
.ewd_social #style-2 a.ewd_sm.st-2 strong { background-color:#ff5f41; }
.ewd_social #style-2 a.ewd_sm.st-3 { color:#00bf8f; }
.ewd_social #style-2 a.ewd_sm.st-3 strong{ background-color:#00bf8f; }
.ewd_social #style-2 a.ewd_sm.st-4 { color:#ff0084; }
.ewd_social #style-2 a.ewd_sm.st-4 strong{ background-color:#ff0084; }

Stopniowe zakrywanie tła

Całkiem inny efekt niż powyżej ale, również bardzo ciekawy. Nie trzeba dużo w kodzie kombinować tylko wystarczy dać odpowiednie kolory. W tym przypadku kluczowe dla nas są funkcje padding oraz transition, który jednak jest dla wszystkich taki sam.

.ewd_social #style-3 
{
	clear:both;
	content:'';
	margin:20px 0;
	overflow:hidden;
}
.ewd_social #style-3 a
{
	margin:0 20px;
	position:relative;
	width:100px;
	height:100px;
	display:block;
	float:left;
	overflow:hidden;
	background:#333;
	border:1px solid #ddd;
}
.ewd_social #style-3 a i
{
color: white;
    left: 50%;
    max-width: 960px;
    position: absolute;
    text-rendering: optimizelegibility;
    top: 50%;
    transform: translate(-50%, -49%);
    width: 100%;
    text-align: center;
	transition: all ease 0.6s;
	-webkit-transition:all ease 0.6s;
	-moz-transition:all ease 0.6s;
	-o-transition:all ease 0.6s;
}
.ewd_social #style-3 a:hover i
{
	transition: all ease 0.6s;
	-webkit-transition:all ease 0.6s;
	-moz-transition:all ease 0.6s;
	-o-transition:all ease 0.6s;
	padding:40px;
}
.ewd_social #style-3 a.tumblr:hover i
{
	background:#32506d;
}
.ewd_social #style-3 a.delicious:hover i
{
	background:#67b6e3;
}
.ewd_social #style-3 a.vimeo:hover i
{
	background:#aad450;
}
.ewd_social #style-3 a.windows:hover i
{
	background:#21c9ff;
}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code