serverless-techno-druid

formerly lsa on espernet

  • http://pronoun.is/they

Techno-druid, death floof, cloudie. Tracker, pythonista.


lexyeevee
@lexyeevee
  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


sorry this one's really long but it touches on a lotta basics. you coulda read the MDN tutorial but you chose this instead, just remember that!! i promise i will make it worth your while at the end

Boxes

in our previous installment i played a sneaky lil fox trick on you!! i was careful to only list properties that work on inline boxes. there is a whole world of much better stuff that only works on block boxes (and special cases). which raises a crucial question:

What The Fuck Does THat Mean

so glad you asked! because this is a pretty core concept about how web pages are laid out.

(all this stuff was designed around the idea that a web page is kind of like a magazine article, so maybe bear that in mind if it helps. or don't if it doesn't.)

see, when your web browser gets a web page, all it gets is this big pile of html elements, and there's a lil guy in there who's gotta figure out where they all go. now, if one element contains several others, like this:

<p>  <em> ... </em>  <a> ... </a>  <img> </p>

or perhaps more easily visualized like this:

p
em
a
img

then the lil guy is like, alright np, all the children should visually appear inside their parent, right? put a box inside a box. not hard. and that's what happens most of the time. so don't worry about it.

the more interesting question is what happens when you have a bunch of elements next to each other.

p
p
div
em
a
img
p

and the general rule is: block elements (pink) stack vertically, inline elements (green) run horizontally. because inline elements are treated like they're in a line of text. see this stuff isn't that hard.

i put some inline and block elements together in that example, which is a little unusual, but it lets me do everything with one example. basically whenever there are multiple inline boxes in a row, they all become a single "line" of text (which then might be wrapped) and function kind of like a single block. also, any amount of plain text acts like its own inline box.

so those elements would be laid out visually like this. in fact i can guarantee it because i just made some block and inline elements and i'm letting your browser literally just do its thing

... earlier stuff ...
p
p
div
em
a
img
p
... later stuff ...

all of this is the default way a browser places stuff on the screen. it's called flow layout, because everything sort of flows into the next available space — there's no fixed size assumed. also i guess a useful thing to notice is that block boxes generally span the full horizontal space available to them, regardless of what they contain — because, well, why wouldn't they.

another big difference is that inline boxes can break across lines:

this paragraph (like every other paragraph) is a block box. that means that its outer edge is always a single rectangle.

contrast with the <span> i've wrapped most of the text in this paragraph in. notice how this box looks like it was drawn as a single very long line and then physically cut into pieces to fit the available space — there are still borders on the left and right sides, but only at the very start and end. where the lines wrap, there's no border.

there are a couple other kinds of layout for the insides of specialized tags, like tables and lists. but most of what a browser does is flow.

wow this is getting kinda stuffy let's get to the good stuff!

some of the display property

so you can change this with css. because you can change almost everything with css. like here is an <em> tag that is still part of the same paragraph, but i gave it display: block; so it jumps out of the line — because blocks stack. and this is normal text still in the same paragraph, but it's an inline box after a block box, so it has to go underneath.

and this gives us the two most basic values of the display property — block for a block box, and inline for an inline box.

(you should still prefer <div> for a block and <span> for inline when possible, because they have different human meanings — "this is a big separate chunk of something" vs "this is a snippet of text possibly in a longer line" — but you can change how they're laid out if the rules of html force your hand. like how you can't put a <div> inside a paragraph.)

now you gotta bear in mind that "block" and "inline" are about what type of box this is on the outside, within flow layout. using them as display values implies also using flow layout on the inside, to arrange their own children. But there are some other fun options! For example

the good stuff: inline-block

so one thing about text layout is that it's totally fine to have (inline) boxes of different heights all laid out together. the browser will simply make each individual wrapped line taller to contain its contents. this is good because if you stick an national park image (which is inline by default — but cohost makes them all block, so i had to override that here!) in a line of text, the text will make space for it instead of having it overlap or something.

