CSS 3 Spinning Social Icons

Hello everyone,

Welcome to the Bigint website development Huddersfield blog.

When the bigint.co.uk site first went live and the blog was launched we promised to share some of the tips and tricks featured on our site.

At that point we didn’t realise how successful Bigint web development Huddersfield would become in such a short space of time, or how difficult it would be to maintain the blog when busy.

Customers always come first at Bigint; therefore, our time is dedicated to supporting our customers.  However, as we are becoming more established and less time in needed to develop our own infrastructure the occasional opportunity to update the blog is available.

So, let’s start with something easy, the spinning social media icons from the Bigint site.  An example can be viewed here.

With the power of CSS3, we can animate images without the need for flash or additional JavaScript.

Firstly we need the icons.  I grabbed ours from iconfinder.com.

Facebook CrackedGoogle CrackedLinkedIn CrackedTwitter Cracked

We use the 48×48 pixel icons; although, if you click on the icon you want a variety of sizes become available.  Add the icons to the ‘images’ folder in your site.  If you do not have an image folder, it is best practice to create one in the root of the website.

Next, the html script for our page.

<div class="spinning_icons">
<a href="URL TO YOUR GOOGLE PLUS PAGE" class="google" rel="publisher" ><img src="images/Google_Cracked-48x48.png" alt="bigInt Google Plus"></a>
<a href="URL TO YOUR FACEBOOK PAGE" class="facebook" target="_blank"><img src="images/Facebook_Cracked-48x48.png" alt="Follow Us On Facebook"></a>
<a href="URL TO YOUR TWITTER PAGE" class="twitter" target="_blank"><img src="images/Twitter_Cracked_48x48.png" alt="Follow Us On Twitter"></a>
<a href="URL TO YOUR LINKEDIN PAGE" class="linkedin" target="_blank"><img src="images/Linkedin_Cracked-48x48.png" alt=" photo Linkedin_Cracked.png"></a>
</div>

The html script is a simple link tag around an image tag with an outer div tag that tells the CSS what to style.  Just change the href URL to the address of your social media account so that when a user clicks the icon the user is directed to your social page.  Remember to change the source file name and extension to your image file name, and describe the image in the alt tag.  This is important as it helps people with screen readers to understand what the image is.

Add the script inside the <body> tags in your page.  Note that target=”_blank” has been added to the link in order to make sure the social media page opens in a new tab.

target="_blank"

Finally, we need the CSS script to get all this working.  The CSS script needs placing between <style></style> tags in the head of your html page or in the CSS style sheet.  But, remember to remove the tags if you use the style sheet method.

<style>
/* Spinning icon set */
.google{ background:url('../images/Linkedin_Cracked-48x48.png'); }
.facebook{ background:url('../images/Google_Cracked-48x84.png'); }
.twitter{ background:url('images/Facebook_Cracked-48x48.png'); }
.linkedin{ background:url('images/Twitter_Cracked_48x48.png'); }        

.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
} 

.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
</style>

The CSS calls on the transform property to apply transformation to the image. This enables image rotation.

This feature is supported in Internet Explorer 10 and Firefox.  Internet Explorer 9 supports an alternative, the -ms-transform property (2D transforms only) (w3Schools.com, 2014).

If you need support with CSS animations go to the excellent learning website w3Schools here.

There is a JavaScript function to do this, but that’s another blog for the future.

To see a working demo please visit our site here.

Advertisements