<!doctype html>
<html>
<head>
<script type='text/javascript' src='/img_svg.js?rand=56476586853212122'></script>
<title>CSS3 Image Filters - RJM Programming - August, 2017 ... thanks to https://www.w3schools.com/cssref/css3_pr_filter.asp</title>

<script type='text/javascript'>

var filters=["blur(px)",
"brightness(%)",
"contrast(%)",
"drop-shadow(h-shadow v-shadow blur spread color)",
"grayscale(%)",
"hue-rotate(deg)",
"invert(%)",
"opacity(%)",
"saturate(%)",
"sepia(%)"];

function selchange(selo) {
var bs="";
if (selo == null) {
if (document.getElementById("sh-shadow").value != "" && document.getElementById("sv-shadow").value != "") {
if (document.getElementById("xblur").value != "") bs+=document.getElementById("xblur").value + document.getElementById("xblur").title + " ";
if (document.getElementById("sspread").value != "") bs+=document.getElementById("sspread").value + document.getElementById("sspread").title + " ";
//alert("drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")");
document.getElementById("myimage").style.filter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
document.getElementById("myimage").style.WebkitFilter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
}
} else if (selo.id.substring(1) == 'h-shadow') {
if (document.getElementById("sv-shadow").value != "") {
if (document.getElementById("xblur").value != "") bs+=document.getElementById("xblur").value + document.getElementById("xblur").title + " ";
if (document.getElementById("sspread").value != "") bs+=document.getElementById("sspread").value + document.getElementById("sspread").title + " ";
document.getElementById("myimage").style.filter = "drop-shadow(" + selo.value + selo.title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
document.getElementById("myimage").style.WebkitFilter = "drop-shadow(" + selo.value + selo.title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
}
} else if (selo.id.substring(1) == 'v-shadow') {
if (document.getElementById("sh-shadow").value != "") {
if (document.getElementById("xblur").value != "") bs+=document.getElementById("xblur").value + document.getElementById("xblur").title + " ";
if (document.getElementById("sspread").value != "") bs+=document.getElementById("sspread").value + document.getElementById("sspread").title + " ";
//alert("drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + selo.value + selo.title + " " + bs + document.getElementById("mycolour").value + ")");
document.getElementById("myimage").style.filter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + selo.value + selo.title + " " + bs + document.getElementById("mycolour").value + ")";
document.getElementById("myimage").style.WebkitFilter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + selo.value + selo.title + " " + bs + document.getElementById("mycolour").value + ")";
}
} else if (selo.id == 'xblur') {
if (document.getElementById("sh-shadow").value != "" && document.getElementById("sv-shadow").value != "") {
if (document.getElementById("xblur").value != "") bs+=document.getElementById("xblur").value + document.getElementById("xblur").title + " ";
if (document.getElementById("sspread").value != "") bs+=document.getElementById("sspread").value + document.getElementById("sspread").title + " ";
document.getElementById("myimage").style.filter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
document.getElementById("myimage").style.WebkitFilter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
}
} else if (selo.id.substring(1) == 'spread') {
if (document.getElementById("sh-shadow").value != "" && document.getElementById("sv-shadow").value != "") {
if (document.getElementById("xblur").value != "") bs+=document.getElementById("xblur").value + document.getElementById("xblur").title + " ";
if (document.getElementById("sspread").value != "") bs+=document.getElementById("sspread").value + document.getElementById("sspread").title + " ";
document.getElementById("myimage").style.filter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
document.getElementById("myimage").style.WebkitFilter = "drop-shadow(" + document.getElementById("sh-shadow").value + document.getElementById("sh-shadow").title + " " + document.getElementById("sv-shadow").value + document.getElementById("sv-shadow").title + " " + bs + document.getElementById("mycolour").value + ")";
}
} else {
document.getElementById("myimage").style.filter = selo.id.substring(1) + "(" + selo.value + selo.title + ")";
document.getElementById("myimage").style.WebkitFilter = selo.id.substring(1) + "(" + selo.value + selo.title + ")";
}
}

