<html>
<head>
<style>
#myicircle { clip-path: circle(36%); }
#myicalc { width: calc(65% - 200px); }
#myibrightness { filter: brightness(150%); }
#myiellipse { clip-path: ellipse(50% 30%); }
</style>

<script type=text/javascript>

function displayit(osel) {
var oselv=osel.value;
var ohih=document.head.innerHTML.split('<style>')[1].split('</style>')[0];
if (oselv.toLowerCase().indexOf('circle') == 0) {
document.getElementById('myiellipse').style.display='none';
document.getElementById('myicalc').style.display='none';
document.getElementById('myibrightness').style.display='none';
document.getElementById('myicircle').style.display='block';
document.getElementById('optcircle').innerHTML='<style> #myicircle' + ohih.split('#myicircle')[1].split('}')[0] + ' } </style>';
osel.value=oselv;
osel.title=document.getElementById('myicircle').outerHTML;
} else if (oselv.toLowerCase().indexOf('calc') == 0) {
document.getElementById('myiellipse').style.display='none';
document.getElementById('myicircle').style.display='none';
document.getElementById('myibrightness').style.display='none';
document.getElementById('myicalc').style.display='block';
document.getElementById('optcalc').innerHTML='<style> #myicalc' + ohih.split('#myicalc')[1].split('}')[0] + ' } </style>';
osel.value=oselv;
osel.title=document.getElementById('myicalc').outerHTML;
} else if (oselv.toLowerCase().indexOf('brightness') == 0) {
document.getElementById('myiellipse').style.display='none';
document.getElementById('myicircle').style.display='none';
document.getElementById('myicalc').style.display='none';
document.getElementById('myibrightness').style.display='block';
document.getElementById('optbrightness').innerHTML='<style> #myibrightness' + ohih.split('#myibrightness')[1].split('}')[0] + ' } </style>';
osel.value=oselv;
osel.title=document.getElementById('myibrightness').outerHTML;
} else if (oselv.toLowerCase().indexOf('ellipse') == 0) {
document.getElementById('myicircle').style.display='none';
document.getElementById('myibrightness').style.display='none';
document.getElementById('myicalc').style.display='none';
document.getElementById('myiellipse').style.display='block';
document.getElementById('optellipse').innerHTML='<style> #myiellipse' + ohih.split('#myiellipse')[1].split('}')[0] + ' } </style>';
osel.value=oselv;
osel.title=document.getElementById('myiellipse').outerHTML;
}
}


</script>
</head>
<body>
<h1>CSS Function Ideas</h1>
<h3>RJM Programming - August, 2026 ... thanks to <a target=_blank title='W3schools' href='//www.w3schools.com/cssref/css_functions.php'>W3schools</a></h3>

<select style=background-color:yellow;margin-bottom:8px; title='' id=mysel onchange=displayit(this);><option value=''>Please select ...</option><option id=optcircle value='circle()'>circle()</option><option id=optcalc value='calc()'>calc()</option><option id=optbrightness value='brightness()'>brightness()</option><option id=optellipse value='ellipse()'>ellipse()</option></select>
<br>
<div id=dimg>
<img style=display:none; title="https://www.rjmprogramming.com.au/HTMLCSS/karaoke_interspersing_imagetypes.gif" id=myicircle src="./karaoke_interspersing_imagetypes.gif" alt="Media YouTube Interfacer Interspersing Image Text Tutorial" width="60%"></img>
<img style=display:none; title="https://www.rjmprogramming.com.au/HTMLCSS/karaoke_interspersing_imagetypes.gif" id=myicalc src="./karaoke_interspersing_imagetypes.gif" alt="Media YouTube Interfacer Interspersing Image Text Tutorial"></img>
<img style=display:none; title="https://www.rjmprogramming.com.au/HTMLCSS/karaoke_interspersing_imagetypes.gif" id=myibrightness src="./karaoke_interspersing_imagetypes.gif" alt="Media YouTube Interfacer Interspersing Image Text Tutorial" width="60%"></img>
<img style=display:none; title="https://www.rjmprogramming.com.au/HTMLCSS/karaoke_interspersing_imagetypes.gif" id=myiellipse src="./karaoke_interspersing_imagetypes.gif" alt="Media YouTube Interfacer Interspersing Image Text Tutorial" width="60%"></img>
</div>
</body>
</html>