thricedotted

li (implied)

@thricedotted

what now???

"i have done a couple bad things"

log inask
number of years i have lived on this earth
over 30
thricedotted
@thricedotted
nex3
@nex3
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

thricedotted
@thricedotted

this is 5000% the kind of thing that would have gotten me OBSESSED with CSS back in 2002, and i'm SO excited for all the people this series is gonna do that for

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

in reply to @thricedotted's post:

Pinned Tags