function cfol() {
var i, j, prefix='Please select ', zero=0, suffix=' below';
for (i=0; i<filters.length; i++) {
if (filters[i].indexOf('%') != -1) {
document.getElementById(filters[i].split('(')[0]).innerHTML='<select title="%" id="s' + filters[i].split('(')[0] + '" onchange="selchange(this);"><option value="">' + prefix + filters[i].split('(')[0].substring(zero) + suffix + ' ...</option></select>';
} else if (filters[i].indexOf('px') != -1) {
document.getElementById(filters[i].split('(')[0]).innerHTML='<select title="px" id="s' + filters[i].split('(')[0] + '" onchange="selchange(this);"><option value="">' + prefix + filters[i].split('(')[0].substring(zero) + suffix + ' ...</option></select>';
} else if (filters[i].indexOf('deg') != -1) {
document.getElementById(filters[i].split('(')[0]).innerHTML='<select title="deg" id="s' + filters[i].split('(')[0] + '" onchange="selchange(this);"><option value="">' + prefix + filters[i].split('(')[0].substring(zero) + suffix + ' ...</option></select>';
} else {
// h-shadow v-shadow blur spread color
document.getElementById(filters[i].split('(')[0]).innerHTML='<select title="px" id="s' + filters[i].split('(')[1].split(' ')[0] + '" onchange="selchange(this);"><option value="">' + filters[i].split('(')[1].split(' ')[0].substring(0,1).toUpperCase() + filters[i].split('(')[1].split(' ')[0].substring(1) + suffix + ' ...</option></select><br>';
document.getElementById(filters[i].split('(')[0]).innerHTML+='<select title="px" id="s' + filters[i].split('(')[1].split(' ')[1] + '" onchange="selchange(this);"><option value="">' + filters[i].split('(')[1].split(' ')[1].substring(0,1).toUpperCase() + filters[i].split('(')[1].split(' ')[1].substring(1) + suffix + ' ...</option></select><br>';
document.getElementById(filters[i].split('(')[0]).innerHTML+='<select title="px" id="x' + filters[i].split('(')[1].split(' ')[2] + '" onchange="selchange(this);"><option value="">' + filters[i].split('(')[1].split(' ')[2].substring(0,1).toUpperCase() + filters[i].split('(')[1].split(' ')[2].substring(1) + suffix + ' ...</option></select><br>';
document.getElementById(filters[i].split('(')[0]).innerHTML+='<select title="px" id="s' + filters[i].split('(')[1].split(' ')[3] + '" onchange="selchange(this);"><option value="">' + filters[i].split('(')[1].split(' ')[3].substring(0,1).toUpperCase() + filters[i].split('(')[1].split(' ')[3].substring(1) + suffix + ' ...</option></select><br>';
document.getElementById(filters[i].split('(')[0]).innerHTML+='<input onchange="selchange(null);" type="color" id="mycolour" value="#ff0000"></input>';
}
zero=1;
suffix='';
if (eval(1 + i) < filters.length) prefix=filters[eval(1 + i)].split('(')[0].substring(0,1).toUpperCase();
if (filters[i].indexOf('%') != -1) {
for (j=0; j<331; j++) {
document.getElementById('s' + filters[i].split('(')[0]).innerHTML+='<option value="' + j + '">' + j + '%</option>';
}
} else if (filters[i].indexOf('px') != -1) {
for (j=1; j<251; j++) {
document.getElementById('s' + filters[i].split('(')[0]).innerHTML+='<option value="' + j + '">' + j + 'px</option>';
}
} else if (filters[i].indexOf('deg') != -1) {
for (j=0; j<360; j++) {
document.getElementById('s' + filters[i].split('(')[0]).innerHTML+='<option value="' + j + '">' + j + '°</option>';
}
} else {
for (j=1; j<251; j++) {
document.getElementById('s' + filters[i].split('(')[1].split(' ')[0]).innerHTML+='<option value="' + j + '">' + j + 'px</option>';
}
for (j=1; j<251; j++) {
document.getElementById('s' + filters[i].split('(')[1].split(' ')[1]).innerHTML+='<option value="' + j + '">' + j + 'px</option>';
}
for (j=1; j<251; j++) {
document.getElementById('x' + filters[i].split('(')[1].split(' ')[2]).innerHTML+='<option value="' + j + '">' + j + 'px</option>';
}
for (j=1; j<251; j++) {
document.getElementById('s' + filters[i].split('(')[1].split(' ')[3]).innerHTML+='<option value="' + j + '">' + j + 'px</option>';
}
}
}
}

</script>
</head>
<body onload='cfol();'>
<h1>CSS3 Image Filters</h1>
<h3>RJM Programming - August, 2017</h3>
<h4>Thanks to <a target=_blank title='https://www.w3schools.com/cssref/css3_pr_filter.asp' href='https://www.w3schools.com/cssref/css3_pr_filter.asp'>https://www.w3schools.com/cssref/css3_pr_filter.asp</a></h4>
<table style='width:100%;'>
<tbody>
<tr><td id='blur'></td><td id='brightness'></td><td id='contrast'></td><td id='drop-shadow'></td><td id='grayscale'></td><td id='hue-rotate'></td><td id='invert'></td><td id='opacity'></td><td id='saturate'></td><td id='sepia'></td></tr>
</tbody>
</table>
<img id='myimage' src='holiday_snaps.jpg' title='Image'></img>
</body>
</html>