• Advertisement
Sign in to follow this  

Question about CSS & images.

This topic is 3617 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Say I have two images like these: If I want to show a partly filled star, is it possible to do this with CSS trickery, without having to actually create the intermediate images? I get the feeling that I should be able to, using overflow and so on, but it would probably take me a whole day to figure it out :)

Share this post


Link to post
Share on other sites
Advertisement
Hm... Put the empty one as a background image for a div or something. Then, put the filled one in that div. Change the width or height of the filled star's picture via CSS.

Well, that's off the top of my head, but it's worth a shot!

Share this post


Link to post
Share on other sites
The part I'm stuck with is how to change the width without it scaling the image... I want the image to be clipped instead.

Does anyone know what CSS properties are involved here? Because if I can make it work, then a little javascript could make for a pretty sweet effect.

Share this post


Link to post
Share on other sites
You can use a span to show an effectively cropped image instead of the image tag.

.star_background {
width: 22px;
height: 20px;
background-image: url(star_empty.png);
background-repeat: no-repeat;
}
.star_foreground {
display: block;
width: 11px;
height: 20px;
background-image: url(star_full.png);
background-repeat: no-repeat;
}



<div class="star_background"><span class="star_foreground"></span></div>



The star_foreground class here has width 11px, to show the star half full.

By the way, those two images aren't exactly aligned - the empty one is 1 pixel smaller in both dimensions so when you use the above css/html it looks off - fixing the images so they are the same size (and match up) should fix it.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement