<html>
<head>
<meta charset='utf-8'/>
<title>Text Background Clip - RJM Programming - May, 2022 ... thanks to https://codepen.io/shshaw/pen/ELBayz</title>
<style>
#xbox:before {
content: attr(data-hover);
}

#box:after {
content: attr(data-hover);
}

#bbox:after {
content: attr(data-hover);
}

div {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;

background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;


color: rgba(255,0,0,0.6);

span { color: transparent; }
}

h1 {
-webkit-animation: fadebutton 18s ease-out infinite;
-moz-animation: fadebutton 18s ease-out infinite;
animation: fadebutton 18s ease-out infinite;
}

.box {
-webkit-animation: frotate 16s ease-out infinite;
-moz-animation: frotate 16s ease-out infinite;
animation: frotate 16s ease-out infinite;
}

@keyframes frotate { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
transform: rotate(0deg);
margin-left: 0px;
}

to {
transform: rotate(90deg);
margin-left: 130px;
}
}



@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}

to {
margin-left: 130px;
}
}


html { height: 100%; display: flex; }
/* body {
margin: auto;
max-width: 300px;
text-align: center;
} */
</style>
<script type='text/javascript'>
var wasih='', isih='', dho='';
var aconto=null;

function newwin(divo) {
var wo=window.open('','_blank','left=10,top=10,width=' + eval(-20 + screen.width) + ',height=' + eval(-20 + screen.height));
if (dho != '') {
wo.document.write('<html>' + dho + '<body>' + divo.outerHTML + '</body></html>');
} else {
wo.document.write('<html>' + document.head.outerHTML + '<body>' + divo.outerHTML + '</body></html>');
}
}

function iframeit(tao) {
document.getElementById('toptable').style.opacity='0.0';
document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);
if (1 == 1) {
document.getElementById('ifp').style.display='block';
document.getElementById('ifp').style.position='absolute';
document.getElementById('ifp').style.top='0px';
document.getElementById('ifp').style.left='0px';
document.getElementById('ifp').style.width='100%';
document.getElementById('ifp').style.height='100vh';
document.getElementById('ifp').style.zIndex='99';
//document.getElementById('ifp').style.opacity='1.0';
}
}

function checkforparent() {
var rectis=document.getElementById('box').getBoundingClientRect();
document.getElementById('bbox').style.position='absolute';
document.getElementById('bbox').style.left='' + rectis.left + 'px';
document.getElementById('bbox').style.top='' + rectis.top + 'px';
document.getElementById('bbox').style.display='inline-block';
document.getElementById('box').className='box';
document.getElementById('bbox').className='box';
if (window.parent != window) {
dho=document.head.outerHTML.replace('<style' + document.head.outerHTML.split('<style')[1].split('</style>')[0] + '</style>', parent.document.getElementById('css').value);
document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;
document.getElementById('css').value=parent.document.getElementById('css').value;
document.getElementById('words').value=alsobox(parent.document.getElementById('words').value);
document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;
document.getElementById('bbox').innerHTML=parent.document.getElementById('bbox').innerHTML;
showb();
}
}

function checkforchild() {
var rectis=aconto.getElementById('box').getBoundingClientRect();
aconto.getElementById('bbox').style.position='absolute';
aconto.getElementById('bbox').style.left='' + rectis.left + 'px';
aconto.getElementById('bbox').style.top='' + rectis.top + 'px';
aconto.getElementById('bbox').style.color='red';
aconto.getElementById('bbox').style.opacity='0.7';
//aconto.getElementById('bbox').style.display='inline-block';
aconto.getElementById('box').style.position='absolute';
aconto.getElementById('box').style.left='' + rectis.left + 'px';
aconto.getElementById('box').style.top='' + rectis.top + 'px';
aconto.getElementById('box').style.opacity='0.7';
aconto.getElementById('bbox').className='box';
aconto.getElementById('box').className='box';
}

function emailit() {
var emis=prompt('Email address to send to?', '');
if (emis != null) {
if (emis.trim() != '') {
if (emis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + emis);
//document.getElementById('myemail').click();
//parent.document.getElementById('myform').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
//parent.document.getElementById('myform').target='jfp';
document.getElementById('myform').target='jfp';
//alert('ReadY');
document.getElementById('subbut').click();
//alert('REadY');
//top.location.href=document.URL.split('?')[0];
//alert('REAdY');
} else if (emis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + emis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else {
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}

function smsit() {
var smsis=prompt('Mobile number to SMS to?', '');
if (smsis != null) {
if (smsis.trim() != '') {
if (smsis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + smsis);
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else if (smsis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + smsis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}

function showb() {
document.getElementById('bemail').style.display='inline-block';
document.getElementById('bsms').style.display='inline-block';
}

function wordize(inpo) {
if (!document.getElementById('bbox')) {
document.getElementById('box').setAttribute('data-hover', inpo.value);
} else {
document.getElementById('bbox').setAttribute('data-hover', inpo.value);
}
document.getElementById('xbox').setAttribute('data-hover', inpo.value);
if (document.getElementById('bbox')) {
document.getElementById('bbox').style.opacity='0.7';
document.getElementById('box').style.opacity='0.7';
}
if (aconto) {
if (aconto.getElementById('bbox')) {
aconto.getElementById('bbox').setAttribute('data-hover', inpo.value);
aconto.getElementById('bbox').style.opacity='0.7';
aconto.getElementById('box').style.opacity='0.7';
} else {
aconto.getElementById('box').setAttribute('data-hover', inpo.value);
}
}
}

function checkif(iois) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
checkforchild();
}
}

function ourprompt(svgoh) {
var xc=prompt('Optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here ).', svgoh);
}

function alsobox(invl) {
if (!document.getElementById('bbox')) {
document.getElementById('box').innerHTML=invl;
} else {
document.getElementById('bbox').innerHTML=invl;
}
document.getElementById('xbox').innerHTML=invl;
if (aconto) {
if (!aconto.getElementById('bbox')) {
aconto.getElementById('bbox').innerHTML=invl;
} else {
aconto.getElementById('box').innerHTML=invl;
}
}
return invl;
}

</script>
</head>
<body onload=" checkforparent(); ">
<details><summary>Emoji and Animation and Overlay (saveable to SVG image via right hand cell click) below ...</summary>
<table style=width:120%; title="Click on right hand cell to optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here )."><tr><td style=vertical-align:top; title="Click on right hand cell to optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here ).">
<br><br><br><br><br><br><br><br><div data-hover='👋 ' id=box data-class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih); } ">Hello</div>
<br><br><br><br><br><br><br><br><br><br><br><br></td><td id=tdr style=background-color:white;vertical-align:top;width:50%;>
<iframe onload="checkif(this);" style="width:100%;height:950px;background-color:white;" srcdoc='<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" onclick="top.ourprompt(this.outerHTML);"><style> html { background-color: white; } div { margin: 0 0 0 0; background-color: white; height: 90%; overflow: auto; font-size: 128px; } #xbox:before { content: attr(data-hover); } #box:after { content: attr(data-hover); } #bbox:after { content: attr(data-hover); } .box { -webkit-animation: frotate 16s ease-out infinite; -moz-animation: frotate 16s ease-out infinite; animation: frotate 16s ease-out infinite; } @keyframes frotate { from { transform: rotate(0deg); margin-left: 0px; } to { transform: rotate(90deg); margin-left: 130px; } } @keyframes fadebutton { from { margin-left: 0px; } to { margin-left: 130px; } } </style><polygon fill="white" points="0,0 845,10 835,835 10,845" /><foreignObject x="0" y="0" width="760" height="920"><div xmlns="http://www.w3.org/1999/xhtml"><div data-hover="👋 " id=box data-class=box data-title="Double click to show in new window">Hello</div></div><div data-hover="👋 " id=bbox data-class=box data-title="Double click to show in new window">Hello</div></foreignObject></svg>'></iframe>
</td></tr></table>
</details>
<table id=toptable border=12 cellpadding=3 cellspacing=3><tr><td style=vertical-align:top; title='Click to show card above in new window' onclick="newwin(document.getElementById('box'));" ondblclick="newwin(document.getElementById('box'));">
<br><br><br><div data-hover='👋 ' id=xbox class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih); } ">Hello</div><br>
</td><td id=tdmid style=vertical-align:top;text-align:center;><h1>Text Background Clip  <input type=button onclick=emailit(); style=display:none; id=bemail value='Email 📧'></input>  <input type=button onclick=smsit(); style=display:none; id=bsms value='SMS 📟'></input></h1><h3>RJM Programming - May, 2022</h3><h4>Thanks to <a target=_blank title=https://codepen.io/shshaw/pen/ELBayz href='https://codepen.io/shshaw/pen/ELBayz'>Emoji + background-clip:text</a></h4>
</td><td style=vertical-align:top;>
<form id=myform method=POST action=./overlay_emoji.php>
<table border=18 style=background-color:pink;>
<tr><th><input onblur="wordize(this);" style=display:inline-block;width:60px; type=text id=ewords value='👋 '></input> Words</th><th><input id=subbut type=submit value=Post style=background-color:pink;display:none;></input> CSS</th></tr>
<tr><td style=vertical-align:top;><textarea id=words name=words rows=40 onblur=" showb(); isih=this.value; if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } } document.getElementById('box').innerHTML=isih; document.getElementById('bbox').innerHTML=alsobox(isih); ">Hello</textarea></td>
<td style=vertical-align:top;><textarea id=css name=css cols=52 rows=40 onblur=" showb(); iframeit(this); " title='Can use, within that SVG defining the card border, an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard).'><style>
#xbox:before {
content: attr(data-hover);
}

#box:after {
content: attr(data-hover);
}

#bbox:after {
content: attr(data-hover);
}

div {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;

background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;


color: rgba(255,0,0,0.6);

span { color: transparent; }
}

h1 {
-webkit-animation: fadebutton 4s ease-out infinite;
-moz-animation: fadebutton 4s ease-out infinite;
animation: fadebutton 4s ease-out infinite;
}

@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}

to {
margin-left: 30px;
}
}

.box {
-webkit-animation: frotate 16s ease-out infinite;
-moz-animation: frotate 16s ease-out infinite;
animation: frotate 16s ease-out infinite;
}


@keyframes frotate { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
transform: rotate(0deg);
margin-left: 0px;
}

to {
transform: rotate(90deg);
margin-left: 130px;
}
}

@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}

to {
margin-left: 130px;
}
}

html { height: 100%; display: flex; }
/* body {
margin: auto;
max-width: 300px;
text-align: center;
} */
</style>
</textarea></td></tr></table>
<div id=eof style=display:none;></div>
</form>
</td></tr></table>
<iframe name=ifp id=ifp style=display:none; src=''></iframe>
<div id=spares style=display:none;></div>
<iframe name=jfp id=jfp style=display:none; src=''></iframe>
<div data-hover='👋 ' id=bbox data-class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih); } ">Hello</div>
<!--iframe style="width:100%;height:850px;background-color:white;" srcdoc='<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><style> div { background-color: white; font: 18px serif; height: 70%; overflow: auto; font-size: 36px; border: 2px solid transparent; } #xbox:before { content: attr(data-hover); } #box:after { content: attr(data-hover); } #box:after { content: attr(data-hover); } .box { -webkit-animation: frotate 16s ease-out infinite; -moz-animation: frotate 16s ease-out infinite; animation: frotate 16s ease-out infinite; } @keyframes frotate { from { transform: rotate(0deg); margin-left: 0px; } to { transform: rotate(90deg); margin-left: 130px; } } @keyframes fadebutton { from { margin-left: 0px; } to { margin-left: 130px; } } </style><polygon points="5,5 795,10 785,785 10,795" /><foreignObject x="20" y="20" width="760" height="760"><div xmlns="http://www.w3.org/1999/xhtml"><br><br><br><br><br><br><div data-hover="👋 " id=box class=box title="Double click to show in new window">Hello</div></div></foreignObject></svg>'></iframe-->
</body>
</html>