For the Tipcow project, our designers were tasked with creating diamond-shaped blocks for the social network icons that moved in a zig-zag pattern. The quantity was not predetermined and the option to delete and add links also needed to be available.
Some ready-to-use solutions already existed online, but they didn't suite. Our idea required each diamond to have an absolute position, not allowing them to move. This solution would require front-end developer intervention each time a new icon needed to be added, which is not cool in terms of usage by our customer. As a result of much trial and error, we were able to find a neat solution. We created a simple list layout with the social network icons inside. Here is an example taken from the icon set socicon:
<ul class="soc-list">
<li><a href="/"><i class="socicon-facebook"></i></a></li>
<li><a href="/"><i class="socicon-twitter"></i></a></li>
<li><a href="/"><i class="socicon-linkedin"></i></a></li>
<li><a href="/"><i class="socicon-instagram"></i></a></li>
</ul>Styles table:
.soc-list {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
}
.soc-list a {
color:#fff;
background: #e2e2e2;
position: relative;
display: block;
width: 34px;
height: 34px;
}
.soc-list a:hover {
background: #b29f87;
}Icons centering:
.soc-list i {
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}Result:
Additional issue was to remove indents for the inline-blocks. There are plenty of methods to do this, which can be read about in detail here, for instance. We decided to use following approach.
@media all and (-webkit-min-device-pixel-ratio: 0) {
.soc-list {
display: table;
width: 100%;
}
}
.soc-list {
list-style: none;
padding: 0;
word-spacing: -0.36em;
text-align: center;
}
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
}
Squares turn:
.soc-list a {
color:#fff;
background: #e2e2e2;
position: relative;
display: block;
width: 34px;
height: 34px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Squares diagonal is 48 pixels (a little bit of school Maths: side 34px multiplied by the square root of 2). Set necessary height and width for list items.
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
width: 48px;
height: 48px;
}
Add 4 more pixels to width “li” for indents 48+4=52:
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
width: 52px;
height: 52px;
}
Besides, we need to align the links, so that they are within the borders of their parent elements from list “li”. Again a little bit of Maths here: subtract the link’s side length inside “li” block from the length of “li” block and divide it by 2. (54-34)/2=9px. Set 9px for links “left” and “top”
.soc-list a {
color:#fff;
background: #e2e2e2;
position: relative;
display: block;
width: 34px;
height: 34px;
left:9px;
top:9px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Now we shift search elements by half of width 52/2=26:
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
width: 52px;
height: 52px;
margin: 0 0 0 -26px;
}
In the same way, let’s drop the event elements by half of height:
.soc-list li:nth-child(2n) {
margin-top: 26px;
}
It is almost finished. Now we only have to turn the icons and to use some magic for hover effect. However, the main point is already achieved: you can have as many diamonds as you wish, and they will look satisfyingly whatever the screen size may be.
Let’s turn the icons:
.soc-list i {
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Now make a transition:
.soc-list a {
color:#fff;
background: #e2e2e2;
position: relative;
display: block;
width: 34px;
height: 34px;
left:9px;
top:9px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-ms-transition: -ms-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
}
When pointing we will turn the element from the list by 360 degrees. Since the link is already tuned by 45 degrees, we need to turn it by 360+45=405 degrees:
.soc-list a:hover {
background: #b29f87;
-webkit-transform: rotate(405deg);
-ms-transform: rotate(405deg);
transform: rotate(405deg);
}
That’s it. Enjoy. As you can see, nothing special and basically nothing new. The interest of the task lays in its universality: you can use any quantity of elements. At any screen size. Thanks to our designer for the task :) If you use any pre- or post- processor CSS, you can make a mixin to transmit the sizes of indents and diamond’s sides.
