pendell

Pendell

@pendell

Current Hyperfixation: Wizard of Oz

  • He/Him

I use outdated technology just for fun, listen to crappy music, and watch a lot of horror movies. Expect posts about These Things. I talk a lot.

Check tags like Star Trek Archive and Media Piracy to find things I share for others.

log inask
Bluesky
bsky.app/profile/pendell.bsky.social
Mastodon
mastodon.social/@pendell
Bearblog
pendell.bearblog.dev/
Letterboxd
letterboxd.com/aependell/
pendell
@pendell
NireBryce
@NireBryce
lexyeevee
@lexyeevee

css for css baby 2: boxes and blocks and stuff

  1. 1

    text stuff mostly

  2. 2

    boxes, transform
    🌟 your here 🌟

  3. 3

    positioning, clicking stuff

  4. 4

    flexbox and grid

  5. 5

    animation and other nonsense

Are YOU a CSS BABY or hopefully you already read part 1 so now you are a... uhh... Css Preteen??? wow the age metaphor is rapidly getting away from me

Are your friends doing stupid css tricks and leaving you feeling
left out?

Do you wish Help I Am Trapped In This Box
Please Let Me Out would help you out?

alright great here we go

You must log in to comment.

in reply to @lexyeevee's post:

CyanSorcery
@CyanSorcery

But I've already been doing that, but the issue is that I've been doing it since

2001

because we didn't have a computer before then, so yea, I lost some time there

(also I was sitting here using styles to try to make my text big before I realized you just used h1) (edit 2: ok that doesn't work either so I'm gonna have to accept my puny 2001 because my attention span doesn't last this long) (edit 3: oh yea markdown is a thing)

login to reply
lexyeevee
@lexyeevee

i guess it helps to follow members of the csswg on twitter and also just browse MDN for kicks every few months

once i got a taste of "border-radius might be implemented in browsers soon" i tried to keep tabs on what else they were up to

login to reply
mogg
@mogg

I find it extremely helpful to open the inspector tools whenever there's something cool, just to learn how people achieved that stuff. Sometimes it's stuff done with js, sometimes you acquire css trickery

login to reply
lexi
@lexi

also it is ![alt text](url), kinda like a link with a ! in front for some reason

thats the normal markdown image syntax. the markdown guys realized that images kinda work like URLs: you have a destination URL, and a text describing it. so they yoinked that syntax, but autodetecting images is hard, so someone just added a ! in front of it so its clear if its an image or a link

login to reply
lolle
@lolle

Had to shudder at reading "what we had to do to get rounded corners before this", remembering blind tables with sliced up image borders.... at least border-image only requires one image to do this these days 😅

login to reply
widr
@widr

these are incredible

box model is honestly so fucked up and convoluted that you could probably make a 6 part series this complicated just about how margins and flexboxes and nested layouts work too hahaha, i had to find someone else's shitpost with relative position and negative margins to see how to make a trick possible a couple weeks ago. we are in a hell of our own makign

login to reply
widr
@widr

z-index layering or what's that one thing i forget and can't find it where you can prevent that from overlayering elements outside the containing one or not do that, something about stacking contexts or something? also how the space reserved for elements is only coincidentally related to their actual position if it even has any? amazing technology

login to reply
arbe
@arbe

These are so informative and fun to read! I'm learning a lot from this series, thank you.
That expressed, I think I've found a typo: In the paragraph just below the box model diagram, I believe it should say padding: 0 .25em instead of padding 0 0 .25em. Such mistakes are, of course, completely inexcusable and you should be hanged in the public square. /s monospaced fonts have betrayed me. I knew this day would come
Looking forward to learning more about the arcane, dark arts of Positioning Elements™!

login to reply
Scribble-Sheep
@Scribble-Sheep

Finally got around to doing some fuckery using this as a guide. Def makes more sense when you're actually doing something and not just reading this in isolation, lol.

I'm assuming that putting scaleY and not having a scaleX causes an issue, tho? Bc trying that threw an error until I just used the normal combined scale thing.

login to reply
Pinned Tags