<html>
<head>
<title>Backdrop Filter - RJM Programming - June, 2025 ... thanks to https://www.w3schools.com/cssref/tryit.php?filename=trycss3_backdrop-filter</title>
<script type=text/javascript>
var is64=false, plus=' ', lastuserstyle='', iyo=0;
var defoptit='background-position-x:right;';
var origdefopt=defoptit;
var divih='';
var clnm=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1].split('&')[0]).replace(/\+/g,' ') : '';
var eqis='=';
if ((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).indexOf('taidea' + encodeURIComponent('=')) != -1) {
eqis=encodeURIComponent('=');
}
//alert(location.hash);
var inta='', startstyle='';
var intas=[];
if (document.URL.indexOf('Cjxi') != -1) {
//alert('here');
intas=document.URL.split('Cjxi');
for (var inm=1; inm<intas.length; inm++) {
intas[eval(-1 + inm)]=decodeURIComponent(decodeURIComponent(escape(atob('Cjxi' + intas[inm]))));
//alert(intas[eval(-1 + inm)]);
}
}
inta=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('taidea' + eqis)[1] ? ourdecodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('taidea' + eqis)[1].split('&')[0]).replace(/\+/g,plus) : '';
if (inta.indexOf('background') == 0) {
startstyle=inta.replace(/\ \!important/g,'');
inta='';
}
//alert(inta);
var preint='';
preint=inta.split('div')[0];
if (eval('' + intas.length) == 0) {
intas=(inta + ' ').substring(preint.length).split('<div');
}
var nextinta='';
var woois=null;
var sofares='';

function changethis(selo) {
var selovalue=selo.value;
var keepers='', ik=0, prefixy='';
if (selovalue == ' ') {
var yourown=prompt('Please enter your own CSS styling clause ending with a semicolon ;', '');
if (yourown == null) { yourown=''; }
if (yourown.trim().replace(/\;$/g,'') != '') {
if (clnm != '' || 9 == 9) { for (var inb=0; inb<20; inb++) { yourown=yourown.replace(/\:\ /g,':'); } }
if (yourown.trim().slice(-1) == ';') {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + yourown.trim() + '</option>';
document.getElementById('mysel').value='yoclass' + iyo;
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + (' { ' + yourown.trim() + ' } </sty' + 'le>').replace('; }',' !important; }');
iyo++;
if (document.getElementById('taidea').value.indexOf(yourown.trim()) == -1) {
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') != -1) {
//alert('here');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + '');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
} else {
prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ',';
//document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ',');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + yourown.trim().replace(/\;$/g,'') + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
}
}
changethis(document.getElementById('mysel'));
} else {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + yourown.trim() + ';</option>';
document.getElementById('mysel').value='yoclass' + iyo;
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + ' { ' + yourown.trim() + ' !important; } </sty' + 'le>';
iyo++;
if (document.getElementById('taidea').value.indexOf(yourown.trim()) == -1) {
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') != -1) {
//alert('Here');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="-webkit-' + yourown.trim() + ';' + yourown.trim() + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
} else {
prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ',';
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + '-webkit-' + yourown.trim() + ';' + yourown.trim().replace(/\;$/g,'') + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
}
}
changethis(document.getElementById('mysel'));
}
}
return '';
}

if (1 == 1) {
if (document.getElementById('divhost').innerHTML.indexOf(' class="yo') != -1) {
for (ik=1; ik<document.getElementById('divhost').innerHTML.split(' class=')[1].replace(/^\"/g,' ').split('"')[0].split(' ').length; ik++) {
keepers+='' + document.getElementById('divhost').innerHTML.split(' class=')[1].replace(/^\"/g,' ').split('"')[0].split(' ')[ik].split(' ')[0].split('"')[0] + ' ';
}
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + keepers + selovalue + '" ');
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
} else if (document.getElementById('divhost').innerHTML.replace(' class="transbox', '').indexOf(' class="') != -1) {
if (document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].indexOf(' yo') != -1) {
for (ik=1; ik<document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].split(' yo').length; ik++) {
keepers+='yo' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].split(' yo')[ik].split(' ')[0].split('"')[0] + ' ';
}
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + keepers + selovalue + '" ');
} else {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + selovalue + '" ');
}
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
} else {
//alert(selovalue + ' ... ' + document.getElementById('divhost').innerHTML.replace('">', '-webkit-' + selovalue.replace(';',' !important;') + selovalue.replace(';',' !important;') + '">'));
if (selovalue.indexOf('backdrop-filter:') != -1) {
if (document.getElementById('divhost').innerHTML.indexOf('-webkit-backdrop-filter:') != -1) {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('-webkit-backdrop-filter:' + document.getElementById('divhost').innerHTML.split('-webkit-backdrop-filter:')[1].split(';')[0] + ';' + 'backdrop-filter:' + document.getElementById('divhost').innerHTML.split('-webkit-backdrop-filter:')[1].split(';')[0] + ';', '');
}
}
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace('">', '-webkit-' + selovalue.replace('NOWAY;JOSE',' !important;') + selovalue.replace('NOWAY;JOSE',' !important;') + '">');
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
}
lastuserstyle=selovalue;
document.getElementById('defopt').innerText='Styling ideas [' + lastuserstyle + ']';
return '';
}
if (selovalue == '' && origdefopt != '') {
selovalue=origdefopt;
}
if (selovalue != '') {
if (document.getElementById('mybq') && document.getElementById('divhost')) {
var thisih=document.getElementById('divhost').innerHTML;
if (defoptit != '' && thisih.indexOf(defoptit + '">') != -1) {
thisih=thisih.replace(defoptit + '">', selovalue + '">');
} else if (thisih.indexOf('">') != -1) {
thisih=thisih.replace('">', selovalue + '">');
} else {
thisih=thisih.replace(' style="', ' style="' + selovalue);
}
document.getElementById('divhost').innerHTML=thisih.replace(' data-current="' + defoptit + '"', ' data-current="' + selovalue + '"');
defoptit=selovalue;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
}
}
}

