Create a Sheen Logo Effect with CSS

By  on  
Sheen Logo

I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and a CSS transition, I was able to create my own sheen effect.  Let's do it!

The Sheen Image

The following image is the same used by Addy:

Sheen

Larger than what I need but it can be cut down if needed.

The HTML

Two elements will be used for the sheen effect:  one element as the wrapper and an inner element which acts as the sheen.  I chose to use A and SPAN elements:

<a href="/" class="logo"><span></span></a>

Ahhhhh HTML.  Always the easy part.

The CSS

The wrapping A element styling is simple;  hide overflow to prevent the out-of-view sheen from displaying at normal state, and finally set the element dimensions:

a.logo {
	display: block;
	background: url("logo.png") 0 0 no-repeat;

	height: 70px;
	width: 91px;
	overflow: hidden;
}

The SPAN sheen element is also simple;  set the element dimensions and background-position out of view:

a.logo span {
	display: block;
	background: url("shine.png") -60px -80px no-repeat;	

	transition-property: all;
	transition-duration: .8s;

	height: 70px;
	width: 91px;
}

The last step is setting the :hover directive for the wrapping A:

a.logo:hover span {
	background-position: 100px 100px;
}

My case is a bit special;  my logo is more circular than square, so I need to use a bit of trickery in the form of border-radius to round off the sheen SPAN:

a.logo span {
	border-radius: 50%;
}

And that's how easy it is to create a sheen logo that animates upon hover!

The little code it takes to create this subtle effect is well worth it.  A few years ago I would have needed to use a JavaScript framework to make this happen -- now it's as easy as a few lines of CSS.  Have fun with this effect and let me know if you see methods to improve it!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

Discussion

  1. Erik

    I thought the effect would have Tigerblood(tm). Sooo disappointing.

  2. This is great! Could you technically remove the need for a second image (shine.png) by using a CSS gradient with alpha transparency?

  3. Hey, nice trick :)

  4. MaxArt

    That’s neat!
    But could you put a neutral background when you show that png?
    On a white background, we can’t see anything!

  5. Hey.
    I use a similar approach to make a shiny effect, and i’m playing with CSS and SVG masks. The demo can be seen in CodePen here:

    http://codepen.io/iamvdo/pen/maJhu

    I made a tutorial in my own site (in french) if someone is interested:

    http://www.css3create.com/Effet-de-brillance-en-CSS-et-SVG

    Vincent.

  6. Thanks for sharing! I’ve always loved the way you handle the hover state on your logo.

  7. Well I like it! it worked.

  8. Xaniar

    Thank you! I use it to my work…

  9. Bump missing image, is this effect still present in the re-design?

  10. Tony

    I did something like this a few years back:
    http://jsfiddle.net/pixel67/ZxZ6B/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!