Place the backdrop filter on css pseudo element. This allows nested backdrop filters. Also you can use z-index: -1; to position your backdrop behind your elemets div { height: 100px; width: 100px; } .wrapper { position: absolute; } .outer, .inner { position: relative; } .outer::before { content: ”; position: absolute; width: 100%; height: 100%; -webkit-backdrop-filter: … Read more
This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only). http://jsfiddle.net/uw1mu81k/1/ -webkit-mask-box-image: url(http://yourimagehere); Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black … Read more
The filter property accepts multiple filters, so you can repeat drop-shadow: filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00); .gray { -webkit-filter: drop-shadow(3px 3px 5px #000000); filter: drop-shadow(3px 3px 5px #000000); } .yellow { -webkit-filter: drop-shadow(2px 2px 2px #ffcc00); filter: drop-shadow(2px 2px 2px #ffcc00); } .gray-yellow { -webkit-filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px … Read more
Just style the SVG element directly svg { -webkit-filter: invert(100%); /* safari 6.0 – 9.0 */ filter: invert(100%); } From IE9 and above you can use SVG in <img src=”” /> element. img { /* svg on an img tag */ -webkit-filter: invert(.75); /* safari 6.0 – 9.0 */ filter: invert(.75); } <img src=”https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg” /> … Read more
It’s definitely possible. Using filters, sample: img { -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222); }
If we refer to the specification we can read: A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in … Read more
Try this: .img-hor-vert { -moz-transform: scale(-1, -1); -o-transform: scale(-1, -1); -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } Updated fiddle: https://jsfiddle.net/7vg2tn83/1/ It wasn’t working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override … Read more
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color – you can’t saturate or rotate it. You’ll have to “colorize” it somehow, and the sepia filter is the only filter which do some form of colorizing. It would be easier if your … Read more
For a more simple and up to date answer: backdrop-filter: blur(6px); Note browser support is not perfect but in most cases a blur would be non essential.
@Dave was the first to post an answer to this (with working code), and his answer has been an invaluable source of shameless copy and pasting inspiration to me. This post began as an attempt to explain and refine @Dave’s answer, but it has since evolved into an answer of its own. My method is … Read more