#cssart — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #cssart, aggregated by home.social.
-
This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience.
https://codepen.io/alvaromontoro/pen/mdZKxErI haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.
-
To celebrate something-or-other, I created a retro CRT using only vanilla CSS!
📺 https://codepen.io/ivorjetski/pen/qEaRjBw
No images. No JavaScript. No SASS.
Fully turn-off-and-on-able!
Also a documentary about the making of it: https://www.youtube.com/watch?v=wdNHwIqMFDk
-
He publicado un análisis sobre la evolución de la estética de la cobardía, uniendo la épica de la Ilíada con el arte visual del anime bishōnen y el arte generativo en CSS.
Para ni fue un ejercicio de refactorización heroica donde exploré cómo las formas geométricas y los gradientes pueden narrar la tensión clásica entre el hedonismo y la fuerza.
https://open.substack.com/pub/hugui8b/p/inheritance-and-specificity-la-evolucion?utm_source=share&utm_medium=android&r=7btdxl#DigitalHumanities #Classics #CSSArt #Substack #AnimeEsthetic #WebDev #CSS #CodingArt #Bishonen
-
He publicado un análisis sobre la evolución de la estética de la cobardía, uniendo la épica de la Ilíada con el arte visual del anime bishōnen y el arte generativo en CSS.
Para ni fue un ejercicio de refactorización heroica donde exploré cómo las formas geométricas y los gradientes pueden narrar la tensión clásica entre el hedonismo y la fuerza.
https://open.substack.com/pub/hugui8b/p/inheritance-and-specificity-la-evolucion?utm_source=share&utm_medium=android&r=7btdxl#DigitalHumanities #Classics #CSSArt #Substack #AnimeEsthetic #WebDev #CSS #CodingArt #Bishonen
-
He publicado un análisis sobre la evolución de la estética de la cobardía, uniendo la épica de la Ilíada con el arte visual del anime bishōnen y el arte generativo en CSS.
Para ni fue un ejercicio de refactorización heroica donde exploré cómo las formas geométricas y los gradientes pueden narrar la tensión clásica entre el hedonismo y la fuerza.
https://open.substack.com/pub/hugui8b/p/inheritance-and-specificity-la-evolucion?utm_source=share&utm_medium=android&r=7btdxl#DigitalHumanities #Classics #CSSArt #Substack #AnimeEsthetic #WebDev #CSS #CodingArt #Bishonen
-
He publicado un análisis sobre la evolución de la estética de la cobardía, uniendo la épica de la Ilíada con el arte visual del anime bishōnen y el arte generativo en CSS.
Para ni fue un ejercicio de refactorización heroica donde exploré cómo las formas geométricas y los gradientes pueden narrar la tensión clásica entre el hedonismo y la fuerza.
https://open.substack.com/pub/hugui8b/p/inheritance-and-specificity-la-evolucion?utm_source=share&utm_medium=android&r=7btdxl#DigitalHumanities #Classics #CSSArt #Substack #AnimeEsthetic #WebDev #CSS #CodingArt #Bishonen
-
He publicado un análisis sobre la evolución de la estética de la cobardía, uniendo la épica de la Ilíada con el arte visual del anime bishōnen y el arte generativo en CSS.
Para ni fue un ejercicio de refactorización heroica donde exploré cómo las formas geométricas y los gradientes pueden narrar la tensión clásica entre el hedonismo y la fuerza.
https://open.substack.com/pub/hugui8b/p/inheritance-and-specificity-la-evolucion?utm_source=share&utm_medium=android&r=7btdxl#DigitalHumanities #Classics #CSSArt #Substack #AnimeEsthetic #WebDev #CSS #CodingArt #Bishonen
-
A cat. On the moon. In a spacesuit.
Built with HTML + CSS only 🚀🐱 (reusing some previously coded parts)Source code on @codepen: https://codepen.io/alvaromontoro/pen/MYeVvgr
-
Tomorrow is Groundhog Day. Remember: if Phil sees his shadow, that's 6 more Tailwind classes (in every HTML tag, in every page)
-
comiCSS #119: Winner
https://comicss.art/comics/119/winner.htmlFebruary 5, 2024 – This slightly animated cartoon continued the series for the 2nd anniversary. The trophy is actual `gold` color but the medal is `orange` so there would be enough contrast with the shirt.
-
comiCSS #116: Cloud Developer
https://comicss.art/comics/116/cloud-developer.htmlFebruary 2, 2024 – This was the first cartoon of a series to celebrate the second anniversary of comiCSS (the 4th is in 3 weeks!). Fun fact: the background color is azure, which is appropriate for this cartoon.
-
comiCSS #115: Do Web Developers Dream of CSSheep?
https://comicss.art/comics/115/counting-sheep.htmlJanuary 22, 2024 – With so many web technologies out there, it can be overwhelming to choose one and keep up to date. I liked the idea behind this cartoon, but the execution... not so much.
-
comiCSS #114: Types of Headaches
https://comicss.art/comics/114/headaches.htmlJanuary 15, 2024 – A good thing of this cartoon is that it allows for many alternatives (check the reply)... but making it about Tailwind made it more fun for me :P
-
comiCSS #113: GoldiloCSS and the Three Breaks
https://comicss.art/comics/113/goldilocks.htmlDecember 25, 2023 – Sometimes I do comics to showcase CSS properties and how they work. This is one of them. I like the idea and the first panel, the other three are a bit weird... but Ok.
-
Drawing with CSS after a long while... https://codepen.io/alvaromontoro/pen/QwEEOPx
There was a little bit of back and forth with the drawing, but I like how it turned out in the end.
-
comiCSS #103: Then and Now
https://comicss.art/comics/104/evolution.htmlSeptember 25, 2023 – Call me old-fashioned, but a web project with 6 pages reading data from an API does not require 5GB of node_modules, 3 different libraries, and the latest MacBook Pro to build it. Don't take me wrong, software engineering and project development has improved A TON in the past 20 years, but it has also become an over-engineered mess in many cases.
-
comiCSS #103: News
https://comicss.art/comics/103/news.htmlSeptember 18, 2023 – There was a time 1-2 years ago when it seemed that every week (and almost every day) we got a new CSS feature either in the standard or supported by one of the major browsers. One week we didn't and it was... "newsworthy."
-
comiCSS #102: Debugging Red Border
https://comicss.art/comics/102/September 11, 2023 – After coding this comic, I reached out to the different people I mentioned and asked for their permission to use their name. Grateful for their time and feedback (I initially had a border and one suggested to change it to an outline.)
-
comiCSS #101: Brains
https://comicss.art/comics/101/brains.htmlSeptember 4, 2023 – There are complex CSS properties that you remember easily and others that are incredibly simple but you have a tough time remembering. That's what happens with me and text-align (or is it align-tex?) I had never drawn a brain before and it was an interesting challenge to do it with CSS.
-
comiCSS #100: Jack and Rose
https://comicss.art/comics/100/jack-and-rose.htmlAugust 28, 2023 – Semantic HTML is the way to go. Don't use divs (or links) as buttons... or you may get thrown overboard 😅
-
comiCSS #99: Lost in Translation
https://comicss.art/comics/99/lost-in-translation.htmlAugust 21, 2023 – A little bit meta, silly, and punny, breaking the fourth wall. The character uses CSS `translate` to move the screen and it jumps from one panel to the other. Fun fact: I made the character bald because I didn't want to spend too much time figuring out the hair back and front 🫣
-
comiCSS #98: Magic Cards
July 31, 2023 – I created this cartoon by drawing a base for a Magic the Gathering card and combining it with some CSS Art that I had previously coded. It was fun.
-
An iceberg drawn with CSS, with no HTML elements for this week's @codepen challenge: https://codepen.io/alvaromontoro/pen/raeroda
-
New comiCSS cartoon: Neapolitan Web Stack
https://comicss.art/comics/224/ -
A Día de Los Muertos CSS art from 4 years ago: La Muerte/LA Catrina from The Book of Life.
🎦 video: https://www.youtube.com/watch?v=9ZMiTIHCqoM
🖼️ source code: https://codepen.io/alvaromontoro/pen/gOMzaxj -
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?
---
...and because every browser does form controls differently, the drawing is different in each browser... I personally like how they look on Firefox.
The source code: https://codepen.io/alvaromontoro/pen/MYKQZgx
-
Based on a conversation on Bluesky: https://codepen.io/alvaromontoro/pen/PwZEegv
Remove the "no-animated" class at your own peril.
-
Short: Drawing Cupid with CSS
https://youtube.com/shorts/uOuuTrT-3ec?feature=share -
Short: drawing a clay character with CSS
https://youtube.com/shorts/xUJfEiDE0NQ?si=_VwbCwYxeMhhjEmp -
Short: Drawing a monster/cartoon character with CSS
https://www.youtube.com/shorts/bdhOeAVljtM -
Short: drawing Baby Yoda with CSS
https://youtube.com/shorts/PbCilSiNDx8?feature=share -
Short: Drawing a kawaii cat with CSS
https://www.youtube.com/shorts/zm3FUKatu0UTime lapse live coding some CSS Art. Find the source code on @codepen: https://codepen.io/alvaromontoro/pen/zxvxbBv
-
Short - Drawing a koala with CSS (time-lapse)
https://www.youtube.com/shorts/ev_mUp8ajbw -
I made Logic gates using CSS if() function
https://yongsk0066.github.io/css_if_logic_gate/
#HackerNews #LogicGates #CSS #ifFunction #WebDevelopment #CodingInnovation #CSSArt
-
I made Logic gates using CSS if() function
https://yongsk0066.github.io/css_if_logic_gate/
#HackerNews #LogicGates #CSS #ifFunction #WebDevelopment #CodingInnovation #CSSArt
-
I made Logic gates using CSS if() function
https://yongsk0066.github.io/css_if_logic_gate/
#HackerNews #LogicGates #CSS #ifFunction #WebDevelopment #CodingInnovation #CSSArt
-
I made Logic gates using CSS if() function
https://yongsk0066.github.io/css_if_logic_gate/
#HackerNews #LogicGates #CSS #ifFunction #WebDevelopment #CodingInnovation #CSSArt
-
I made Logic gates using CSS if() function
https://yongsk0066.github.io/css_if_logic_gate/
#HackerNews #LogicGates #CSS #ifFunction #WebDevelopment #CodingInnovation #CSSArt
-
🎉 Congrats to the scientists for discovering that wrapping Co-Ni alloy in a cozy blanket makes CO2 electroreduction slightly less boring at high temperatures! 🔥 Meanwhile, Nature.com suggests upgrading your stone-age browser to fully enjoy their groundbreaking CSS art. 🚀
https://www.nature.com/articles/s41586-025-08978-0 #scientificdiscovery #CO2reduction #alloyinnovation #CSSart #upgradeyourbrowser #HackerNews #ngated -
🎉 Congrats to the scientists for discovering that wrapping Co-Ni alloy in a cozy blanket makes CO2 electroreduction slightly less boring at high temperatures! 🔥 Meanwhile, Nature.com suggests upgrading your stone-age browser to fully enjoy their groundbreaking CSS art. 🚀
https://www.nature.com/articles/s41586-025-08978-0 #scientificdiscovery #CO2reduction #alloyinnovation #CSSart #upgradeyourbrowser #HackerNews #ngated -
🎉 Congrats to the scientists for discovering that wrapping Co-Ni alloy in a cozy blanket makes CO2 electroreduction slightly less boring at high temperatures! 🔥 Meanwhile, Nature.com suggests upgrading your stone-age browser to fully enjoy their groundbreaking CSS art. 🚀
https://www.nature.com/articles/s41586-025-08978-0 #scientificdiscovery #CO2reduction #alloyinnovation #CSSart #upgradeyourbrowser #HackerNews #ngated -
🎉 Congrats to the scientists for discovering that wrapping Co-Ni alloy in a cozy blanket makes CO2 electroreduction slightly less boring at high temperatures! 🔥 Meanwhile, Nature.com suggests upgrading your stone-age browser to fully enjoy their groundbreaking CSS art. 🚀
https://www.nature.com/articles/s41586-025-08978-0 #scientificdiscovery #CO2reduction #alloyinnovation #CSSart #upgradeyourbrowser #HackerNews #ngated -
I retro-fitted animation-timeline to my old #purecss King of Hearts, to see how easy it would be... It was too easy! 🤩 Animation-timeline is amazing!! 🥳
https://codepen.io/ivorjetski/pen/VwOraXv
via
@CodePen
-
DEV is holding another Frontend Challenge. Here's my CSS art entry for the theme of June.
https://dev.to/jarvisscript/frontend-challenge-june-beach-sunset-48pa
#CSS #CSSArt #CodeChallenge -
No Face from Spirited Away, drawn with CSS and a single HTML element.
https://codepen.io/alvaromontoro/pen/ZERzGWY#webdevelopment #css #cssArt #divtober #throwBackThursday #tbt
-
Since I am currently teaching my 2nd year design students grid layout and how to make CSS art, this made me very happy.
Should designers code? F*&# yeah!
-
Since I am currently teaching my 2nd year design students grid layout and how to make CSS art, this made me very happy.
Should designers code? F*&# yeah!
-
Since I am currently teaching my 2nd year design students grid layout and how to make CSS art, this made me very happy.
Should designers code? F*&# yeah!
