Create a Sheen Logo Effect with CSS
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:
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!
I thought the effect would have Tigerblood(tm). Sooo disappointing.
#winning
#winning indeed
This is great! Could you technically remove the need for a second image (shine.png) by using a CSS gradient with alpha transparency?
Possibly, I’d love to see it done!
I gave it a try. Animated transforms instead of background-position: http://codepen.io/abhisack/pen/JGEXYj
Hey, nice trick :)
That’s neat!
But could you put a neutral background when you show that png?
On a white background, we can’t see anything!
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.
Thanks for sharing! I’ve always loved the way you handle the hover state on your logo.
Well I like it! it worked.
Thank you! I use it to my work…
Bump missing image, is this effect still present in the re-design?
I did something like this a few years back:
http://jsfiddle.net/pixel67/ZxZ6B/