Create a Sheen Logo Effect with CSS

Written by David Walsh on February 18, 2013 · 10 Comments
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!

Comments

  1. 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. 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. Thank you! I use it to my work…

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Install Chrome Store Web Apps with JavaScript
Newer
4 More Tech Recruiter Do's and Dont's