Have you ever wondered what your CSS properties would be like if they were real people? I mean, with all the time you spend with them, don’t you wonder what they would be like in real life?
Well, I do. Now let me introduce you to some of the persons in the CSS world to see if it feels like you already know them or not!
display: flex – The Yoga Instructor
Just lay-out a yoga mat and breathe
Meet display: flex, the yoga instructor of CSS. Always talking about alignment, balance, and flow.
“Let’s center everything with perfect harmony,” they say while making your content bend in ways you never thought was possible.
They’re surprisingly flexible (pun intended) and can adapt to any situation they face. If you ever need some help, you can always count on Flex.
position: absolute – The Loner
Create your own path, it will save you from the queues
position: absolute is that friend who always sits in the corner at parties. They don’t follow the normal flow of conversation, they just put themselves wherever they want and expect everyone else to work around them.
They’re incredibly independent but also kind of needy, they will not do what you want if you don’t give their parents the position they require.
Meanwhile, they’ll ignore all the normal rules and just float around doing their own thing. They’re that one person in the year book photo who stands completely separate from everyone else.
z-index: 9999 – The Attention Seeker
I’m not a show off – I’m a show on!
z-index: 9999 is that person who always has to be in the front of every photo. They’re constantly seeking attention and will do anything to look smart and glorious.
They’re basically that friend who always cuts into conversations to share their latest achievement, no matter what the discussion was about.
overflow: hidden – The Secretive One
Out of sight, out of mind
overflow: hidden is the person who sweeps everything under the rug. They’re that friend who always cleans up before you visit, but you know their closet is a total mess.
They’re actually pretty helpful when you have content that’s acting up, but sometimes they hide things you actually want to see. And when you send them a long text message they read half of it and ignores the rest.
margin auto – The Peacemaker
The best age is the aver-age
margin: auto is the peacemaker of CSS. They’re always trying to find the middle ground and keep everyone happy.
They’re immensely diplomatic and can resolve almost any conflict, they simply check where all parts stands and find a solution where everyone can meet in the middle.
But remember, don’t ask them to handle vertical centering, that’s when they stand immobilized and silent having no idea how to respond.
border-radius: 50% – The Sensitive Person
I hope to see you around!
border-radius: 50% is the sensitive person who easily gets hurt by sharp comments and never would harm anyone.
They’re optimistic and careful people who would never dare to live on the edge. Subconsciously they always choose the round table at restaurants even if they are already taken and plush animals are their favorite animals.
opacity: 0.5 – The Ghost
🤫
opacity: 0.5 is the ghost of CSS. They’re there, but they’re not really there.
They are shy people who nervously whispers “I’m just passing through” while they hurry past you. When they write you a note they write it to be barely visible so you have to squint to read the text.
They are always with you but they rarely speak a word, and when they do, they whisper so low so you wonder if they really said something.
transform: rotate(45deg) – The Dizzy One
Let’s see it from the tilted side…
transform: rotate(45deg) is that person who’s always tilting their head and seeing things from different angles. “Everything looks better when it’s rotated,” they say while making your text completely unreadable.
They’re creative and see the world differently than everyone else. They’re that friend who always has a unique perspective on things, even if it’s sometimes a bit confusing. Just don’t ask them to do your home assignment – the teacher will know you didn’t write it.
@media queries – The Chameleon
One size doesn’t fit all
@media queries are the chameleons of CSS. They can adapt to any situation and look good on any picture.
They’re very flexible and always thinking about how other people experience situations. They’re that friend who can fit in with any crowd and always knows how to adapt to different situations.
It doesn’t matter if you reach out to them in the middle of the night, they are always very responsive. And sometimes when you feel the world is black and white, it can be kinda comfortable to hear them describe all their different point of views.
