Social-Links anders dargestellt. Abgeleitet habe ich die Idee vom Flamechart im Developer-Tool der Browser.

HTML

<ul class="flex social-chart">
<li class="fw_20 schart-instagram"><a title="Instagram" href="https://www.instagram.com/webmanagement.berlin"><span id="instagram" class="fab fa-instagram"></span><strong>Instagram</strong></a></li>
<li class="fw_20 schart-facebook"><a title="Facebook" href="https://www.facebook.com/webmanagement.berlin"><span id="facebook" class="fab fa-facebook"></span><strong>Facebook</strong></a></li>
<li class="fw_20 schart-pinterest"><a title="Pinterest" href="/www.pinterest.com/webmanagement_berlin"><span id="pinterest" class="fab fa-pinterest"></span><strong>Pinterest</strong></a></li>
<li class="fw_20 schart-twitter"><a title="Twitter" href="https://twitter.com/webmanagementb"><span id="twitter" class="fab fa-twitter"></span><strong>Twitter</strong></a></li>
<li class="fw_20 schart-tumblr"><a title="Tumblr" href="https://webmanagement-berlin.tumblr.com/"><span id="tumblr" class="fab fa-tumblr"></span><strong>Tumblr</strong></a></li>
</ul>

CSS

/* social chart */
ul.social-chart{
list-style-type: none;
background: transparent !important;
}
ul.social-chart >li.fw_20{
min-width:20%; width:20%; max-width:20%; margin: 0; padding: 0;
}
ul.social-chart >li.fw_20 >a{
float: left;
color: #fff;
text-align: center;
}
ul.social-chart >li.fw_20 >a >strong{
display:none;
}
.schart-instagram >a{
padding: calc(.25vh * 36) 1vw;
/*
background-color: #e4405f;
*/
background: rgb(228,64,95);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e4405f",endColorstr="#213159",GradientType=1);
}
.fw_20.schart-facebook >a{
padding: 1vh 1vw;;
/*
padding: calc(.25vh * 2) 1vw;
background-color: #3b5998;
*/
background: rgb(59,89,152);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b5998",endColorstr="#213159",GradientType=1);
}
.fw_20.schart-pinterest >a{
padding: 1vh 1vw;
/*
background-color: #bd081c;
*/
background: rgb(189,8,28);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bd081c",endColorstr="#213159",GradientType=1);
}
.fw_20.schart-twitter >a{
padding: calc(.25vh * 10) 1vw;
/*
background-color: #1da1f2;
*/
background: rgb(29,161,242);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1da1f2",endColorstr="#213159",GradientType=1);
}
.fw_20.schart-tumblr >a{
padding: 1vh 1vw;;
/*
padding: calc(.25vh * 0) 1vw;
background-color: #35465c;
*/
background: rgb(53,70,92);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,49,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#35465c",endColorstr="#213159",GradientType=1);
}

/**
* 960px +
* Media query: 60em
*/
@media screen and (min-width:60em){

/* social chart */
ul.social-chart >li.fw_20 >a >svg{
margin-right:10px;
}
ul.social-chart >li.fw_20 >a >strong{
display:inline;
}
}


Result


Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.