Gamma-Corrected Colorizing

Developer
Kseso
Size
2,877 Kb
Views
46,552
  1. Gamma-Corrected Colorizing Previews
  2. Gamma-Corrected Colorizing HTML Codes
  3. Gamma-Corrected Colorizing CSS Codes
  4. Gamma-Corrected Colorizing JS Codes

How do I make an gamma-corrected colorizing?

With svg filter feComponentTransfer on css property filter: url(#id). What is a gamma-corrected colorizing? How do you make a gamma-corrected colorizing? This script and codes were developed by Kseso on 21 August 2022, Sunday.

Gamma-Corrected Colorizing Previews
IQ Test

Gamma-Corrected Colorizing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gamma-Corrected Colorizing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img class='correction' src='https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&w=1080&h=1080&fit=max&fm=jpg&s=b3ae957bb69ede4c8b097ccbce89b4b2' alt />
<nav class='control'> <p>Track the inputs for each chanel</p> <label for='tintaR'>RED
<input type="range" min="0" max="2" value="1" step="0.05" id="tintaR" oninput="feFunc()"/> <output for='tintaR' id='VtintaR'>1</output> </label> <label for='tintaG'>GREEN
<input type="range" min="0" max="2" value="1" step="0.05" id="tintaG" oninput="feFunc()"/> <output for='tintaG' id='VtintaG'>1</output> </label> <label for='tintaB'>BLUE
<input type="range" min="0" max="2" value="1" step="0.05" id="tintaB" oninput="feFunc()"/> <output for='tintaB' id='VtintaB'>1</output> </label> <p class='tester correction'>TESTER</p>
</nav>
<svg class='hide'> <defs> <filter id="filterCanal"> <feComponentTransfer> <feFuncR type="gamma" exponent="1" id='filtroR' /> <feFuncG type="gamma" exponent="1" id='filtroG' /> <feFuncB type="gamma" exponent="1" id='filtroB' /> </feComponentTransfer> </filter> </defs>
</svg>
<span class='aviso'>Link the <a href='http://escss.blogspot.com/2015/05/filtro-SVG-feComponentTransfer.html'>POST</a>, show the PEN</span> <script src="js/index.js"></script>
</body>
</html>

Gamma-Corrected Colorizing - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Signika:300);
*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative;}
html, body { min-height: 100vh; font-family: Megrim; font-family: Signika; font-weight: 300; color: #fff;
}
.correction { width: 100%; -webkit-filter: url(#filterCanal) contrast(2); filter: url(#filterCanal) contrast(2);
}
.control { background: rgba(255,255,255,.3); position: absolute; right:0; top:0; padding: 1rem; text-align: center; cursor: pointer;
}
p {font-size: 1.5rem;}
[type='range'] { display: block; width: 100%;
}
label {display: block;}
[for='tintaR']{ background: rgba(255,0,0,.5);
}
[for='tintaG']{ background: rgba(0,255,0,.5);
}
[for='tintaB']{ background: rgba(8,0,255,.5);
}
output[for] { background: transparent;
}
.tester { background: -webkit-linear-gradient(left,red 33.2%,green 33.3%,green 66.5%,blue 66.6%); background: linear-gradient(to right,red 33.2%,green 33.3%,green 66.5%,blue 66.6%); text-align: center; letter-spacing: 1rem; margin-top: 1rem; box-shadow: 0 0 3px 1px rgba(0,0,0,.5);
}
.hide { position: absolute; height: 0; width: 0; overflow: 0; left: -100%; }
.aviso { background: #EA8E39; position: fixed; bottom: 0rem; left: 1rem; color: #fff; line-height: 2rem; border-radius: 5px 0 0; box-shadow: 0 0 4px rgba(0,0,0,.4); z-index: 100;
}
.aviso a { text-decoration: none; color: #000;
}

Gamma-Corrected Colorizing - Script Codes JS Codes

var tintaR = document.getElementById('tintaR');
var tintaG = document.getElementById('tintaG');
var tintaB = document.getElementById('tintaB');
var reviraR = document.getElementById('filtroR');
var reviraG = document.getElementById('filtroG');
var reviraB = document.getElementById('filtroB');
function feFunc() { canalR = tintaR.valueAsNumber; canalG = tintaG.valueAsNumber; canalB = tintaB.valueAsNumber; reviraR.setAttribute('exponent', canalR ); reviraG.setAttribute('exponent', canalG ); reviraB.setAttribute('exponent', canalB ); document.querySelector('#VtintaR').value = canalR; document.querySelector('#VtintaG').value = canalG; document.querySelector('#VtintaB').value = canalB;
}
Gamma-Corrected Colorizing - Script Codes
Gamma-Corrected Colorizing - Script Codes
Home Page Home
Developer Kseso
Username Kseso
Uploaded August 21, 2022
Rating 4
Size 2,877 Kb
Views 46,552
Do you need developer help for Gamma-Corrected Colorizing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kseso (Kseso) Script Codes
Name
Automanual-K gallery
DYNAMIC INSIDE BLUR PURE CSS
Parallax pure Css
MagiCSSKroll
Animated Border Menus pure Css
Slicing images pure Css and more
Auto Honeycomb CSS Grid Layout
RWD table
DYNAMIC OUTSIDE BLUR PURE CSS
Random animation puere CSS
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!