Julia Miocene

I'd love to!

No videos this and last week. I'm on vacation 🌴🌴🌴

YouTube video by Julia Miocene The Squarest Frog Alive — Sunday CSS #17

This week’s character is chunky, charming, and surprisingly easy to build.
If you can style a <button>, you can create this froggy. Seriously.

🐸 Learn how basic CSS building blocks turn into a froggy with cheeks, toes, and a fly.

youtu.be/rRsZDu7Ax3I

YouTube video by Julia Miocene Drawing a Mushroom Buddy with Pure CSS — Sunday CSS #16

Say hello to The Big-Eyed CSS Shroom —
a goofy little mushroom with massive eyes, long legs, and even a canary on his hand.

It’s weird. It’s cute. It’s built with love (and CSS).

youtu.be/vDEJ7j5jb2U

YouTube video by Alvaro Montoro Drawing Yoda with CSS

Just shared a new video drawing with CSS. This time is Yoda (or Grogu?) in a kawaii-ish style.
youtu.be/r_FH65HpYgE?...

He looked a bit sad with the mouth like that so I flipped the mouth and make it smile :)

Live demo and source code on @codepen.io: codepen.io/alvaromontor...

#css #cssArt #html

YouTube video by Julia Miocene Made This Dog with Just HTML & CSS. No SVG or Canvas! — Sunday CSS #15

New Sunday CSS Video!
I coded this abstract dog illustration using nothing but HTML + CSS — no SVG, no images, no canvas.
Every curve, shadow, and detail? Pure CSS.
🐶 Curious how it’s done? Watch here → youtu.be/PptOJpm-jhU

Already bought tickets! See you all there 👋

Somehow, 6,000 of you hit subscribe on YouTube and didn’t immediately regret it 😄
Big love to the brave souls watching my CSS chaos. More divs and wizardry coming soon!

youtube.com/@julia_miocene

Julia's squares Gave a go at my own version of [Julia Miocene](https://codepen.io/miocene)'s [Recursive Squares](https://codepen.io/miocene/pen/dPoQGVx) animation, but...

Awesome ! Cool animation and well explained.
Wanted to give a go at an alternative version using masks (it ended up a bit trickier than expected)
codepen.io/bali_balo/pe...

Couldn't help myself and forked it to make a version using #CSS mathematical functions. And which allows changing the number of squares per edge by changing a single value and nothing else (as seen in the recording below).

Live on @codepen.io: codepen.io/thebabydino/...

YouTube video by Julia Miocene Sunday CSS #14: Recursive square

Sunday CSS is live! This week: Recursive Square

A mesmerizing loop of nested squares built with creative CSS tricks.
Simple idea, striking result — perfect for your next UI experiment.
youtu.be/rFPZM6tCT_o

Good catch! Thank you, already fixed :)

It's live now! Thanks, @kevinpowell.co, it was awesome 🔥 Will battle again when @cssbattle.dev has more complex battles 🙂

www.youtube.com/watch?v=eynG...

😄😄😄

Julia Miocene Personal page

All the demos and a text version are on my website miocene.io/post/light-a...

YouTube video by Julia Miocene Where is the light? Complete 3D CSS Guide, Part 2

New video up: part 2 of my 3D CSS series!
This time we dive into lighting: simulating highlights, shadows, warmth, and reflections with pure CSS.
Make your 3D objects feel real (even chickens 🐔).

www.youtube.com/watch?v=2FEg...

Thank you :)

😄

😄

No, not for this talk unfortunately. But I'm working on a video and article versions of this talk. Want to add more useful tricks. So, you can follow me and wait for a month or so 😄

It was amazing! Thanks for making it all happen ❤️

Thanks Brecht 😊❤️

We do have a good time here! 😄

Before I post my next video (after a 10 month break) I want to share one of the demos I created for it. Pure CSS 3D David Eye 👁️
codepen.io/miocene/full...

NO WAY! I'm so sorry 😭

AT WORK! AT WORK ONLY! 😂

Registration — Meets CSS — April 1, 2025 Tickets are free! We’d love to see you. 🎁 ❤️ Like what we do? Why not become a Smashing Member? — starting at 5 USD a month.

Join us tomorrow for CSS Meets! 🎉

With @nerdy.dev, @miocene.io, and @miriam.codes — absolute CSS pros and smashingly nice! They’ll be sharing their tips, tricks, and insights to make your stylesheets shine. 🌟

Don’t miss out—grab your free ticket now!
smashingconf.com/meets-modern...

CSS Weekly Issue #603 Learn how sibling-count() and sibling-index() functions work, how to style elements that span multiple lines, how to utilize light-dark() function, and more.

CSS Weekly #603
👭 sibling-count() & sibling-index() functions
⚜️ box-decoration-break
🌗 llight-dark()
🚀 tight mode in browsers

Featuring @kilianvalkhof.com, @mayank.co, @geoffgraham.me, @chriscoyier.net, @cferdinandi.bsky.social, @alexmuzenhardt.bsky.social, @codepo8.bsky.social.

cssw.io/issue-603

CSS Day 2025 will take place on 5th and 6th of June in Amsterdam. #cssday

cssday.nl

😄