alvaromontoro

alvaromontoro, 3 months ago to random

This slider is a single HTML tag styled with CSS. No images and no JS (apart from an inline command to update a CSS variable.) It's responsive and works on all major browsers.

It uses:

• Custom properties
• Filters
• Container queries
• Trigonometry functions

Demo on @codepen: https://codepen.io/alvaromontoro/pen/oNVEqgz

An input range component where the thumb to move is a plane. On the left, it says New York; on the right, it says Madrid. As the plane moves within the range, it simulates a take-off/landing (the plane grows towards the middle, projecting a fainter shadow; and it is smaller towards the edges with a sharper shadow). Some clouds move around while moving the plane right and left. When the component is made narrower, the plane is replaced by a smaller helicopter.

alvaromontoro, 3 months ago to random

Developers before and after... Barbie edition...

alvaromontoro, 4 months ago to CSS

Today's comiCSS cartoon: Headaches
https://comicss.art/?id=114

And the source code: https://comicss.art/comics/114/headaches.html

#css #joke

alvaromontoro, 19 days ago to random

No Face from Spirited Away, drawn with CSS and a single HTML element.
https://codepen.io/alvaromontoro/pen/ZERzGWY

#webdevelopment hashtag#css hashtag#cssArt hashtag#divtober hashtag#throwBackThursday hashtag#tbt

alvaromontoro, 1 month ago to random

My latest single-element toggle switch is Pac-Man themed: https://codepen.io/alvaromontoro/pen/OJGzBqe

An animated toggle switch with pacman eating dots inside.

alvaromontoro, 2 months ago to CSS

New comiCSS cartoon: PR Reviews
https://comicss.art/?id=127

#css #webdevelopment #joke

alvaromontoro, 1 month ago to random

Bootstrap may be considered bad now, but it has done more for web development and styling than Tailwind has done (and ever will?)

Bootstrap may be boring and all the sites look really similar, but it brought web styling to people that didn't know how to do it. Not only for developers, but for anyone building a website. People that didn't know much about web development could build nice-looking websites (something that is reflected in an estimated 20% of the web using Bootstrap).

alvaromontoro, 1 year ago to webdev

Coffee as a CSS Color: using the new HWB function to describe coffee styles... But changing the values a little:

• H = Hot water
• W = Whiteness/milk
• B = Blackness/coffee

https://comicss.art/?id=87

Thanks @cheeaun and @ItsCrisDiaz for your feedback and suggestions! 😊

#coffee #css #comic #webcomic #comicss

alvaromontoro, 7 months ago to webdev

Web Development has evolved and progressed over the last 20 years... but maybe not always for the better 😅😂

New comiCSS comic: https://comicss.art/?id=104

#webdev #webcomic #joke

alvaromontoro, 8 months ago to CSS

LevelUp Coding shared my article "Small Details to Improve Your Website’s Experience." A collection of five simple tips and tricks in HTML and CSS that will provide a better user experience and take just a few minutes to implement on any site.
https://levelup.gitconnected.com/small-details-to-improve-your-websites-experience-88425116a06c

I also published it on my personal site: https://alvaromontoro.com/blog/68039/small-details-to-improve-your-website-experience

#css #html #webdevelopment #medium

alvaromontoro, 3 months ago to random

Next week, it will be the second anniversary of comiCSS. It is my pet project: a webcomic about CSS coded in CSS.

It is ridiculous, mostly useless, somewhat educational, and a lot of fun to create. Hopefully, it will keep going for a while longer.

https://comicss.art

alvaromontoro, 10 months ago to CSS

New comiCSS cartoon: The ABCs of CSS.
https://comicss.art/?id=95

Each letter is drawn with CSS and uses the property/value that it showcases. Some are animated (K or Q), and others are interactive (M or R). Check the live demo to get all the action: https://comicss.art/comics/95/abc-css.html

#css #comics #html

alvaromontoro, 2 months ago to random

February Demos:

K Denerz: Electric Spinner
https://codepen.io/konstantindenerz/pen/XWQWYVW

大漠: Path Animation
https://codepen.io/airen/pen/NWJQPeE

Josetxu: Leaping Loader
https://codepen.io/josetxu/pen/yLwWMoB

J Dillon: Toggles
https://codepen.io/jdillon/pen/PoLBVmV

Giana: Scroll animation layout
https://codepen.io/giana/pen/gOEQWpR

K Denerz: Video To ASCII
https://codepen.io/konstantindenerz/pen/YzgRQZj

