• Please review our updated Terms and Rules here

Not entirely OT, but drawing with CSS...

deathshadow

Veteran Member
Joined
Jan 4, 2011
Messages
1,378
On my websites I use HTML and CSS to do drawings a lot. I've even got a in progress project where I'm going to have a website where you can play old text games ported to JavaScript, displayed on what looks like a TRS-80 monitor. (right down to the scanlines)

On twitter I came across someone making a calculator using the same techniques -- turns out she does a lot of HTML/CSS "art".
So I took a stab at it myself, ended up writing about it on medium.

Part 1 is pretty dry and basic:

But in part 2:

I go for my own design concept... I have absolutely no idea where my styling inspiration came from:

social.jpg

Thought you folks would get a kick out of that.

the project directory on my server is wide open, the live demo works, and there's a .rar of the whole project if anyone wants to play.

In the second article I talk about how doing this in HTML/CSS reminds me a lot of using the old graphics primitives from ROM basic to draw things. It's very much a lot of the same techniques and mindset...
 
One of the wonders of CSS, in Safari the background cloth is superimposed on top of the calculator. So, it's translucent, so you can see it, but it's like looking at it with a canvas bag on your head.
 
Ah the steaming ****-show that is Apple. There's a reason a lot of web developers are calling Safari "The new IE". It's almost as if instead of writing their own browser engine they just stole an open source one, refused to contribute back to it, and then had Google abscond with all the talented developers when Apple's "we need this as the OS renderer, you know the same thing the EU sued microsoft over?" sleazy dirtbag practices pissed people off.

I know we have a lot of Apple fanboys around these parts...I still don't get it. They've ALWAYS been duplicitous dirtbag scum. Never once understood the appeal of anything they've made -- right back to the corner cut but still wallet bleeding Apple 2. Though to be fair, I've never been a big fan of cults and religions.

You know a company are dirtbags when expansion cards are held in by an edge connector, gravity, and wishful thinking because they're too cheap to use one screw.

45+ years and I still don't think I'll never understand why anyone uses their trash by choice. Ah well, time to boot up virtualbox and see what Saf***is gripe is where apparently it can't even handle depth sorting properly. Hopefully something like z-index will fix it.
 
Last edited:
Ok, got it. When you use CSS rotations Safari apparently utterly, totally, and completely ignores 30 year old HTML depth sorting rules, so you have to perform a "translateZ" to get it to work.

Did I ever tell you what I think about Apple? Did I ever tell you the definition... of insanity?
 
Back
Top