Is there any way to paint a white PNG image only with CSS?
-
I know there's a lot of cs filters, especially for webkit, but I can't find a solution to paint a white image. I tried to use a few filter combinations, but none of them made my image color. I can change the image only in the range of the shade.
grayscaleorsepia♪So, my question is, is there a way to change my completely white png to, like, red, using only sss?
As shown in this image:
Free translation https://stackoverflow.com/q/29280817/7394871 from the participant https://stackoverflow.com/users/2909109/bal%c3%a1zs-varga ♪
-
I tried to paint my white cloud image after @zekkai, and then wrote the filter generator.
var slider_huerotate = document.getElementById("slider_huerotate"); var slider_brightness = document.getElementById("slider_brightness"); var slider_saturate = document.getElementById("slider_saturate"); var slider_sepia = document.getElementById("slider_sepia");var output = document.getElementById("demo");
var cloud = document.getElementById('cloud');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor =brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)
output.innerHTML = filtercolor; // Отобразить значение ползунка по умолчанию
// Обновить текущее значение ползунка (каждый раз, когда вы перетаскиваете ручку ползунка)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor =brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)
cloud.style.filter = filtercolor;
output.innerHTML = filtercolor;
}slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor =brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)
cloud.style.filter = filtercolor;
output.innerHTML = filtercolor;
}slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor =brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)
cloud.style.filter = filtercolor;
output.innerHTML = filtercolor;
}slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor =brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)
cloud.style.filter = filtercolor;
output.innerHTML = filtercolor;
}.slider {
-webkit-appearance: none;
width: 350px;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}img{
width:300px;
z-index:100;
filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
padding:70px 25px 50px 25px;
}.wrapper{
width:600px;
height:500px;
padding:50px;
font-size:small;
}.slidecontainer_vertical{
margin-top: 50px;
transform: translate(0,300px) rotate(270deg);
-moz-transform: rotate(270deg);}
.left{
width:50px;
height:300px;
float:left;
}.cloud{
width:100%;
}.middle{
width:350px;
height:300px;
float:left;
margin:0 auto;
}.right{
width:50px;
height:300px;
float:left;
}#demo{
width:100%;
text-align:center;
padding-bottom:20px;
font-family: 'Handlee', cursive;
}<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class='left'>
<div class="slidecontainer_vertical">
<input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
<div class=middle>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id='cloud'>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&h=288"></div>
<div id='demo'></div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
</div>
<div class='right'>
<div class="slidecontainer_vertical">
<input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>Author ' s comments
I edited my code, and now you're probably able to create intense colors. I noticed that you can generate different colors when you add or delete "% " to the filter.
sepiaandsauratee.g.:"brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);"different"brightness(50%) sepia(100%) saturate(100%) hue-rotate(25deg);"By removing the symbol "%," you can get more intense colors.Free translation https://stackoverflow.com/a/49403090/7394871 from the participant https://stackoverflow.com/users/4290753/once ♪
