O'Reilly

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • 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....

  • Add Controls to the PHP Calendar

    I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar. After all, you don't want your...

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!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...