The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Who needs images, I have CSS.
Jason Knight
post Jan 7 2023, 01:19 PM
Post #1


Member
***

Group: Members
Posts: 41
Joined: 25-December 22
Member No.: 28,719



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:
IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 14 2023, 08:29 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,286
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 21 2023, 11:21 AM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Jason Knight)

. 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. IPB Image

Example
IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th January 2023 - 06:13 PM