{"id":51575,"date":"2021-02-02T03:01:11","date_gmt":"2021-02-01T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51575"},"modified":"2021-01-31T21:34:48","modified_gmt":"2021-01-31T11:34:48","slug":"css-countdown-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-countdown-primer-tutorial\/","title":{"rendered":"CSS Countdown Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Countdown Primer Tutorial<\/p><\/div>\n

It’s not normally a talent you associate with CSS, the ability to do any maths, but you can count (or increment\/decrement) with it, with styling like<\/font> …<\/p>\n


\n<style>
\n#myspan {
\n counter-reset: the-final-countdown var(--tooltip-string)<\/font>;
\n line-height: 2;
\n}
\n
\ndiv::before {
\n counter-increment: the-final-countdown -1;<\/font>
\n content: \"~\" counter(the-final-countdown) \"~\";
\n background: yellow;
\n display: inline-block;
\n width: 20rem;
\n margin-right: 0.5rem;
\n text-align: center;
\n}
\n
\ndiv::after {
\n content: var(--tooltip-string)<\/font>;
\n}
\n<\/style>
\n<\/code> <\/p>\n

… and did you see above it can work with variables<\/font> as another Javascript type talent?<\/p>\n

As a Javascript coder knows, once you have variables<\/font> to play with, they can represent other useful things.<\/p>\n

Let’s establish a CSS variable<\/font> via (HTML like) …<\/p>\n


\n<span id=myspan style=\"--tooltip-string:12;<\/font>\"><\/span>
\n<\/code><\/p>\n

… then that “12” gets substituted so that …<\/p>\n


\n<style>
\n#myspan {
\n counter-reset: the-final-countdown 12<\/font>;
\n line-height: 2;
\n}
\n<\/style>
\n<\/code><\/p>\n

… and more adventurously we can use Javascript such as<\/font> …<\/p>\n


\n function thisdecodeURIComponent(inname, inval) {
\n var outval=decodeURIComponent(inval), dwiurl='';
\n if (inval != '') {
\n icnt=eval(inname.replace('dw',''));
\n dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
\n if (dwiurl != '') {
\n outval='<div style=\"--tooltip-string:url(' + dwiurl + ')<\/font>;\">' + inval + '<\/div>';
\n } else {
\n outval='<div>' + inval + '<\/div>';
\n }
\n spanstr=\"<span id=myspan style='--tooltip-string:\" + icnt + \";'><h1>CSS counter via var<\/h1><h3>RJM Programming - February, 2021<\/h3><h4>Thanks to <a target=_blank title='https:\/\/css-tricks.com\/valid-css-content\/' href='https:\/\/css-tricks.com\/valid-css-content\/'>https:\/\/css-tricks.com\/valid-css-content\/<\/a><\/h4><\/span>\";
\n icnt++;
\n while (inval != '') {
\n inval=(location.search.split('dw' + icnt + '=')[1] ? decodeURIComponent(location.search.split('dw' + icnt + '=')[1].split('&')[0]) : '');
\n if (inval != '') {
\n spanstr=\"<span id=myspan style='--tooltip-string:\" + icnt + \";'><h1>CSS counter via var<\/h1><h3>RJM Programming - February, 2021<\/h3><h4>Thanks to <a target=_blank title='https:\/\/css-tricks.com\/valid-css-content\/' href='https:\/\/css-tricks.com\/valid-css-content\/'>https:\/\/css-tricks.com\/valid-css-content\/<\/a><\/h4><\/span>\";
\n inname='dw' + icnt;
\n dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
\n if (dwiurl != '') {
\n outval+='<div style=\"--tooltip-string:url(' + dwiurl + ')<\/font>;\">' + inval + '<\/div>';
\n } else {
\n outval+='<div>' + inval + '<\/div>';
\n }
\n }
\n icnt++;
\n }
\n }
\n return outval;
\n }
\n<\/code><\/p>\n

… to get CSS to display an image via a CSS variable<\/font> associated with a particular “CSS “counter” instance (if you will)<\/font>. Cute, huh?!<\/p>\n

Thanks to https:\/\/css-tricks.com\/valid-css-content\/<\/a>, see how this can work in practice with today’s “proof of concept” css_count_image.html<\/a>‘s live run<\/a> …<\/p>\n