6

Anyone know of a way that I can get CSS to make a PNG image with transparency look completely blacked out like a silhouette?

In other words- Going from something like this:

http://susanbuck.net/upenn/examples/images/apple.jpg

To this:

alt text

It's for a lot of images which is why I'd like to avoid doing it via Photoshop.

Kyle
  • 65,599
  • 28
  • 144
  • 152
sbuck
  • 1,846
  • 4
  • 24
  • 40
  • 1
    I'm pretty sure this is one of those "CSS can't do it" examples. You're just gonna have to go into Photoshop (Actually pretty easy, shouldn't take more than two minutes :)) – Kyle Nov 18 '10 at 14:10

4 Answers4

13

You can apply to the image style like filter: contrast(0%) brightness(50%) to get a silhouette. Do not forget prefixes.

Johann
  • 391
  • 3
  • 5
4

I don't see how it could be done with pure css. Javascript might be able to acheive it but you may consider using server side programming instead. With php you could make a duplicate of your original png on the server and replace the non-transparent pixels with a single color. It would be similar to a watermarking function.

Dylan
  • 41
  • 1
  • Can you think of a way via JavaScript? It's for a student in one of my classes and we're just working with client side code - so while I could figure it out with PHP GD, I'm trying to find a solution applicable to the technology we're using. – sbuck Nov 18 '10 at 14:37
  • Susan, I was unable to find any way that doesn't rely on server processing. If you create a solution please post a link to it here. – Dylan Dec 02 '10 at 15:27
1

Nowdays, filter combined to mix-blend-mode could do too :

span {/* to be used to lay the 'blender mask' over img */
  position: relative;
  display: inline-block;
  overflow:hidden;
}

span img {
  display: block;/* erase gap */
  max-width:45vw;
  filter: contrast(150%);
}
span + span img {
  filter: contrast(120%) saturate(0%);/* saturate(0%) is  similar to grayscale(100%) */
}

span:before {
  content: '';
  z-index: 1;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%);
  mix-blend-mode: color-burn;/* bake it to black */
  animation : span 2s infinite alternate;
}
@keyframes span {
  from{
    transform:translate(-100%,0)
  }
  25%,50% {
    transform:translate(0,0);
  }
  to{
    transform:translate(100%,0)
  }
}
<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>
<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

I tried this code that uses a canvas, maybe you could refine it especially on lighter pixel inside the apple

<img id="canvasSource" src="apple.jpg" />

<br />

<canvas id="area" width="264" height="282"></canvas>

<!-- Javascript Code -->
<script type="text/javascript">
    window.onload = function() {
        var canvas = document.getElementById("area");
        var context = canvas.getContext("2d");
        var image = document.getElementById("canvasSource");
        context.drawImage(image, 0, 0);

        var imgd = context.getImageData(0, 0, 264, 282);
        var pix = imgd.data;
        var blackpixel = 21;
           for (var i = 0, n = pix.length; i < n; i += 4) {

            //console.log(pix[i], pix[i+1], pix[i+2]);
            if (i > 3) {
               if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
                   (Math.abs(pix[i-2] - pix[i+1]) > 10) &&
                   (Math.abs(pix[i-1] - pix[i+2]) > 10)
                ) {

                   pix[i  ] = blackpixel;  
                   pix[i+1] = blackpixel;  
                   pix[i+2] = blackpixel;

               }
            }
            else {
               if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
                  pix[i  ] = blackpixel;  
                  pix[i+1] = blackpixel;  
                  pix[i+2] = blackpixel;
               }
         }

        }
        context.putImageData(imgd, 0, 0);       

    };
</script>
  • 1
    Rad solution, fcalderan! Just had to add var blackpixel = 0; (fyi for anyone who stumbles onto this code). – sbuck Nov 19 '10 at 21:26