Geek Answers Handbook

Partial transparency shading with CSS / Javascript

I use partially transparent CSS sprites (i.e. the object in the image is opaque, the background is transparent). I want to darken an image using CSS or Javascript. I need the images to change the levels of darkness, and it is impractical to make a separate image for each level of darkness.

If not for the transparent background, I could add a black layer on top of the image and change the opacity of this layer.

Here is basically what I have: http://jsfiddle.net/PXU6j/2/

<!-- SO is forcing me to add code --> <div class=logo>How do I make this darker?</div>
+7
source share
4 answers

How about this:

For each sprite, there is only one other image, completely black, but in the same form as the original. Silhouette if you want. Then create a div container, for example:

 <div class="silhouette"> <div class="sprite"></div> </div>

Then you can change the opacity of the div.sprite element and achieve the desired effect. I understand that this really does not solve the problem, but I don’t know of another way that does not use PHP, which does not even solve the problem completely.

+3
source

Throw a black color over it with an alpha channel above it:

http://jsfiddle.net/PXU6j/3/

Please note that I used

 background-color: #000000; opacity: 0.7;

but you can also use

 background-color: rgba(0, 0, 0, 0.7);

Change the opacity and you get different dark shades.

+11
source

There is no cross browser compatible solution.

You can use canvas manipulations using Camanjs or Pixastic , or you can use css3 filters . None of these methods work for non-html5-compatible browsers.

+1
source 
 Try this: <!DOCTYPE html> <html> <head> <script src="/assets/js/jquery-1.10.2.min.js"></script> </head> <body> <style> #testarea1, #testarea2 { position:absolute; background-color: #666; width: 200px; height: 200px; } #testarea2 { display: none; } </style> <script> $(document).ready(function(){ $("#testarea1").mouseover(function(){ $("#testarea2").css("background-color","yellow"); $("#testarea1").fadeOut(500); $("#testarea2").fadeIn(1500); }); $("#testarea2").mouseout(function(){ $("#testarea1").css("background-color","#666"); $("#testarea2").fadeOut(500); $("#testarea1").fadeIn(1500); }); }); </script> <p>Hover to see effect</p> <div id="testarea1">displayarea1</div> <div id="testarea2">displayarea2</div> </body> </html>
+1
source

More articles:


All Articles