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
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

  • By
    Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.

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!