function onl(altta) {
var outta=inta;
if (altta == '' && eval('' + intas.length) > 1) {
//alert(inta);
//alert(preint + intas[0]);
nextinta=inta.replace(preint + intas[0], '');
document.getElementById('hrbot').style.display='block';
if (is64) {
document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + ourencodeURIComponent(nextinta);
} else {
document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + encodeURIComponent(nextinta);
}
document.getElementById('ifbot').style.display='block';
inta=preint + intas[0];
outta=inta;
intas=[];
}
if (altta == '' && inta != '') {
if (eval('' + inta.split('-webkit-').length) > 1) {
origdefopt=(inta.split('-webkit-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,'');
document.getElementById('defopt').innerHTML='Styling idea [' + origdefopt + ']';
defoptit=origdefopt;
}
}
if (altta != '') { outta=altta; }
if (outta == '') {
outta=document.getElementById('divhost').innerHTML;
} else {
document.getElementById('divhost').innerHTML=outta;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
if (altta != '') {
//alert('yes');
if (altta.indexOf('-webkit-') != -1) {
//alert('Yes');
if (eval('' + altta.split('-webkit-').length) > 1) {
defoptit=(altta.split('--webkit-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,'');
document.getElementById('defopt').innerHTML='Styling idea [' + defoptit + ']';
}
}
}
}
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') == -1 && document.getElementById('taidea').value.indexOf(' data-yourown="') != -1) {
var newuns=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0].split(';,');
for (var inew=0; inew<newuns.length; inew++) {
if (document.getElementById('mysel').innerHTML.indexOf(newuns[inew].replace(/\;$/g,'') + ';') == -1) {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + newuns[inew].replace(/\;$/g,'') + ';</option>';
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + ' { ' + newuns[inew].replace(/\;$/g,'') + ' !important; } </sty' + 'le>';
iyo++;
}
}
}
if (altta == '') {
if (startstyle != '') {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(document.getElementById('divhost').innerHTML.split(' style="')[1].split('"')[0], startstyle);
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
}
sofares=document.getElementById('divhost').innerHTML;
setInterval(keeplooking, 5000);
} //else if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {
//sofares+=document.getElementById('divhost').innerHTML;
//}

if (clnm.trim() != '') {
if (document.getElementById('divhost').innerHTML.indexOf(' class="') == -1) {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + clnm + '" ');
} else {
document.getElementById('mybq').className=clnm;
}
iyo=100;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
clnm=' ';
}
}

function keeplooking() {
if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {
var vs=sofares;
sofares=document.getElementById('divhost').innerHTML + vs;
//alert(sofares);
}
}


function doemail() {
var anchor=null;
var emis=prompt('Please enter email address to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=Backdrop%20filter%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares));
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();

} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
} else if (emis.trim() != '' && emis.trim().replace(/^\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})$/g,'') != emis.trim()) { // thanks to https://stackoverflow.com/questions/2113908/what-regular-expression-will-match-valid-international-phone-numbers
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

function juststyle(inswas) {
//alert(inswas);
if (inswas.indexOf(' style="') != -1) {
if (('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
lastuserstyle=('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/\ \!important/g,'').replace(/\;\,/g,';').replace(/\;/g,' !important;').replace(/\:/g,': ');
return inswas.split(' style="')[1].split('"')[0].replace(/\:/g,': ') + lastuserstyle;
}
return inswas.split(' style="')[1].split('"')[0] + lastuserstyle;
}
return inswas + lastuserstyle;
}

function ourencodeURIComponent(insis) {
//alert(btoa(unescape(encodeURIComponent('<div'))));
//alert(btoa(unescape(encodeURIComponent(insis))));
//alert(atob(btoa(unescape(encodeURIComponent(insis)))));
var outsis=insis;
try {
outsis=encodeURIComponent(juststyle(insis.split('><div')[0] + '>').replace(/\>\>$/g,'>'));
} catch(excf) {
outsis=btoa(unescape(encodeURIComponent(juststyle(insis.split('><div')[0] + '>').replace(/\>\>$/g,'>'))));
}
return outsis;
}

function ourdecodeURIComponent(insis) {
//alert(decodeURIComponent(insis));
//alert(insis);
if (decodeURIComponent(insis).indexOf('Cjxib') == 0) { // decodeURIComponent
is64=true;
plus='+';
//alert(decodeURIComponent(decodeURIComponent(escape(atob(insis)))));
return decodeURIComponent(decodeURIComponent(escape(atob(insis))));
}
return decodeURIComponent(insis);
}

function dosms(){
var anchor=null;
var emis=prompt('Please enter SMS number to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=Backdrop%20filter%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares));
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();

} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
} else if (emis.trim() != '' && emis.trim().replace(/^\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})$/g,'') != emis.trim()) { // thanks to https://stackoverflow.com/questions/2113908/what-regular-expression-will-match-valid-international-phone-numbers
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}
</script>
<style>
#divhost {
display: flex;
background-color: white;
}

