Does anyone have any tips on how to use CSS to turn a PNG image with transparency into a black silhouette?
For example, from this:
To this:
I have multiple images to do this for which is why I prefer not to use Photoshop.
Does anyone have any tips on how to use CSS to turn a PNG image with transparency into a black silhouette?
For example, from this:
To this:
I have multiple images to do this for which is why I prefer not to use Photoshop.
To achieve a silhouette effect, try using the following CSS properties:
filter: contrast(0%) brightness(50%)Using pure CSS alone, it appears challenging to achieve this task. However, with the implementation of JavaScript, it might be feasible, although opting for server-side programming could be a more efficient solution. For instance, utilizing PHP allows you to duplicate your initial PNG file on the server and substitute the opaque pixels with a uniform color, akin to a watermarking feature.
Check out this code that utilizes a canvas element, it may need some tweaking to enhance the visibility of lighter pixels inside the apple image.
<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>
Currently, the combination of filters with mix-blend-mode can also achieve this effect:
span {/* use to overlay 'blender mask' on img */
position: relative;
display: inline-block;
overflow:hidden;
}
span img {
display: block;/* remove gap */
max-width:45vw;
filter: contrast(150%);
}
span + span img {
filter: contrast(120%) saturate(0%);/* saturate(0%) is equivalent 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;/* blend 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.sstatic.net/somZ7.jpg"/></span>
<span><img src="https://i.sstatic.net/somZ7.jpg"/></span>My email sending process involves using a template: $content='Message'; Yii::$app->mailer->compose('@app/mail/templates/templ', ['content'=>$content]) ->setFrom('<a href="/cdn-cgi/l/email-protection" c ...
I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...
Looking for a way to enhance the user experience of my shopping cart on Android and iPhone/iPod, I want to implement a feature similar to the iTunes Store where the price flies down to the total when a purchase is made. Since I use jQuery (not UI) on this ...
I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...
Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...
I am encountering an issue with my CSS while trying to create a dropdown on hover. The problem seems to be related to nested classes inside a div structure. It appears that the dropdown list is not displaying properly, leading me to believe there might be ...
After completing the development of a website at , I tested it on my PC and everything looked good. However, when I asked a friend to review the site, she pointed out that on mobile devices, the section with 4 boxes was appearing squeezed together despite ...
Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...
Here is my custom HTML code including the CSS styles: <!DOCTYPE html> <html> <head> <style> table td { border: 1px solid black; } li { margin-left: 3 ...
How can I change the image arrow when it is clicked? Currently, I have this code snippet: http://codepen.io/anon/pen/qEMLxq. However, when the image is clicked, it changes but does not hide. <a id="Boton1" class="button" onClick="showHide()" href="j ...
My coworker and I collaborated on a website that features a FAQ page. Each question is followed by an "Answer" spoiler button. By clicking the button, the answer is revealed below the current question and above the next one. Clicking the button again hides ...
Currently, I am facing an issue on a website where I cannot make any changes to the CSS stylesheet. Whenever I attempt to modify a style, it appears to work temporarily but then reverts back to its original state once I release the mouse. It seems like the ...
On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...
I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...
Here is the HTML code snippet that I am working with: <div class="top"> <div class="header title">Some Big Header Goes Here</div> <div class="sub-header title">The fancyness enters here.</div> <a hr ...
Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...
My goal is to create a functionality where clicking on a button within a specific row opens up a matDialog box displaying all the contents of that row. Below is the HTML snippet: <tr *ngFor="let u of users"> <td data-label="ID& ...
In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...
I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...
Currently, I am working on a user's profile page where the user can upload their profile picture using a file dialog. However, when the file is moved to my local server's folder, it only receives permissions as 0644. I am looking to resize this ...