Sign in to follow this  
d000hg

Question about CSS & images.

Recommended Posts

d000hg    1199
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
Ezbez    1164
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
d000hg    1199
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
prtc22    144
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

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