Silhouette a Png Image Using CSS

Silhouette a PNG image using CSS

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>

Colored silhouette using CSS

Instead of using greyscale you could set contrast to 0 then play with the other values. A high amount of saturate will help with making bolder colors.

#silhouette img {

  -webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);

  filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);

  opacity: 1;

}

<div id="original">

  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />

</div>

<div id="silhouette">

  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />

</div>

Image to a shadow (shape only) - CSS

with filter, you may turn contrast and brightness down to 0:

img:hover,

img + img {

  /* black */

  filter: contrast(0%) brightness(0%);

}

img + img:hover {

  /* gray */

  filter: contrast(0%) brightness(100%);

}

img {

  transition: 0.5s

}

<img src="https://i.stack.imgur.com/M4Qup.png" />

<img src="https://i.stack.imgur.com/M4Qup.png" />

Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS

You can do this using canvas with globalCompositeOperation set to destination-in. For example

var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;

var canvas_context = canvas.getContext("2d");

var img = new Image();
img.onload = function(){
    var msk = new Image();
    msk.onload = function(){
        canvas_context.drawImage(img, 0, 0);
        canvas_context.globalCompositeOperation = "destination-in";
        canvas_context.drawImage(msk, 0, 0);
        canvas_context.globalCompositeOperation = "source-over";
    };

    msk.src = 'silhouette.png';
}
img.src = 'pattern.jpg';

document.body.appendChild(canvas);

Darkening an image with CSS (In any shape)

You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.

CSS:

.tinted { opacity: 0.8; }

If you're interested in better browser compatability, I suggest reading this:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

If you're determined enough you can get this working as far back as IE7 (who knew!)

Note: As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.

Overlay non-transparent area of image with CSS

An effect like this can be achieved using webkit filters:

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
}

and a jsfiddle to demonstrate: http://jsfiddle.net/7Ljcgj79/

Note that this method won't be support on all browsers. To support IE, you could set this as a background-image and change it on hover.

Using two images for better browser compatibility

If you're willing to use two images, you can achieve the same effect with much wider browser support by simply swapping the image on hover. Something like this:

div {
    height: 400px;
    width: 400px;
    background-image: url('http://i.stack.imgur.com/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('http://i.stack.imgur.com/gZw5u.png');
}

And an updated fiddle: http://jsfiddle.net/7Ljcgj79/2/

Improved example supporting all colors

I hadn't visited this post in awhile, and I definitely see now that it could have been improved (all I had to do was set brightness to 0%, nothing else was necessary and in fact had no effect). I wanted to give an updated answer, though, in response to a comment. This solution takes a little more work, but supports all colors, not just black! Here are the important bits:

HTML

<svg>
    <filter id="monochrome" color-interpolation-filters="sRGB">
        <!-- change last value of first row to r/255 -->
        <!-- change last value of second row to g/255 -->
        <!-- change last value of third row to b/255 -->
        <feColorMatrix type="matrix" 
            values="0 0 0 0 0.6588 
                    0 0 0 0 0.4745 
                    0 0 0 0 0.1686 
                    0 0 0 1 0" />
    </filter>
</svg>

CSS

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}

And an updated fiddle: http://jsfiddle.net/7Ljcgj79/16/

This technique takes advantage of the <fecolormatrix>, basically an advanced feature for defining your own filters. What I did here was to turn all color channels down to zero (all zeros for the first four columns), then add to them the constant value that I needed (that's the last column). Make sure in your <filter> tag to have type="matrix" and and in your <fecolormatrix> set color-interpolation-filters="sRGB" or it will interpret your matrix differently.

These posts were super helpful if you want to learn more: https://alistapart.com/article/finessing-fecolormatrix and https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

image on top of background color for html list using css

It should be

ul li.myclass {
    background: #ddd url('/w3images/myimage.png') left no-repeat;
}

If the image is transparent and/or doesn't cover the whole area, then the color comes into play. Example:

body {

   background:#ddd url('https://images.vexels.com/media/users/3/139694/isolated/lists/ef87f11007e9a062a4cf7f004fbe5443-bird-silhouette-4.png') left top no-repeat;

}

Silhouette a Png Image Using CSS