Álvaro Montoro
LightNews LightNews
banner
alvaromontoro.com
Álvaro Montoro
@alvaromontoro.com
2K followers 340 following 1.8K posts
Software Engineer | HTML, CSS, and other web things

Microsoft MVP

100% not an alien
Posts Replies Media Videos
alvaromontoro.com
Este jueves estaré en @nerdearla.bsky.social España (de forma remota) hablando sobre CSS, programación creativa, y cómo se puede usar CSS para dibujar proyectos como @comicss.art.

#css #comics #nerdearla #español
Nerdearla España. Jueves 13 de noviembre, track development. - Manu Rodriguez Gil: Cómo la IA me obliga a pensar más durante el desarrollo - Alvaro Montoro: Dibujando comics con CSS - Kevin Morales: Firebase Logic en acción: repensando la lógica de negocio en apps móviles Kotlin in Swift.
November 10, 2025 at 3:48 PM
alvaromontoro.com
Frigo Pie and Frigo Dedo.
A box of Frigo Pie, an creamy pink ice cream shaped like a foot A box of Frigo Dedo a juice-base popsicle, yellow, red, and orange.
November 9, 2025 at 9:47 PM
alvaromontoro.com
The struggle is real.

#esl #bilingual?
Meme from an edited picture from the Simpsons divided into two parts vertically. The first one shows an older man (Mr Burns) with text over him: "Me, a non-native English speaker who is trying to learn the phonetics in order to sound almost like a native." The second part shows many hands holding ketchup bottles with a different word on top of them: peace, peas, piece, piss, pees.
November 8, 2025 at 4:25 PM
alvaromontoro.com
People in social media love Lina Lamont's singing.
A woman wearing 1940s clothing sings in front of an old-style microphone. Above her, the captions "The sun's in my heart and I'm ready for love" (sun in yellow, love in red) It is an image from the movie Singing in the Rain cropped for this post to match a 9/16 aspect ratio. It shows Lina Lamont (portrayed by Jean Hagen) lip-syncing, while leaving out Kathy Selden (portrayed by Debbie Reynolds) who is the one doing the singing left to Lina, but Kathy is out of the 9/16 cropped frame.
November 8, 2025 at 3:57 PM
alvaromontoro.com
Talking with the kids about voting, electoral districts, and gerrymandering.

Their takeaway so far: "No! Wait! That's cheating!"

