Sign in to follow this  

Question about CSS & images.

This topic is 3548 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
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

This topic is 3548 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this