CSS Flat Social Icons with Long Shadows

  • follow us in feedly
Published March 11, 2014 by Brad Knutson
CSS Flat Social Icons with Long Shadows

Tonight I’d like to continue my recent obsession with flat design and show you a few cool social icon examples. I wanted to come up with a small set of social icons that is completely image free. So I grabbed my favorite icon font Font Awesome from WeLoveIconFonts.com and got to work.

One particular design trend I’ve enjoyed lately is the “long shadow” effect. You know the one – where the shadow extends from the object all the way to the edge of the container.

That’s the one. I wanted to accomplish this with icon fonts and CSS. Turns out, it’s actually not as complicated as you might think!

Let’s dive in to some markup to see how I accomplished this.

Twitter

Use this HTML:

Facebook

Use this HTML:

Google+

Use this HTML:

Linkedin

Use this HTML:

Pinterest

Use this HTML:

Github

Use this HTML:

Pretty neat, right? I really like how these icons look, and the nerd in me loves that this is 100% image free. One could even add CSS transitions or a hover state and really make these icons look cool…but that’s for another post.

Let’s look at the CSS required to create these icons.

The CSS

I’ll make this really easy for you. If you want to create these effects on your site exactly as they appear here, just add these two lines to the head section of your HTML.

TL;DR

In case you’d prefer an explanation, here is how the stylesheet works more in-depth.

This chunk makes sure we apply the FontAwesome font to each icon, and styles each icon with base properties for sizing consistency.

One important aspect of this CSS chunk is the overflow: hidden; line, because it ensures that the shadow doesn’t extend outside the boundaries of the element.

Next comes the long shadow.

It looks like a lot, but it’s actually quite simple. Essentially we’re creating the long CSS shadow by overlaying shadow after shadow and moving them down and to the right 1 pixel at a time. I chose 150 pixels because it fit my icons good, but a smaller or larger number might be required for your implementation.

It seems a bit repetitive to write all that CSS, doesn’t it? If you use a CSS preprocessor like SCSS, you can accomplish this a lot easier.

SCSS

Then, for the .fontawesome-twitter class just add this:

That’s a much quicker solution in my opinion, but not everyone has access to use a CSS preprocessor.

So what do you think? Do you like the icons? Do you think they are practical? Let me know in the comments below!

Here is the stylesheet in all it’s glory, in case you’d rather download it yourself.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thought on “CSS Flat Social Icons with Long Shadows

  1. Marry. K

    Thanks Brad for this scripted post. Few days back only I was searching for this.

    I have bookmarked this post for future reference. Thanks once again.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">