#cssvariables — Public Fediverse posts

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

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

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

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

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

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

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

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

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

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

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

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

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

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

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

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

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

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

#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

#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

#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

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

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

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

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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

It's definitely not perfect but I made a thing! It's a shiny card effect 🎴 with 3d perspective, done in mostly-pure CSS with a bit of Javascript for cursor positions etc.

📱 Doesn't work very well on mobile at the moment though - it's on my todo list.

In other news, CSS container queries are both fun, useful, and confusing. 📦📦📦

https://starbeamrainbowlabs.com/labs/shinycard.html

#HowDoITag #IDontEvenKnowIJustPostHere #Noodling #WebNoodling #NoodlingAround #CSS #CssVariables #WereUsed #AndAbused #CSS3D

It's definitely not perfect but I made a thing! It's a shiny card effect 🎴 with 3d perspective, done in mostly-pure CSS with a bit of Javascript for cursor positions etc.

📱 Doesn't work very well on mobile at the moment though - it's on my todo list.

In other news, CSS container queries are both fun, useful, and confusing. 📦📦📦

https://starbeamrainbowlabs.com/labs/shinycard.html

#HowDoITag #IDontEvenKnowIJustPostHere #Noodling #WebNoodling #NoodlingAround #CSS #CssVariables #WereUsed #AndAbused #CSS3D

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

I turn 13 on @codepen in June, so here are my 13 most hearted demos:

1️⃣ 1092 ♥️ #CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K ♥️ without being in most hearted of the year first

mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)

#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

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

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer

#cssGrid #cssVariables #JavaScript #css3D #code #coding #frontend #cssLayout #web #dev #webDevelopment #webDev

Flip card on hover, flip back on hover out...

... but on touchscreens, flip it on click and then flip it back on second click!

A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.

Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/

Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer

#cssGrid #cssVariables #JavaScript #css3D #code #coding #frontend #cssLayout #web #dev #webDevelopment #webDev

I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now. 🥳

That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...

#CSS #styleQueries #cssVariables #code #coding #frontend #containerQueries #web #dev #webDev #webDevelopment

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

Neohtop — это Htop на стероидах

Приложение позволяет мониторить процессы в реальном времени, отслеживать использование CPU и памяти, а также обладает современным интерфейсом с темным и светлым режимами.

Пользователи могут искать процессы по различным критериям, фиксировать важные процессы и управлять ими, включая завершение.

Статистика системы обновляется автоматически, а сортировка доступна по любому столбцу.

Для разработки используется SvelteKit и TypeScript на фронтенде, Rust и Tauri на бэкенде, а также CSS Variables для стилизации и FontAwesome для иконок.

src: https://github.com/Abdenasser/neohtop

#blacktriangle #github #opensource #htop #top #typescript #rust #sveltekit #tauri #css #cssvariables #fontawesome

Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq

CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!

#gridLayout #cssGrid #clipPath #clipping #cssTransforms #cssVariables #coding #code #frontend #webDevelopment #web #dev #webDev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

As someone hearted ❤️ a 2015 demo of mine, I decided that since #CSS got better (and hopefully I did too), I should go for a quick 2024 remake.

Here it is on @codepen
https://codepen.io/thebabydino/pen/wKoVGN

It's mindblowing 🤯 how much I could reduce the (esp. compiled) code - check it out!

HTML by 73%!
CSS by 70%!

I repeat: I shaved off at least 70% from each! ‼️

#Sass #SCSS #Haml #Pug #preprocessor #cssVariables #HTML #cssGrid #cssLayout #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment