CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 2
pyxo.me/0a0b95 #pyxofy #cssart #codenewbie
1
0
0
0
#cssart
Latest posts tagged with #cssart on Bluesky
Trending
Posts tagged #cssart
CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 2
pyxo.me/0a0b95 #pyxofy #cssart #codenewbie
2
1
0
0
CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 1
pyxo.me/c59041 #pyxofy #cssart #codenewbie
2
0
0
0
CSS Art – shape() Function & Gradients: Create an Isometric Trophy - Part 1
pyxo.me/c59041 #pyxofy #cssart #codenewbie
2
1
0
0
Illustration of a cat looking at the stars sitting down on the moon coded in HTML and CSS.
A cat. On the moon. In a spacesuit.
Built with HTML + CSS only 🚀🐱 (reusing some previously coded parts)
Source code on @codepen.io: codepen.io/alvaromontor...
#CSS #CSSArt #WebDev
12
1
0
0
Illustration of a groundhog in kawaii style with the text "If Phils sees his shadow... six more Tailwind classes!"
Tomorrow is Groundhog Day. Remember: if Phil sees his shadow, that's 6 more Tailwind classes (in every HTML tag, in every page)
#css #cssArt #joke #groundhogDay
16
3
1
1
CSS Art – Using clip-path: polygon() for Building Responsive Isometric Pyramids
pyxo.me/02d46d #pyxofy #cssart #codenewbie
1
0
0
0
CSS Art – Using clip-path: polygon() for Building Responsive Isometric Pyramids
pyxo.me/02d46d #pyxofy #cssart #codenewbie
1
1
0
0
them. Next to the scene there's the following CSS code: #winner { order: 1; running: first; color: gold; &::after { content: '🏆'; } }
comiCSS #119: Winner
comicss.art/comics/119/w...
February 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.
#html #css #cartoon #cssArt #webdev
2
1
0
0
Cartoon of a person using a computer with clouds in the background, next to a box with the following CSS code: .cloud-developer { background: azure; isolation: isolate; rest: none; stress: 100; content: none; }
comiCSS #116: Cloud Developer
comicss.art/comics/116/c...
February 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.
#css #webDev #cartoon #cssArt
5
1
0
0
Cartoon of a man laying down in bed and saying "As a web developer, I don't count sheep to go to sleep, I count front-end technologies I'd like to learn". As he dozes off, a bubble with different styling technologies appear (CSS, BEM) and time passes by in a clock
Cartoon of a man laying down in bed and saying with a bubble with different styling technologies appear in each panel: CSS, BEM, tailwind, Bootstrap, less... instead of falling asleep, he is more and more awake as time passes.
Cartoon of a man laying down in bed with a bubble with different styling technologies appear (CSS, BEM, Boostrap, less, tailwind, JSS...), time passes and he looks more unhappy. The last panel shows the person with a tired look in his face at 6:55am
comiCSS #115: Do Web Developers Dream of CSSheep?
comicss.art/comics/115/c...
January 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.
#css #webDev #cartoon #cssArt
5
1
0
0
Comic strip titled 'Types of headaches' with four panels showing a person with a red are indicating the zone of the headache, and a title underneath it indicating the type of headache. The first panel is for Migraine, and the red area occupies the right side of the forehead and eye. The second panel is for stress, and the red area is the forehead and both sides of the head. The third panel is for tension, and the red area is around the forehead. The fourth panel is for Tailwind, and the whole head and body are red.
comiCSS #114: Types of Headaches
comicss.art/comics/114/h...
January 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
#css #html #joke #cartoon #tailwind #cssArt
24
1
1
0
comic strip with 4 panels. The first one is a cover for Goldilocks and the Three Bears, with a girl and three bear heads, the names have been scratched and rewritten to GoldiloCSS and the Three Breaks. The following panels show some code and the result of it with a comment from GoldiloCSS. In the first one, she uses word-break: break-all, and all the words break at inconvenient places. She says 'too hard'. In the second one she uses word-break: keep-all. The words wrap to the next line unless they wouldn't fit, thent hey exceed the space allocated to them. GoldiloCSS comments 'Too soft'. In the last panel, she uses word-break:break-word and the words wrap to the next line unless they wouldn't fit, then they break. GoldiloCSS comments 'Just right... kind of...'
comiCSS #113: GoldiloCSS and the Three Breaks
comicss.art/comics/113/g...
December 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.
#css #html #cartoon #cssArt
2
1
0
0
Drawing with CSS after a long while... codepen.io/alvaromontor...
There was a little bit of back and forth with the drawing, but I like how it turned out in the end.
#css #html #cssArt
11
2
2
0
Comic with 2 rows. The first one is titled 'Web programming in 2003'. A person says 'I am off to develop a website', and comes back 5 hours later saying it completed the landing page, and found some cool effects. The row below is titled 'Web development in 2023'. The same person says 'I am off to develop a website', and comes back angry after 5 hours, no web development done, it has all been setting up the dev environment (and it's not done yet)
comiCSS #103: Then and Now
comicss.art/comics/104/e...
September 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.
#css #cartoon #webdev #cssArt
5
1
0
0
Cartoon with two newscasters (a white man and a Black woman) reading the news from a paper. The mustached man says 'After a very long time, this week did not get a new CSS feature released by the CSS working group, or supported by any of the major browsers.' The woman adds, 'Police have already arrested the culprit, who, we hope, will spend a long time behind bars.'
comiCSS #103: News
comicss.art/comics/103/n...
September 18, 2023 – There was a time ~2 years ago when it seemed that every week (almost every day) we got a new CSS feature in the standard or supported by one of the major browsers. When we didn't it was "newsworthy."
#css #cartoon #webdev #cssArt
3
1
0
0
Comic strip with 4 panels. A figure walks into a CSS code that generates a red border and exclaims 'oh, wow! a CSS debugging red border!' Then adds 'This could be the same red border that helped debugging and learning to people like Rachel Andrew, or Eric Meyer, or Jen Simmons, or Harry Roberts, or Sara Soueidan, or...'. In the third panel, the character remains silent thinking. And finally pleads 'Please, red border, inspire me, and let me learn as much as them!'
comiCSS #102: Debugging Red Border
comicss.art/comics/102/
September 11, 2023 – I reached out to the different people I mentioned and asked for permission to use their name. Grateful for their time and feedback (I initially had a border and they suggested an outline.)
#css #cartoon #webdev #cssArt
4
1
0
0
Cartoon with an ashamed-looking brain (drawn in kawaii style) next to the text: Brains are amazing. they work nonstop 24/7 from the moment you are born until the moment you need to remember if it's align-text or text-align.
comiCSS #101: Brains
comicss.art/comics/101/b...
September 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?)
#css #cartoon #webdev #cssArt
8
1
2
0
Cartoon with a man and a woman at the front of the Titanic (like in the movie). She says "I have a secret, Jack: I use divs as buttons". He pushes her overboard with a disgusted look.
comiCSS #100: Jack and Rose
comicss.art/comics/100/j...
August 28, 2023 – Semantic HTML is the way to go. Don't use divs (or links) as buttons... or you may get thrown overboard 😅
#css #cartoon #webdev #cssArt
10
3
0
0
Comic with 6 panels showing a man sitting in front of a computer. The screen goes off and the person asks for help. Another person off-panel says the problem is a translateY and to wait one more panel. In the next panel (below to the one where the screen disappeared), the code appears to the confusion of the person.
comiCSS #99: Lost in Translation
comicss.art/comics/99/lo...
August 21, 2023 – A little bit meta, silly, and punny, breaking the fourth wall. Fun fact: I made the character bald because I didn't want to spend too much time figuring out the hair back and front 🫣
#css #cartoon #webdev #cssArt
4
2
0
0
comiCSS #98: Magic Cards
comicss.art/comics/98/ma...
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.
#css #cartoon #webdev #cssArt
4
2
0
0
An iceberg drawn with CSS, with no HTML elements for this week's @codepen.io challenge: codepen.io/alvaromontor...
#css #cssArt
7
0
0
0
The Ice-Cream Web Stack: a neapolitan ice cream with arrows pointing to the chocolate, vanilla, and strawberry. JavaScript is chocolate: Rich, versatile, and everywhere. You cannot avoid it. It comes in many flavors, and people have very strong opinions about each one. HTML is vanilla: The structural backbone of the web. It may seem plain, but it is essential, reliable, and pairs with everything. CSS is strawberry: The color and creativity. It adds personality, style, and makes everything look (and taste) better.
New comic: Neapolitan Web Stack
comicss.art/comics/224/
#css #cartoon #CSSArt
14
5
1
1
CSS Art – How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 2
pyxo.me/98b1d5 #pyxofy #cssart #codenewbie
1
0
0
0
CSS Art – How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 2
pyxo.me/98b1d5 #pyxofy #cssart #codenewbie
1
1
0
0
CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 1
pyxo.me/0b86f2 #pyxofy #cssart #codenewbie
3
0
0
0
CSS Art - How to Build a Pure CSS Analog Clock with Gradients & Variables - Part 1
pyxo.me/0b86f2 #pyxofy #cssart #codenewbie
2
1
0
0
A Día de Los Muertos CSS art from 4 years ago: La Muerte/LA Catrina from The Book of Life.
🎦 video: www.youtube.com/watch?v=9ZMi...
🖼️ source code: codepen.io/alvaromontor...
#css #cssArt #html #webDev #DiaDeLosMuertos
2
0
0
0