this brings me to display: inline-block;, which was basically fucking witchcraft when it was first introduced. it makes an inline box on the outside, but a sort of insulated new block layout on the inside. css calls this "flow-root", i guess because it's like flow layout but confined to a rectangle, as if it were a new page. notably that means that an inline-block box can't break across lines, so if you make a big chunky one like i just did then it might leave a big fucking horizontal gap too, the same way as if you wrote out supercalifragilisticexpialidocious and made the word wrap algorithm very sad. i assure you this has all been one long paragraph, you can check with inspect element or just look at the gaps to see where paragraphs end!

the great thing about inline-block is that it's guaranteed to be an unbroken rectangle, which means you can start to use all kinds of fun css properties that only work on rectangles!

the better stuff

border: 2px solid cyan;

alright so i did all this buildup but i misled you a tiny bit because you can actually use borders (and box shadows, coming up shortly) on inline boxes. the problem is just that it likely doesn't do what you want. or maybe you do want this i just can't imagine why

border is shorthand for three separate properties: the border width, the border 'style', and the border color. but most of the time you see all three of them assigned at once like that.

the most interesting border styles are solid, dashed, dotted, and double (which generally needs a width of 3px or more to be visible). there are also four pseudo-3d looking ones — inset, outset, ridge, groove — but they can be a little bit hit or miss.

this probably seems pretty straightforward but there are a couple goofy things you can do with borders actually

for one, you can set all four borders independently, which can be nice for some little stylistic flairs.

the above is written like this. i used <p> because i wanted to keep regular paragraph styling but you could also use a <div> for a block like this

<p style="padding: 0.25em 0.5em; border: 2px solid #222; border-left-width: 0.5em;">
  for one, you can set all four borders independently, which can be nice for some little stylistic flairs.
</p>

"whoa what is padding" shh stop reading ahead

and in general every combination of border plus an optional edge plus an optional property works. so you can configure just the right border by setting border-right to something like 5px solid orange.

ah but wait, what exactly can you set something like border-width to? great question, full marks. the answer is: a lot of things. each of these paragraphs has the same basic border of 2px solid blue but then an extra border-width property:

6px — one value sets it for every side, unsurprisingly

6px 2px — two values sets top/bottom, then left/right

6px 3px 1px — three values sets top, left/right, then bottom

3px 6px 9px 12px — four values goes clockwise from the top: top, right, bottom, left

unfortunately you can't use multiple values in the basic border property (which is weird because i can't see any reason it wouldn't work), so if you want different borders you gotta spell it out explicitly.

now here's your first genuine css trickery: what do you think happens if you have different color borders?

this paragraph has border-color: red yellow blue magenta;. the results are not especially surprising, i would think; you get a diagonal edge where the color changes

okay, that's good to know. what if you use transparent as a color?

this paragraph has border-color: transparent magenta;. hmm. okay that makes sense. the border is still taking up space, but it's transparent so nothing draws there.

What if the paragraph is EMPTY?

Wow! You can make a triangle with CSS, just by having transparent borders! That's great. I bet you can do some interesting variations on this by changing the various borders' widths, too. Please press the Ⓐ button to continue.


border-radius: 1em

do you even know how incredible it was when browsers got this. do you even know what we had to do to get rounded corners before this. it was ugly man. it was so bad. you can't even imagine.

you can also set the corners separately with like... border-top-left-radius, or have elliptical corners, or set all four using some syntax that involves a slash, but i do that like 1% of the time so i'm just not gonna go into it here

anyway here's a little target made out of an empty div with a double border and a border radius. also you can just use a gigantic radius and it'll be capped so the corners don't run into each other btw


box-shadow: 2px 3px 1px 1px gold

hoo boy! that sure is a lot of numbers. but box-shadow is super cool and fun so i think it's worth spending a little time on before we get back to diagrams and whatever. let's start with the most basic form and build up. these are all just regular paragraphs with the box shadow i say they have (plus a faint border for clarity on where the actual box is)

box-shadow: 2px 4px; — X and Y offsets for where the shadow appears, just like with text-shadow. and in just the same way, the default is a hard edge and... black? is it black or the current text color? i have no idea, i've never made a box shadow without a color specified. i guess i should check on that. ok it defaults to the current text color

box-shadow: -2px -4px; — of course negative offsets are fine too

box-shadow: 1px 3px red; — adding a color changes the shadow color. revolutionary. you can put the color either before or after the numbers (just not in the middle); i put it last because it feels less important, i guess?

box-shadow: 1px 3px #f004; — this is a good time for translucent colors. on a white background it doesn't matter (you could just as well use a light pink) but it's nice on a textured background or popups or whatever, so i just kinda always use a translucent color out of habit

box-shadow: 1px 3px 4px #f004; — if you add a third length then it's the blur radius of the shadow, which you probably usually want. for actual drop-shadow purposes i set this to a small length, like a couple of pixels. bear in mind that like... the more you blur it, the bigger the shadow gets? hopefully it makes sense why that would be the case

box-shadow: 1px 3px 2rem #f004; — very big shadow. at this point the offsets aren't even visible any more. kind of cool for making a glow effect though. you can do this with text-shadow to make glowing text too

box-shadow: 1px 3px 4px 8px #f004; — unline with text shadows, you can add a fourth length, called "spread" — it expands the shadow outwards (or inwards, if you make a negative length)

box-shadow: 0 2px 12px -4px #f004; — you can make very soft, diffuse shadows with a big blur radius and a negative spread to rein them back in

oh but it gets better. it gets so much better.

before i go on i want to stress: all of these paragraphs have no background! these shadows do not draw underneath the box. contrast with:

filter: drop-shadow(2px 2px 2px #0004); — this is probably not what you had in mind

box shadows are extra things to draw; filter is post-processing effects.

alright now check this out

box-shadow: inset 0 0 0 2px gold; — if you add the inset keyword (anywhere, though i put it first), you can draw a shadow inside the box! obviously you can use this to fake a second border, but take note that borders take up space whereas box shadows are purely visual — that means text will happily draw on top of an inset shadow, as you can probably see in this very box. also "spread" for an inset shadow means spreading inwards — it's always away from the edge

box-shadow: inset 0 0.5em 2em -0.5em #0004; — of course you can combine inset with all the previous stuff for similar effects, just inwards instead of outwards

here's the great part: just like with text shadows, you can have as many box shadows as you want (separated by commas) and this lets you do all kinds of nonsense. just remember, the first one draws on top!

box-shadow: 0 0 0 2px red, 0 0 0 4px pink, 0 0 0 6px darkred; — arbitrarily many borders! safer on the outside, though beware of shadows going under other elements

box-shadow: 0.5em -0.5em pink, -0.5em 0.5em gold; — idk what this is exactly but it feels like something you might do if travel back in time to 1996 and get a job in marketing

box-shadow: 0 0 2px 1px #ccc, inset 0 0 2px 1px #ccc; — combine inner and outer shadows to make a seamless fuzzy border

box-shadow: inset 4em 0 0 -2em pink; — make an inset border, use negative spread to get it very far out from the edges (so it won't show at all), then shift it over further than the spread so it only shows on one edge

box-shadow: inset 4em 0 0 -2em pink, 4em 0 0 2em teal; — same as before but with the inverse effect as an outer border so you can kinda-sorta see what's going on

box-shadow: inset 0 1em 1em -1em pink; — the blur radius is called that because the blur extends that far both inwards and outwards from the original edge of the shadow, so for a soft shadow along only one edge, you'll often see the same number three times like this

and of course you can do this four times to get a different color shadow on each edge. i've never seen anyone do this and i don't know why you'd want to exactly but it's kind of cool

it doesn't work so well on the outer edges, and it's also susceptible to the problem that the outer shadow has a fixed size, and shrinking it beyond that size will simply make it disappear — for example if this paragraph only has a single line of text, it will simply have no shadows at all. oops!

oh, and i forgot to mention: box shadows respect the border radius, both inside and out. so if the border is curved, the shadows will be too!

but what you want is the real stuff, huh. you want the Good Stuff. you want a glimpse at the Unknowable.

how's this. is this what you want. that's right it's a 3d button made entirely out of box shadows. it could probably be better but i spent like 30 seconds ten minutes on it. this is what we had to do when we had box shadows but no linear gradients yet. you kids today and your game boys and your tiktoks

ok that's enough of that we gotta get back to the Crunchy Stuff

The Box Model

The Box Model is just the breakdown of how several css properties contribute to a box's size. it gets a lot of flak because there are some weird exceptions but the basic idea is pretty straightforward. the properties are:

  • width/height — these are, shockingly, the width and height. they default to auto, which generally means: you figure it out. for a block that means fill all available horizontal space, and extend vertically to fit all its children.

  • padding — this is some, hmm, "physical" space between the contents of the box and its edge. the background will draw underneath this, which is why i think of it as "physical". it's got some substance to it.

  • border — we already saw this. it's also "physical" in the sense that it contributes to a box's size (and for a block with an automatic width, it'll eat into the available space). fun fact, the background will also draw under the border.

  • margin — ok this one is a bit weird. the core idea is that it's the minimum amount of breathing room that a box wants. it's common for paragraphs, for example, to have a margin of something like 1em 0, meaning "i want at least a 1em gap between myself and whatever's above or below me". (oh yeah and that multi-edge stuff for borders works for padding and margins too.)

    if you have two paragraphs in a row, they both want to be at least 1em away from the other. the browser could add the margins together and leave a 2em gap, but no one asked for that. so instead it uses whichever margin is bigger, and in this case leaves a 1em gap. this is called "margin collapsing" and it can be very annoying because it interacts weirdly with nesting and various things disable it at surprising times

and that's basically the whole box model. you will often see it diagrammed as such (and you can see this for any element on the page via inspect element)

margin-top (and previous sibling's margin-bottom)
border-top
padding-top

height
padding-bottom
border-bottom
margin-bottom (and next sibling's margin-top)

this is not very exciting but it is super duper nice to know just as a very basic polish thing, because a little box that looks like this is just not as aesthetically pleasing as one that looks like this. only difference is that the latter has padding: 0 0.25em.

anyway the whole reason i didn't mention these until now is that they are a bit wonky on inline elements! as it turns out the "box" model goes a bit funny when the boxes can be cut into strips. most notably, width and height are ignored entirely (except for images, where they set the size of the image)

zany caveats slash cool tricks

there are a lot of zany caveats and you will keep running into them on your css adventures i am sorry. if it's any consolation there are far fewer zany caveats than there used to be

① i said the background draws behind the padding and the border, but you can change this by setting background-clip to content-box or padding-box. i don't know why you would do this but you can do it


② you can use percentages for these values... sometimes. with width it's pretty straightforward: a 50% width will be half the available space. but what does a 50% height mean? usually nothing, unless there's some fixed size to take 50% of.

however, a percentage padding or margin is always relative to the available horizontal space. even vertically. this is the basis for a classic trick to force an element to have a fixed aspect ratio. say i want to make a box that's half the width of this post, but always exactly a square. no problem — width: 50%; padding-bottom: 50%;

of course, this element has zero height, and putting text in it would increase the height and thus make it taller, but there are different tricks for that.

oh by the way, if something has a known width, you can center it by setting both left and right margins to auto e.g. margin: 0 auto;.


③ one of the longest-running css annoyances is with how width works. say you want to have two boxes side by side. (we haven't actually gotten to how to do that yet but just imagine.) ok, easy, set width to 50%. now say you want them to have some padding. err, whoops — now they are both 50% wide, plus they have some padding, so they don't actually fit next to each other. well fuck

there are several solutions to this!

one is to use box-sizing: border-box;, which changes the rules so that width refers to the total width including the padding and borders. so now the padding will be subtracted from width to find how much space is left for the actual contents. there are some people who even swear by applying this property to Every Element On The Page but i don't buy it.

that said it looks like cohost does this to the Entire Contents Of Posts so i guess be aware of that probably since it means the diagram above doesn't apply here lol

another is to use the fucking amazing calc() function, which you can use anywhere you need something numbery. width: calc(50% - 1rem * 2); will exactly solve this problem. i mean assuming your padding is 1rem.

but the best way is to just use flexbox or grid, which are specifically built to handle problems like "put two boxes side by side", which is why we'll be getting to them next time


④ margins do work on inline elements, but only sideways. on the other hand inline-block can do whatever it wants. err this one might only make sense if you inspect the "inline-block" text, but like, notice how the background isn't affected


⑤ margins can even be negative, in which case they consume space. this is an easy way to make stuff overlap so use with care!!

it also works even on inline elements, so you can overlap words easily this way, although it's not very precise since you don't know the exact width of a word


⑥ there's also properties min-width, max-width, min-height, and max-height, which override the normal width and height. this is so you can set width or height to something kinda fluid and variable, like a percentage or something using vmin, but you can also apply hard constraints in a concrete unit like px or em so that things don't get outta hand in degenerate cases.

this div is a quarter of the post width but always at least 100px

well maybe not a great example since cohost posts tend to show in only one of a few specific widths, but you get the idea


⑦ there are a couple special values for width (and, less commonly, height):

  • min-content — the smallest amount of space the element's contents could take up. for text, this basically means the length of the longest word, because it could always wrap until it's that small. more useful for like, shrink-wrapping around a single image or something.

  • max-content — the largest amount of space the element's contents could take up without just filling empty space. for text, this is the length of the longest line, unwrapped.

  • fit-content — this one is kind of funny but i think it means use the available space, or max-content, whichever is smaller. i guess we can just try that out

fit-content with a short line

fit-content with a line that's hopefully long enough to like wrap around onto more than one line

ok yeah that's cool

hmm...

min-content oh god this was a mistake


⑧ actually this post is getting kinda dry but there are 2 super cool things i want to get to

a practical example

i've already used

so how exactly is it put together?

hopefully you have some idea by now or i've done a fucking awful job at this, but here are some less obvious parts

  • the box itself is an <aside>, a tag with no special aesthetic behavior, meant to indicate an... aside. like an inline footnote. you know. one of those things.

    there's no special reason to do this over just using a div unless you care a lot about semantics (and i do), except that i wrote this one with @blep's prechoster, so i could write style rules for just aside and have them apply like magic. for similar reasons, the big header text at the top is an <h3>.

  • the header background and the border are both translucent blacks, so that i could just write the background color inline on each aside, and get sensible other colors. it's not super aesthetically pleasing but it saves me from fussing around with color picking. i would probably use css variables for this on a real website, or just have a fixed set of aside "types" instead of arbitrarily making up a different color each time

  • the emoji are from @mutant's Mutant Standard and inserted via @lexi's cohost userscript. i adjusted the css some from what the userscript generates though

  • specifically, the emoji <img> has display: inline-block;, and then i give it a -1em top margin to make it extend out of the header box (which also means its larger height doesn't stretch the header box vertically). a small right margin keeps it from ramming into the header text.

  • the aside has 0.5em of padding, which would usually mean the header box has a 0.5em gap on each side. but i wanted it to go all the way across, so i gave it a left and right negative margin of 0.5rem. (i had to use rem here because the header itself has a bigger font size, so 0.5em inside the header is bigger than 0.5em outside!)

  • i use normal paragraphs inside the aside, but there was an unsightly gap at the end because the last paragraph's bottom margin pushed the bottom of the box down. i think it's possible for the margin to collapse outside the box, but only if there's no padding or some fuckin dumb ass thing. you can normally fix this with some clever selectors, but they only work in stylesheets, so i just removed the bottom margin from paragraphs within the aside.

  • the white streak on the header is just a horizontal text shadow. it's weird but i think it looks cool, might remember that and do it again somewhere

so i hope that helps you sprinkle some little informational boxes and stuff in your posts. and now that we've done a practical thing let's get to some Hot Nonsense

the juice: transform

it's what you've all been waiting for: the transform property. i couldn't do this in the first post because it fundamentally operates on rectangles, which means it can't sensibly work on inline elements, which means you had to know what inline-block was!!!

*
*
*
*
*
*
*
*
*
The More You Know
~~~~~~~shooting star

ahem

anyway transform lets you do a bunch of visual transformations to a box. the super duper important thing to remember is that transformations are visual only!! they happen AFTER the box has been sized and placed and whatnot, so no matter how you transform something, it won't affect the position of anything else on the page. so if you aren't careful, overlaps are very easy

like filter, a transform is a series of space-separated function-lookin things. i don't remember which order they happen in, but it doesn't matter anyway, because it's like USB: you will absolutely do it wrong on your first try, and then you'll swap them and it'll still be wrong, and then you'll swap them again and now it'll work.

but also MDN says the last one happens first, which is guess is kind of like how the last text or box shadow is drawn first.

the functions

yes. the functions


rotate(5deg)

guess what this does!

css is really chill about angle units. the obvious one is deg, but it also has grad (there are 400 in a circle), rad (there are τ in a circle), and the exceptional unit turn (there is 1 in a circle) which i keep forgetting to use.

you can also rotate by a negative angle.


translate(3em, 2em)

"translate" is math nerd talk for "move". this moves stuff.

but again, transforms don't affect layout. so this will shift an element visually, but leave it physically in the same place, taking up the same amount of space. like if i nudge a word right out of this paragraph

if you only give one argument, it's taken as horizontal movement. you can also be more explicit and use translateX(), and naturally there's a translateY() too


scale(75%, 1.25)

i think this is pretty self-explanatory. this time, if you give only one argument, it scales in both directions by that amount, so scale(50%) makes something half size as you might expect. again there's also scaleX() and scaleY().


skew(30deg)

this is kind of a weird one but it turns a rectangle into a parallelogram. i don't know why it's done in degrees, or why positive amounts move the top edge left.

you can actually express this in terms of rotation and scale but it's comically unintuitive

you can use two arguments here, but then it doesn't look much like a skew, so i didn't. as with translate(), a single argument skews horizontally only, and there are skewX() and skewY() available.


and that's the core of transform. it actually lets you do rather a lot, and the fact that it doesn't affect layout makes it a little easier on the browser when you animate it and stuff.

one other thing you should know about is transform-origin, which specifies like, the point that the box rotates or scales around. thankfully, because the box is already laid out at this point, you can use percentages!! nice. it defaults to the center of the box but you can set it to stuff like bottom right or 75% 10% or whatever. or even some point outside of the box why not.

three dee

it's also possible to do some transforms in 3d space. which is the only way to transform a rectangle into not a parallelogram, in fact. i think.

there are special functions for this: rotate3d(), translate3d(), and scale3d(), plus -Z versions of those. also there's a perspective() function to control how far into the viewport to consider the box to be. but i think these are a little harder to wrap your head around so they are probably beyond the scope of this post. the TMYK thing above uses some 3d transforms, but i basically winged it and fiddled with numbers until it was good enough

anyway let's finish off with some

shenanigans

you can flip something by scaling it a negative amount

<span style="display: inline-block; transform: scaleX(-1);">🔫</span>

🔫

you can do wide text a couple of ways. the obvious thing is to do scale(2, 1) but remember that it doesn't affect layout, so this will make the wide text overlap its neighbors! that's no good. so instead i double the font size, then scale it back down. a line-height of 1 saves it from expanding the line vertically. but that causes a new problem — the scaled text is no longer aligned vertically with the rest of the line. there are some galaxy brain ways to fix this (and maybe a simpler one i'm not thinking of atm) but i just set transform-origin: 0 75% which is about where the baseline of most fonts is and it's good enough.

(i took a look at markdown plus, and it does wide text by measuring the text and putting a fixed width, which is definitely a worse idea oh no — imagine if someone's system used a wider font!)

you can do <span style="display: inline-block; font-size: 2em; line-height: 1; transform: scale(1, 0.5); transform-origin: 0 75%;">wide text</span> a couple of ways...

scaling will get you upside-down text (with, again, some fiddling to align it), and rotating will get you rotated text which is different, and of course there is mirrored text to complete the trifecta. well, also normal text. so. a quadfecta.

transforms apply to everything: text, images, scrollbars, form controls (not on cohost though), videos, iframes, you name it

alright i gotta cut it here

this is getting out of hand and prechoster is starting to struggle. i wanted to get to <details>, which lets you make clickable stuff, but that takes some more basics and i need to do literally anything besides this today so look forward to it

extra credit

speaking of borders, there's a border-image property that lets you 9-slice an image and use it for the borders, which is very cool, but a bit fiddly to use. i haven't seen it done a whole lot recently but if you are a video games person then you might appreciate it.

also check out this little menu thing though

  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

You must log in to comment.

in reply to @lexyeevee's post:

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)

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

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

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

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 😅

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

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

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™!

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.