Treehouse

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!

Treehouse Learning

Recent Features

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

  • PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

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!