T Afif: Heart reveal
https://codepen.io/t_afif/pen/abMPBdg

K Kondrashova: Eye Pattern
https://codepen.io/ksenia-k/pen/poYZpyQ

B Evans: CSS Art
https://codepen.io/ivorjetski/pen/MWxPVBo

J Kantner: Bubble Loader
https://codepen.io/jkantner/details/poYZMXX

alvaromontoro, 6 months ago to CSS

This is it. My divtober 2023 drawings. Each of them is a single element and some CSS (gradients everywhere!)

#divtober #cssart #css

4x4 grid with drawings. Each drawing has a title/description below it. From left to right, top to bottom: tangled, brave, component, sticky, seeing, faraway, alive, fake, feast, cheesy, cold, rules, handmade, pin, discontinued, and witchy.

alvaromontoro, 4 months ago to random

I wrote a short article about the new native toggle switches on Safari: how to create them, demos, pros, cons, and a (little) rant about the syntax 😅
https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari

alvaromontoro, 2 months ago to random

I don't understand people defending Tailwind like their honor is on it. Did I miss a memo or a check in the mail or something? WHO TOOK MY TAILWIND HUSH MONEY????

alvaromontoro, 9 days ago to random

New comiCSS cartoon: Framework Fans vs Framework Bros
https://comicss.art/comics/140/

It was inspired by a Pizza Cake Comic cartoon (linked in the source code).

alvaromontoro, 2 months ago to CSS

I aim to code a new toggle switch each day in 2024. But work comes first, and I fell a bit behind on this personal challenge... So, I coded 8 toggle switches this weekend using a single HTML element and CSS.

Find these and many more switches on this @codepen collection: https://codepen.io/collection/aMPYMo.

#css #html #webdev

Animation showing eight different toggle switches. The demos have 4 of each in off state, on state, off state (disabled), and on state (disabled) stacked vertically. The demos are: - Smiling emoji - Metal - 3D ball - Colorful (animated) - On/Off - Growing toggle - Growing toggle 2 - Airplane Mode

alvaromontoro, 3 months ago to random

Toggle switch #28: Día de los Muertos
https://codepen.io/alvaromontoro/pen/OJqqMxe

It is a single HTML element animated with CSS styling. No images or JavaScript.

alvaromontoro, 15 days ago to random

Everyone asks women (and men) if they'd rather encounter a strange man or a bear in the woods, but no one asks the bear.

...until now... New single-element toggle switch: https://codepen.io/alvaromontoro/pen/XWwrEKy

Design inspired by this CSS toggle by Anastasia Goodwin: https://codepen.io/agoodwin/pen/gKpKqw

Demo of a toggle switch with the shape of a cartoony bear. At both sides the text "Strange Man" and "Strange Woman". The bear's face moves to one side or the other when clicked.

alvaromontoro, 14 days ago to random

I made some slight changes to the toggle switch:

• Added a soft skew transform so it looks like the bear is leaning one way or the other
• Changed how the background is generated and added masks so the bear is visible in high-contrast mode (I haven't tested it though 😳)

https://codepen.io/alvaromontoro/pen/XWwrEKy

Showcase of a toggle button that looks like a bear looking from side to side (to the options "strange man" and "strange woman")

alvaromontoro, 2 months ago to random

Getting a PR rejected is not a bad thing!

A PR comment/rejection/request for change is not a personal attack. It's a learning opportunity for both reviewer and reviewee. It is a way of clarifying methods, learning better practices, and paving the path to a healthier and more maintainable codebase. But for that, you need to go with an open mind and a willingness to learn.

alvaromontoro, 24 days ago to random

"Did you know that with only 20 lines of JavaScript you can do [enter amazing thing that can't be done in 20 lines of JavaScript]? Step one: create a new project using this huge @$$ JS framework. Step two: download these dependencies (that will take 2GB in your hard drive). And step three: copy these 20 lines of JS code... And you are done! You built something amazing in just 20 lines of JS!"

alvaromontoro, 27 days ago to random

Every time I post a comiCSS cartoon that mentions Tailwind, I get some push back and complains from people. I should have been the bigger man and not reply to this comment... But I did.

On the bright side, it gave me an idea for a new cartoon with Tailwind as main topic. So I got that goin' for me, which is nice.

alvaromontoro, 1 month ago to random

Yesterday, I did a small workshop about drawing with CSS and my experience drawing a comic about CSS in CSS at the Nerdearla conference. As part of the workshop, I created a small meme for comiCSS: https://comicss.art/?id=132

A Tailwind version may be coming out soon :P