Who needs images, I have CSS. Options

[Jason Knight]

Just thought I'd share my most recent Medium article series on building a calculator with HTML and CSS. I came across someone doing it on Twitter and thought I could do better... then I decided to do it different as well.

Part 1:
https://medium.com/codex/how-css-is-reducin...tor-ccf9332e56e

part 2:
https://medium.com/codex/how-css-is-reducin...dy-bd5ee628e849

Part 3 is a WIP, I'll post when I put it up. For part 3

for those of you past the read limit, the project directory is here:

https://cutcodedown.com/for_others/medium_a...es/htmlCSSCalc/

The calc.html in there is a live demo, there's a .rar of the whole project, and the directory is unlocked for easy access to the gooey bits and pieces.

It's fun that:


Can be done in nothing but HTML and CSS. The only image file that's used is the canvas background, and even that's a greyscale alpha transparency so colours can be set from the CSS.

This post has been edited by Jason Knight: Jan 7 2023, 01:20 PM

[Christian J]

Cool! That reminds me of some old CSS experiments that used to crash browsers at the time, CSS Destroy by LiteraryMoose I think they were called. Alas the pages seem to be scrubbed from the web now, not even archive.org has them.

[coothead]

. Can be done in nothing but HTML and CSS.
. The only image file that's used is the canvas background,
. and even that's a greyscale alpha transparency so colours
. can be set from the CSS.

Dont use an image, use CSS and make your assertion really true.

Example


I changed this CSS...

CODE

html:before {
    content:"";
    position:absolute;
    top:-200vw;
    left:-200vw;
    right:-200vw;
    bottom:0;
    transform:rotateX(15deg) translateZ(-30em) scale(1.5);
    background:url(images/canvas_1.png) center center repeat;
}

...to this...

CODE

html:before {
    content:"";
    position:absolute;
    top:-200vw;
    left:-200vw;
    right:-200vw;
    bottom:0;
    transform:rotateX(15deg) translateZ(-30em) scale(1.5);
    background: conic-gradient(
    from 45deg,
    #314c62 0,
    #314c62 90deg,
    #354862 90deg,
    #354862 180deg,
    #375064 180deg,
    #375064 270deg,
    #4f6d85 270deg,
    #4f6d85 360deg
     );
    background-size: 0.4em 0.4em;
}

coothead

This post has been edited by coothead: Jan 21 2023, 12:10 PM