Today I am going to share an interesting and super-cool way to create a dynamic hover effect for images. I call this flexible format the "cookie-cutter effect", and you'll find out why in a moment. First, I shall go off on a tangent to maintain my reputation. This day in age, alot of navigational bars on web sites are image-based. Designers prefer to use graphics because it helps make the navigation more stunning and visually appealing (eye candy). Another thing that is becoming nearly mandatory is a hover effect for each of the links, meaning the image changes slightly when the user has positioned their cursor over it. This sends an instant visual cue to the user and lets them know exactly what they are pointing at. It may seem a little silly to think a user does not know where their mouse is pointed, but that certainly is not the case. The map in the center of your local shopping mall with a big arrow that says "You are here" is not silly either, it is actually helpful to some. Unfortunately, there is a pretty durastic downfall to using graphics for key elements such as navigation: they seriously lack extensibility. Say you want to increase the brightness of the hover effect by a few shades. This task, at the very least, requires knowledge of a graphics editing program. Usually some design talent is required too. In many cases this situation cannot be avoided, but the approach that I am discussing in this post will at the very least allow greater flexibility than the norm.
Let's Begin
Demo Image 1To demonstrate the technique, I went ahead and created some random image with my first name next to an odd shape. I stuck the shape in there to illustrate that this approach is applicable to more than just textual images. In the end, the main part of this image (currently black) will be able to be changed to any color we want using CSS only. Consider the base image to the right as the opposite of what we want. The plan is to turn the text into the transparent part, and the background of the the image to a solid white. The result will be somewhat of a template, if you will. We will be able to use any background color or image behind it to essentially alter the part of the image that is actually intended to represent the foreground. I became aware of the usefulness of this concept when I read Jason Santa Maria's post the other day about his new blogging expedition. He intends for each post to have its own design theme/color scheme. Currently, he has the inverse effect of what I am demonstrating in this post; the background color of his navigational links change. This was accomplished by using normal transparent images like the one above, and is still flexible and cool. But, what if you want the color of the text to change? I'm sure Jason knows the answer.
No comments:
Post a Comment