<html>
<head>
<title>CSS Function Ideas - RJM Programming - August, 2026 ... thanks to https://www.w3schools.com/cssref/css_functions.php</title>
<style>
:root {
color-scheme: light dark;
--light-bg: snow;
--light-color: black;
--dark-bg: black;
--dark-color: snow;
}
body {
counter-reset: section;
}
ol {
counter-reset: section;
list-style-type: circle; // '\01f5bc'
display: none;
}
li { display: none; }
#myicircle { clip-path: circle(36%); }
#myicalc { width: calc(65% - 200px); }
#myibrightness { filter: brightness(150%); }
#myicontrast { filter: contrast(150%); }
#myiellipse { clip-path: ellipse(50% 30%); }
#myiinset { clip-path: inset(45px); }
#myiacos { opacity:0.6; z-index: -2; transform: rotate(acos(0.9)); }
#myiasin { opacity:0.6; z-index: -2; transform: rotate(asin(0.15)); }
#myiatan { opacity:0.6; z-index: -2; transform: rotate(atan(1)); }
#myiatan2 { opacity:0.6; z-index: -2; transform: rotate(atan2(pi, 25)); }
#myiattr:before { content: " (" attr(src) ")"; }
#myiblur { filter: blur(4px); }
#myiclamp { height: clamp(200px, 45%, 600px); }
#myicolor { background-color: color(display-p3 0.6 0.6 0 / .3); }
#myihsl { background-color:hsl(290 60% 70% / 0.3); }
#myihwb { background-color:hwb(300 40% 20% / 0.5); }
#myilab { background-color:lab(70 70% -80% / 0.3); }
#myilch { background-color:lch(40% 160 200); }
#myilinear-gradient { background-image: linear-gradient(brown, purple, orange); }
#myilight-dark { background-color: light-dark(var(--light-bg), var(--dark-bg)); }
#myicolor-mix { background-color: color-mix(in hsl, hsl(115 65 93), salmon 75%); }
#myiconic-gradient { background-image: conic-gradient(purple, yellow, pink); }
#myicos { width: calc(170px * cos(29deg)) !important; height: calc(170px * cos(29deg)); margin: calc(170px/4 * cos(29deg)); }
#myicounter::before { counter-increment: section; content: "Image " counter(section) ": "; }
#myicounters::before { counter-increment: section; content: counters(section,".") " "; }
/* #myicubic-bezier { height: 300px; transition: height 9s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } .myicubic-bezier:hover { height:600px; }
*/
#myidrop-shadow { filter: drop-shadow(10px 10px 7px orange); }
#myiexp { opacity:0.6; z-index: -2; transform: rotate(calc(1turn * exp(1))); }
#myimin { height: min(50%, 300px); }
/* #myifit-content { display: grid; grid-template-columns: fit-content(250px) fit-content(250px) auto; grid-gap: 7px; box-sizing: border-box; }
*/
/* #myiminmax{ display: grid; grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px; grid-gap: 7px; box-sizing: border-box; }
*/
#myigrayscale { filter: grayscale(0.4); }
#myihue-rotate { filter: hue-rotate(-90deg); }
#myihypot { height: hypot(40px, 80px, 100px, 120px); }
#myiinvert { filter: invert(0.3); }
#myilog { height: calc(log(1000) * 30px); }
#myimatrix { opacity:0.6; z-index: -2; transform: matrix(2, 1, 0.5, 1, 90, 70); }
#myimatrix3d { opacity:0.6; z-index: -2; transform: matrix3d( 0.7, 0.1, 0.7, 0, -0.6, 0.7, 0.2, 0, -0.5, -0.8, 0.7, 0, 10, 10, 0, 1 ); }
#myimax { height: max(50%, 300px); }
#myimod { rotate: mod(120deg, -25deg); }
</style>
<script type=text/javascript>
var verbs=[], goodtemplateimg=null, goodtemplateid='';
function viacss() {
var thisverb='', newih=document.getElementById('optnone').outerHTML, jik=0, dprefix='', dsuffix='';
var gohihs=document.head.innerHTML.split('<style>')[1].split('</style>')[0].split('#myi');
for (var ij=1; ij<gohihs.length; ij++) {
thisverb=gohihs[ij].split('{')[0].trim();
verbs.push(thisverb);
if (document.getElementById('myi' + thisverb)) {
goodtemplateid=goodtemplateimg='myi' + thisverb;
document.getElementById(goodtemplateid);
} else {
if (thisverb.toLowerCase().indexOf('attr') == 0 || thisverb.toLowerCase().indexOf('lch') == 0 || thisverb.toLowerCase().indexOf('light-dark') == 0 || thisverb.toLowerCase().indexOf('lab') == 0 || thisverb.toLowerCase().indexOf('linear-gradient') == 0 || thisverb.toLowerCase().indexOf('colo') == 0 || thisverb.toLowerCase().indexOf('hwb') == 0 || thisverb.toLowerCase().indexOf('hsl') == 0 || thisverb.toLowerCase().indexOf('minmax') == 0 || thisverb.toLowerCase().indexOf('fit-content') == 0 || thisverb.toLowerCase().indexOf('counter') == 0 || thisverb.toLowerCase().indexOf('conic') == 0) {
if (thisverb.toLowerCase().indexOf('counters') == 0) {
dprefix='<div style="margin: 8 8 8 8;display:none;" id=div' + thisverb.split(':')[0] + ' data-src=myi' + thisverb.split(':')[0] + '><ol><li>image ' + String.fromCodePoint(0x1F5BC,0xFE0F) + '</li><ol><li>image ' + String.fromCodePoint(0x1F5BC,0xFE0F) + '</li><ol><li>image ' + String.fromCodePoint(0x1F5BC,0xFE0F) + '</li><ol><li>image ' + String.fromCodePoint(0x1F5BC,0xFE0F) + '</li>';
dsuffix='</ol></ol></ol></ol><st' + 'yle> ol { display: block; } li { display: block; } </st' + 'yle></div>';
} else {
dprefix='<div style="margin: 8 8 8 8;" id=div' + thisverb.split(':')[0] + ' data-src=myi' + thisverb.split(':')[0] + '>';
dsuffix='</div>';
}
}
if (thisverb.split(':')[0] == 'cubic-bezier') {
document.getElementById('dimg').innerHTML+=dprefix + document.getElementById(goodtemplateid).outerHTML.replace('img ','img class=' + 'myi' + thisverb.split(':')[0] + ' ').replace(goodtemplateid, 'myi' + thisverb.split(':')[0]).replace(' width=', ' data-width=') + dsuffix;
} else if (thisverb.split(':')[0] == 'fit-content' || thisverb.split(':')[0] == 'minmax') {
document.getElementById('ddimg').innerHTML+=dprefix + document.getElementById(goodtemplateid).outerHTML.replace('img ','img data-class=' + 'myi' + thisverb.split(':')[0] + ' ').replace(goodtemplateid, 'myi' + thisverb.split(':')[0]).replace(' width="60%"', ' width="523px"') + dsuffix;
} else {
document.getElementById('dimg').innerHTML+=dprefix + document.getElementById(goodtemplateid).outerHTML.replace(goodtemplateid, 'myi' + thisverb.split(':')[0]) + dsuffix;
}
dprefix='';
dsuffix='';
if (document.getElementById('mysel').innerHTML.indexOf('>' + thisverb) == -1) {
document.getElementById('mysel').innerHTML+='<option id="opt' + thisverb.split(':')[0] + '" value="' + thisverb + '()">' + thisverb.split(':')[0] + '()</option>';
}
}
}
verbs.sort();
for (jik=0; jik<verbs.length; jik++) {
if (!document.getElementById('opt' + verbs[jik].split(':')[0])) {
alert(verbs[jik]);
}
newih+=document.getElementById('opt' + verbs[jik].split(':')[0]).outerHTML;
}
document.getElementById('mysel').innerHTML=newih;
}
function displayit(osel) {
var oselv=osel.value;
var thatverbplus=oselv.split('(')[0].trim();
var thatverb=oselv.split(':')[0].split('(')[0].trim();
var ohih=document.head.innerHTML.split('<style>')[1].split('</style>')[0];
var imgs=document.getElementsByTagName('img'), jimg=0;
document.getElementById('dstyle').innerHTML='';
document.getElementById('divcounters').style.display='none';
document.getElementById('divfit-content').style.visibility='hidden';
document.getElementById('divminmax').style.visibility='hidden';
if (oselv.toLowerCase().indexOf('circle') == 0) {
if (1 == 1) {
for (jimg=0; jimg<imgs.length; jimg++) {
if (imgs[jimg].id.replace('myi','').indexOf(oselv.split(':')[0].split('(')[0].trim()) != 0) {
imgs[jimg].style.display='none';
} else {
imgs[jimg].style.display='block';
}
}
} else {
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) {
if (1 == 1) {
for (jimg=0; jimg<imgs.length; jimg++) {
if (imgs[jimg].id.replace('myi','').indexOf(oselv.split(':')[0].split('(')[0].trim()) != 0) {
imgs[jimg].style.display='none';
} else {
imgs[jimg].style.display='block';
}
}
} else {
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) {
if (1 == 1) {
for (jimg=0; jimg<imgs.length; jimg++) {
if (imgs[jimg].id.replace('myi','').indexOf(oselv.split(':')[0].split('(')[0].trim()) != 0) {
imgs[jimg].style.display='none';
} else {
imgs[jimg].style.display='block';
}
}
} else {
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) {
if (1 == 1) {
for (jimg=0; jimg<imgs.length; jimg++) {
if (imgs[jimg].id.replace('myi','').indexOf(oselv.split(':')[0].split('(')[0].trim()) != 0) {
imgs[jimg].style.display='none';
} else {
imgs[jimg].style.display='block';
}
}
} else {
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;
} else { // ie. the generic pattern ... doh!
for (jimg=0; jimg<imgs.length; jimg++) {
if (imgs[jimg].id != ('myi' + oselv.split(':')[0].split('(')[0].trim())) {
imgs[jimg].style.display='none';
} else {
imgs[jimg].style.display='block';
if (imgs[jimg].id.indexOf('counters') != -1) {
document.getElementById('divcounters').style.display='block';
} else if (imgs[jimg].id.indexOf('fit-content') != -1) {
document.getElementById('divminmax').style.display='none';
document.getElementById('divfit-content').style.visibility='visible';
setTimeout(function(){ document.getElementById('divminmax').style.display='grid'; }, 30000);
} else if (imgs[jimg].id.indexOf('minmax') != -1) {
document.getElementById('divfit-content').style.display='none';
document.getElementById('divminmax').style.visibility='visible';
setTimeout(function(){ document.getElementById('divfit-content').style.display='grid'; }, 30000);
}
}
}
if (thatverb.toLowerCase().indexOf('attr') == 0 || thatverb.toLowerCase().indexOf('colo') == 0 || thatverb.toLowerCase().indexOf('hsl') == 0 || thatverb.toLowerCase().indexOf('lch') == 0 || thatverb.toLowerCase().indexOf('light-dark') == 0 || thatverb.toLowerCase().indexOf('linear-gradient') == 0 || thatverb.toLowerCase().indexOf('lab') == 0 || thatverb.toLowerCase().indexOf('hwb') == 0 || thatverb.toLowerCase().indexOf('minmax') == 0 || thatverb.toLowerCase().indexOf('fit-content') == 0 || thatverb.toLowerCase().indexOf('counter') == 0 || thatverb.toLowerCase().indexOf('conic') == 0) {
//alert(thatverbplus);
if (ohih.split('#myi' + thatverbplus)[1].indexOf(String.fromCharCode(10)) != -1) {
document.getElementById('dstyle').innerHTML+='<style> ' + (' #myi' + thatverbplus + ohih.split('#myi' + thatverbplus)[1].split(String.fromCharCode(10))[0] + ' ').replace('#myifit-content','.myifit-content').replace('#myminmax','.myiminmax').replace('#myicounters','ol').replace('#myicounter','div').replace('myi','div').replace('src','data-src') + ' </style>';
} else {
document.getElementById('dstyle').innerHTML+='<style> ' + (' #myi' + thatverbplus + ohih.split('#myi' + thatverbplus)[1].split('}')[0] + ' } ').replace('#myicounters','ol').replace('#myicounter','div').replace('myi','div').replace('src','data-src') + ' </style>';
}
}
if (1 == 1) {
if (ohih.split('#myi' + thatverbplus)[1].indexOf(String.fromCharCode(10)) != -1) {
document.getElementById('opt' + thatverb).innerHTML='<style> #myi' + thatverbplus + ohih.split('#myi' + thatverbplus)[1].split(String.fromCharCode(10))[0].replace(' .myicubic-bezier',' #myicubic-bezier') + ' </style>';
} else {
document.getElementById('opt' + thatverb).innerHTML='<style> #myi' + thatverbplus + ohih.split('#myi' + thatverbplus)[1].split('}')[0] + ' } </style>';
}
}
osel.value=oselv;
osel.title=document.getElementById('myi' + thatverb).outerHTML;
}
}
</script>
</head>
<body onload="viacss();">
<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;z-index:78;margin-bottom:8px; title='' id=mysel onchange=displayit(this);><option id=optnone 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=ddimg>
<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>
</div>
<div id=dstyle>
</div>
<style>
.myicubic-bezier { height: 300px; transition: height 9s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } .myicubic-bezier:hover { height:600px; }
#divfit-content {
display: grid;
grid-template-columns: fit-content(250px) fit-content(250px) auto;
grid-gap: 7px;
box-sizing: border-box;
height: 550px;
width: 70%;
background-color: green;
padding: 7px;
visibility:hidden;
}
#divfit-content > #myifit-content {
background-color: beige;
padding: 5px;
}
#divminmax {
display: grid;
grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
grid-gap: 7px;
box-sizing: border-box;
height: 550px;
width: 70%;
background-color: green;
padding: 7px;
visibility:hidden;
}
#divminmax > #myiminmax {
background-color: pink;
padding: 5px;
}
</style>
</body>
</html>