How to create halftone effect in images with pure CSS?
Question
This is my CSS code:
<TITLE>My Page</TITLE> <head> <style>.retroimage1 { filter: blur(0.5px) grayscale(100%); } </style> </head> <img class="retroimage1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg"> <p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>
What I want to try and do is make the image both grayscale and have dots on it - like the images below of a printed page.
Using only CSS with no Javascript, how can I achieve this halftone in my HTML:
in addition to the grayscale filter (the original image had sepia in this scan).
I would appreciate any help, been trying on my own and looking on Google but getting nowhere with this. New-ish to filters in CSS, appreciate any help.
2 answers
solution1
1 2020-06-21 15:08:42
I think this is what you need:
https://codepen.io/ycw/pen/NBjqze
HTML
<h1>
<select id="elStyle">
<option>original</option>
<option selected="selected">char</option>
<option>dots</option>
<option>emoji</option>
<option>line</option>
</select>
<select id="elSample">
<option selected="selected">cat</option>
<option>face</option>
</select>
<select id="elKernel">
<option>3</option>
<option selected="selected">5</option>
<option>7</option>
<option>11</option>
<option>19</option>
</select>
</h1>
<div class="frame" id="elFrame"><img id="elImg"/></div>
CSS
body {
display:flex; flex-flow:column nowrap;
justify-content:center;
align-items:center;
min-height:100vh;
}
select {
margin-bottom:0.5em;
}
.frame {
position:relative;
width:90vw;
height:90vh;
}
.frame canvas, .frame img {
object-fit:contain;
width:100%;
height:100%;
display:block;
position:absolute;top:0;left:0;
}
#elImg {
opacity:0;
transition:all 1s;
}
#elImg.show {
opacity:1;
}
JS in the pen. Too much code.
solution2
0 2020-06-21 11:38:01
You should use the image with div as background, not as img tag. Because you will have to combine it with sepia filter and dotted image.
div { height: 135px; width: 180px; filter: blur(0.5px) grayscale(100%) sepia(1) brightness(.8); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=), url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg") 0 0 / contain no-repeat; }
<div></div> <p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.