CSS Social Ribbons

  • follow us in feedly
Published July 1, 2013 by Brad Knutson
CSS Social Ribbons

The ability to create ribbons with 100% CSS has always fascinated me. Any time I can reduce HTTP requests on a web page I’m all for it. Ribbons are used in print design frequently, and are making a strong push in web design.

On top of that, I’ve always liked Icon Fonts. Creating scalable vector images and using them as fonts is a great way to use social icons without making a separate HTTP request for an image or sprite. Using icon fonts also allows us to use CSS transitions on the icons so we can ease a color transition.

So I decided to put these two ideas together.

I decided to use the ‘entypo‘ icon font from weloveiconfonts.com.

Take a look at the demo that I came up with.

CSS Social Ribbons Example

View Demo

The effect is pretty eye-catching, and it’s even more impressive knowing that there are no images involved (except the background image – but I could have used a solid color). How do we go about accomplishing this effect?

HTML

First, let’s set up the HTML structure.


<div class="container">
  <a href="https://www.facebook.com/" target="_blank">
	<button class="ribbon facebook">
		<span class="entypo-facebook"></span>
	</button>
  </a>
  <a href="https://plus.google.com/u/0/" target="_blank">
	  <button class="ribbon googleplus">
		<span class="entypo-gplus"></span>
	  </button>
  </a>
  <a href="https://twitter.com/" target="_blank">
	  <button class="ribbon twitter">
		<span class="entypo-twitter"></span>
	  </button>
  </a>
</div>

Nothing special here, except the class on the inner-most span tag. The entypo-* class is what is used to add the HTML character code to produce the social icon. For example, the entypo-facebook class calls the entypo stylesheet and adds this line of CSS:

.entypo-facebook:before{content:"\f30c"}

This character code translates to the vector image of the Facebook icon.

CSS

The CSS is where all the heavy lifting is done. First, we’ll import the entypo stylesheet, then set about creating the ribbons and placing the icons.

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font-family: "entypo", sans-serif;
}
body {
  background: url('background.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px;
}
.container {
  margin: -150px auto;
  width: 460px;
}
.ribbon {
  float: left;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: blue;
  width: 150px;
  height: 250px;
  position: relative;
  color: white;
  padding: 5px;
  -webkit-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
  -ms-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
  -o-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
}
.ribbon:hover {
  margin-top: 145px;
  color: white;
}
.ribbon span {
  line-height: 20px;
  font-size: 5em;
}
.ribbon:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid blue;
  border-right: 100px solid transparent;
}
.ribbon:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-top: 50px solid blue;
  border-left: 100px solid transparent;
}
.facebook {
  background: #3b5998;
  color: #1e2e4f;
  margin-right: 5px;
}
.facebook:after {
  border-top-color: #3b5998;
}
.facebook:before {
  border-top-color: #3b5998;
}
.googleplus {
  background: #c4302b;
  color: #701c19;
  margin-right: 5px;
}
.googleplus:after {
  border-top-color: #c4302b;
}
.googleplus:before {
  border-top-color: #c4302b;
}
.twitter {
  background: #00a0d1;
  color: #00526b;
}
.twitter:after {
  border-top-color: #00a0d1;
}
.twitter:before {
  border-top-color: #00a0d1;
}

It might seem confusing, but if you play around with the CSS you’ll see it’s actually pretty simple. You can move around the ribbons, position them differently, modify the transitions, and so on.

The best part is that there is no extra HTTP requests to pull in images, which is a win in my book.

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

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="">