Wait until I show them our district's Pokemon shape (spoiler alert: it's an Onix.)
Notepad with handwritten notes: 15 pink and 10 green circles aligned in a 5x5 grid, on the side: Pink 15 = 3 Green 10 = 2 Then Pink 15 = 5 Green 10 = 0 Then Pink 15 = 2 Green 10 = 3
November 5, 2025 at 1:03 PM
alvaromontoro.com
Works on my machine :)
Screenshot of CodePen with HTML code: <ul random> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> and CSS code: [random] { display: grid; li { order: random(1, sibling-count()); } And the preview screen is a list: 2, 3, 4, 1.
October 30, 2025 at 5:26 PM
alvaromontoro.com
A bunch of Halloween-themed single-element toggle switches! 🎃👻

The characters follow your mouse on hover, change expressions, and animate side to side.

Check out the source code and live demo on @codepen.io: codepen.io/alvaromontor...

#CSS #HTML #WebDev
October 30, 2025 at 2:57 PM
alvaromontoro.com
Another single-element toggle switch without using JS or images, just HTML and CSS.

Demo on @codepen.io: codepen.io/alvaromontor...

This one is "directional aware" and has micro-interactions, but it's using a trick so not all the toggle area is clickable... which is not ideal 😳

#css #html #toggle
October 29, 2025 at 8:21 PM
alvaromontoro.com
Single HTML element toggle switch: Lock

Demo on @codepen.io: codepen.io/alvaromontor...

#css #html #component #codepen
October 29, 2025 at 2:11 AM
alvaromontoro.com
...and because every browser does form controls differently, the drawing is different in each browser... I personally like how they look on Firefox.
Drawing of a butterfly using circles and ellipses with wide white paddings and colorful centers (Chrome) Drawing of a butterfly using circles and ellipses with wide colorful paddings and white centers (Safari) Drawing of a butterfly using circles and ellipses with thin white paddings and colorful centers (Firefox)
October 22, 2025 at 12:56 AM
alvaromontoro.com
Normal people: It's a beautiful day! Let's do something great!

Me: What if I drew some animals with CSS using radio buttons and accent-color?

#CSS #CSSArt
Minimalistic drawing of a butterfly using circles and ellipses Cartoon of a weird smiling frog using circles and ellipses
October 22, 2025 at 12:51 AM
alvaromontoro.com
Amazon: Come back and get this offer!

Also Amazon: This offer is not for returning customers.

🤨
I guess "come back" doesn't have the same meaning for Amazon and for me. Anyway, something positive: I muted audible notifications. So I got that going for me, which is nice.
Phone notification from Audible: Enjoy 2 free titles on us! Come back free for 30 days. Best selling audiobooks, exclusive originals, popular podcasts, and more. Screenshot of audible with details from the offer from the notification. It has a big warning message: This offer is only available to Amazon prime members who are new to audible. We're sorry, it appears you are ineligible did the offer as you are not a current Amazon prime member or you're a returning Amazon prime member who has previously received 2 free credits with an audible trial. Start your 30 day trial today with 1 free credit. Try for $0.00
October 19, 2025 at 4:55 PM
alvaromontoro.com
I updated the website for the company I created earlier this year, added some micro-interactions and CTAs... but it still feels dated.

All feedback, suggestions, and (constructive) criticism are welcome. The site is studiokah.com (code needs clean up too 😓)
Screenshot of studiokah.com in light mode Screenshot of studiokah.com in dark mode
October 18, 2025 at 8:46 PM
alvaromontoro.com
I did a single-div CSS Art based on today's inktober prompt: Sting.
codepen.io/alvaromontor...

#inktober #divtober #sting
Cartoon of a bee in kawaii style
October 12, 2025 at 2:08 AM
alvaromontoro.com
OS + System Data basically taking half of my hard drive... Ugh!
Screenshot from MacOS showing space used: - Other Users & Shared: 1.6MB - macOS: 16.14GB - System Data: 85.28GB
October 12, 2025 at 12:28 AM
alvaromontoro.com
Practical visualization of how using robots.txt works to prevent AI bots from going through your site.
A cheeto/potato chip used to lock a door
October 11, 2025 at 3:41 PM
alvaromontoro.com
This post cannot be displayedThis post cannot be displayed The author has restricted who can view this post
October 8, 2025 at 3:40 PM
alvaromontoro.com
An old @codepen.io collection: CSS Simpsons.
codepen.io/collection/D...

If I had to code them today, I'd do it in a completely different way (if at all). Fun fact, they helped me land a job: I shared them on LinkedIn, a former coworker saw them, needed a CSS expert, reached out... and it worked out
Homer Simpson Sideshow Bob Kang (Alien from the Simpsons) Troy McClure
October 2, 2025 at 8:37 PM
alvaromontoro.com
A character card demo on CodePen: codepen.io/alvaromontor...

#html #css #card
September 29, 2025 at 12:55 PM
alvaromontoro.com
My son doesn't know, but he is grounded.
Oh, he is sooooo grounded.
Two kids with emojis over their faces. One is wearing an atlético de Madrid jersey, the other one is wearing a Real Madirid jersey
September 27, 2025 at 3:42 PM
alvaromontoro.com
Thanks @jake-haver-of-catz.bsky.social for the pictures of the talk.

#CYC25
Alvaro pointing at some code on the screen Alvaro talking in front of a screen with JavaScript code Silhouette of Alvaro in front of a screen with a mario-looking character who is Noentiendo Super Pepe Bros Alvaro with a CSS es increíble tshirt and Jake with a Hawaiian shirt
September 26, 2025 at 10:45 PM
alvaromontoro.com
I updated the :heading article with an additional interactive demo showcasing the differences between :heading() and :is()
alvaromontoro.com/tutorial/hea...

#css #html #webDev
Screenshot of widget with buttons an output and description fields to demo the :heading feature.
September 21, 2025 at 4:42 AM
alvaromontoro.com
I wrote a short article about the :heading pseudo-class and function.
alvaromontoro.com/tutorial/hea...

It includes a little interactive section where you can play with the values and see how the affect the headings on the side.

#css #webdev
September 16, 2025 at 3:05 PM
alvaromontoro.com
Firefighter POV: in a fire and this is definitely not fine. Followed by a cartoon that is an edition of the "This is fine" meme (a dog drinking coffee surrounded by fire) but seen from behind
September 13, 2025 at 7:49 PM
alvaromontoro.com
Why does Safari ignore the border-radius for the box-shadow in some cases? Is this a bug or the result of some calculation going wrong? (or both)

Chrome and Firefox display the drawing as expected, but Safari struggles with it. Demo: codepen.io/alvaromontor...
Drawing of baby yoda as seen on Chrome and Firefox (shadows are curved) Drawing of Baby Yoda as seen on safari (many of the shadows are straight instead of curved)
September 1, 2025 at 1:28 PM