I just discovered a web revolution: OKLCH + CSS Cascade.
As with everything I discover, I find that making a tutorial and explaining the tech is a great way to practice and learn.

Here is the CodePen:
https://codepen.io/mous_tik/pen/yyavOvp

Big thanks to Christian Diaz for the inspiration!
https://la-cascade.io/articles/oklch-en-css

#CSS #Coding #Design #Tech #Frontend #WebDesign #CSSVariables #UI #OKLCH

J'ai découvers une révolution du web: OKLCH + CSS Cascade.
Comme tout ce que je découvre, je trouve que faire un tuto et expliquer la tech, c'est pas mal pour s'entrainer et apprendre.
Voici le CodePen :
https://codepen.io/mous_tik/pen/yyavOvp

Merci à christian Diaz !!!
https://la-cascade.io/articles/oklch-en-css
#CSS #Coding #Design #Tech #Frontend #WebDesign #CSSVariables #UI #OKLCH

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

Pure #CSS #3D demo on @codepen: polyhedra morphing sequence https://codepen.io/thebabydino/pen/abmNveW

Absolutely no magic numbers, everything computed.

See Pen description for the how behind 😼

#transform #cssTransform #polyhedron #cssTransforms #polyhedra #octahedron #tetrahedron #cube #Maths #geometry #cssVariables #code #coding #frontend #web #dev #webDev #webDevelopment

A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP

Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.

#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables

It is ok to say "CSS variables" instead of "custom properties"

https://blog.kizu.dev/css-variables/

#HackerNews #CSSVariables #CustomProperties #WebDevelopment #FrontEndDesign #CodingTips

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables