This is my current approach, only the shadow moves. http://tinkerbin.com/uekpe227

This is a second approach, both the shadow and the letters move. http://tinkerbin.com/LjiGDKa7

And in the last approach the shadow does not move. http://tinkerbin.com/ZDvUj6Pi

(Tip: hover over them to see the effect, you need a modern browser)

  • 1
    A CSS animation might seem cool because of the novelty, but for a logo, it would probably be better to use a graphics program to make the logo really pop. It'll be static, but it'll also look better and look that way all the time instead of just when the user mouses over it. Dec 25 '11 at 4:51
  • :/ Well I am aware of that, the issue at hand persists. Dec 25 '11 at 5:19

The real answer to this question comes directly from asking "How does it work in the real world?" An effect like this will seem artificial and wrong if it doesn't mimic what would happen with a physical object. This is a general principle that applies to all the effects we use on websites, on paper, or in movies. A classic error in Photoshop compositing is to have the light on the background coming from a different direction than the light on the subject. It can never look real, because the real world doesn't work that way. You have a similar problem here, so try this:

Put a flat object (a coin would work) on a white surface, shine a light on it, then lift it slightly. What happens to the object in your field of vision? What does the shadow do? They both move, but they move simultaneously, not one at a time. That's why none of your examples look right.

Any time you have a challenge like this, where you want something to give the illusion of a real-world analog, the thing to do is find that real-world analog or create it, then observe it until you are certainly you know what it looks like. Then go back to Photoshop or your application of choice and make it look the same there.

  • Great answer, however, when both move and it shutters, it is because it is moving the least possible step, a pixel. That is why I decided to just move the shadow. However I tweak the CSS it always ends up looking artificial if I mess with the text position. Here is a fourth attempt: tinkerbin.com/CHC5BgJE Ty for your time! Dec 25 '11 at 1:27
  • I modified your CSS to what I think works well. Much shorter transition (.05, rather than .5), less movement, more distinct shadow. Dec 25 '11 at 18:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.