div.background {
background:url('//www.rjmprogramming.com.au/Android/NalaLuna.jpg');
background-size: cover;
align-items: center;
display: flex;
justify-content: center;
height: 300px;
width: 300px;
}

div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: sepia(100%);
backdrop-filter: sepia(100%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
</style>
</head>
<body onload="onl('');">
<h1>Backdrop Filter</h1>
<h3>RJM Programming - June, 2025 ... <button onclick="setTimeout(function(){ doemail(); }, 2000);" id="butemail">Email 📧</button>  <button data-style=display:none; onclick="setTimeout(function(){ dosms(); }, 2000);" id="butsms">SMS 📟</button></h3><br>
<h4>Thanks to <a target=_blank title='https://www.w3schools.com/cssref/tryit.php?filename=trycss3_backdrop-filter' href='//www.w3schools.com/cssref/tryit.php?filename=trycss3_backdrop-filter'>https://www.w3schools.com/cssref/tryit.php?filename=trycss3_backdrop-filter</a></h4>
<div class=background id=divhost>
<div id="mybq" class="transbox" data-yourown="" style="background-color: rgba(255, 255, 255, 0.4);-webkit-backdrop-filter: sepia(100%);backdrop-filter: sepia(100%);">
The rain<br>
In Spain<br>
Falls mainly<br>
On the plain<br></div>
</div>
<br>
<form style='margin-left:20px;' id=myform method=GET action='./apply_a_mask.html'>
<textarea onblur="onl(this.value);" style='font-family:Courier New;font-weight:bold;background-color:#f0f0f0;' rows=10 cols=120 id=taidea name=taidea>
<div id="mybq" class="transbox" data-yourown="" style="background-color: rgba(255, 255, 255, 0.4);-webkit-backdrop-filter: sepia(100%);backdrop-filter: sepia(100%);">
The rain<br>
In Spain<br>
Falls mainly<br>
On the plain<br></div>
</textarea><br><br>
<input style="background-color:yellow;" type=submit value=Reload></input> ... <select onchange="changethis(this);" id=mysel style='display:inline-block;'><option value='' id=defopt>Styling idea [backdrop-filter:sepia(100%);]</option>
<option contenteditable=true value="backdrop-filter: blur(5px);">backdrop-filter: blur(5px);</option><option contenteditable=true value="backdrop-filter: brightness(0.4);">backdrop-filter: brightness(0.4);</option><option contenteditable=true value="backdrop-filter: contrast(200%);">backdrop-filter: contrast(200%);</option><option contenteditable=true value="backdrop-filter: drop-shadow(16px 16px 20px blue);">backdrop-filter: drop-shadow(16px 16px 20px blue);</option><option contenteditable=true value="backdrop-filter: grayscale(50%);">backdrop-filter: grayscale(50%);</option><option contenteditable=true value="backdrop-filter: hue-rotate(90deg);">backdrop-filter: hue-rotate(90deg);</option><option contenteditable=true value="backdrop-filter: invert(75%);">backdrop-filter: invert(75%);</option><option contenteditable=true value="backdrop-filter: opacity(25%);">backdrop-filter: opacity(25%);</option><option contenteditable=true value="backdrop-filter: saturate(30%);">backdrop-filter: saturate(30%);</option><option contenteditable=true value="backdrop-filter: sepia(60%);">backdrop-filter: sepia(60%);</option><option contenteditable=true value="backdrop-filter: contrast(175%) brightness(33%);">backdrop-filter: contrast(175%) brightness(33%);</option><option contenteditable=true value="backdrop-filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);">backdrop-filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);</option>
<option value=" ">Your Own CSS Styling?</option>
</select>
</form>
<div id=dstyle></div>
<hr id=hrbot style=display:none;></hr>
<iframe frameborder=0 src='/About_Us.html' id=ifbot style=display:none;width:100%;height:6000px;></iframe>
</body>
</html>