comiCSS

@comicss

A webcomic about CSS. Coded in CSS. Webcomic : comicss.art Support : www.patreon.com/comicss Author: @alvaromontoro.com

167 Following619 Followers674 Posts

Bluesky

Is this your profile?Claim it and comicss.dirty.social is yours.Claim profile

comiCSS@comicss· 4d

I also did an alternative with more modern CSS.

cartoon with four cups filled with a yellow liquid, all look really happy (except the last one that looks in shock and concerned). The first one says 'I am oklab(93.4% -11.75% 46.5%)' The second one says 'I am oklab(96.8% -17.75% 49.75%)' The third one says 'I am oklab(95.6% -21.5% 46.5%)' And the last one says "Guys... I'm positive we're urine labs, not oklabs!"

comiCSS@comicss· 4d

New cartoon: Yellows comicss.art/comics/255/ #css #cartoon #webdev #humor

cartoon with four cups filled with a yellow liquid, all look really happy (specially the last one). The first one says 'I am #fe2!' The second one says 'I am #ff0!' The third one says 'I am #ef3!' And the last one says 'I am #pee!!!

comiCSS@comicss· 7d

IYKYK

A version of the King Neptune vs. SpongeBob SquarePants meme:
- King Neptune (labelled Tailwind) stands in front of a pyramid of hamburgers.
- SpongeBob SquarePants (labelled CSS) stands in front of a single hamburger.

comiCSS@comicss· 11d

I've been saying it for a long time 😅

Modified version of the Angry Wojak meme showing 4 panels with two people talking. The first panel shows a person saying 'CSS is not a programming language'. The second panel has the other person replying 'Of course it is! What are the main concepts of OOP?' Then proceeds to 'explain' how CSS 'has' encapsulation, inheritance, abstraction, and polymorphism, so it should be considered an object-oriented programming language.The last two panels show the first person, first normal (without saying anything) and then with an angry look.

comiCSS@comicss· 17d

New "cartoon": Border Collie comicss.art/comics/254/ I saw a similar concept on social media, and tried to give it a background-clip CSS twist. #css #webdev #comic

Four photos of a border Collie cropped differently: first one occupied a whole square and it's titled "border Collie". The second one has a blank space in the outside and it's called padding Collie. In The third one, the blank space is larger and it's titled content Collie. The last one is the text "text Collie" and the photo of the dog can be seen through the text.

comiCSS@comicss· Jul 29

New cartoon: B-side comicss.art/comics/253/ What would be some of HTML or CSS B-side tracks? #css #cartoon #humor #joke #webdev

The existence of aside implies the existence of bside (next to a cassette tape)

comiCSS@comicss· Jul 23

It's always :where() is CSS never :how() is CSS. comicss.art/comics/252/ #css #cartoon #webdev #joke

comiCSS@comicss· Jun 15

New cartoon: The Cursed Stylesheet comicss.art/comics/251/ #css #comic #webdev #humor

Comic strip with 4 panels in a 2x2 grid titled 'the cursed stylesheet'. A character is talking to a priest 'I tell you, father, there's something wrong with my website. It is not wrong, but it feels cursed, like it is possessed'. The priest replies 'Nonsense, all you have to do is open the developer tools and review the... DEAR GOD!!' The code inside the website is visible: body{cursor:wait;filter:hue-rotate(340deg);line-height:1.12;rotate:0.5deg;text-shadow: 0 0 0.5px color-mix(currentcolor, #0008);*{pointer-events:none}}. In the last panel, the priest is exorcising the computer 'The power of CSS compels you! The power of CSS compels you!' while sprinkling holy water onto the computer.

comiCSS@comicss· May 24

Oh, someone added my comic to their Medium list! That's nic... ChatGPT list? What? Why? Also, I correct the title... "Styleshett"? Oops!

Screenshot from a Medium notification: (name blurred) added your story The Perfect CSS Styleshett Should Be... to their list Chatgpt. 1 day ago.

comiCSS@comicss· May 11

The update is online. The last hint now is "10-8. CSS filter method that makes everything look old and yellow." Thanks for letting me know.

Puzzle/Crossword with the shape of a chain and multiple chained words.

It has the hints below:

1-10: Font variant that enables the display of petite capitals (OpenType feature: pcap).
1-3: Media type for styles applied when the document will be printed.
2-4: Font variant for displaying small illustrations and emoticons.
4-6: CSS function that defines an <image> in a similar fashion to the url() function.
7-5: Shorthand property to set styles to the line indicator in an input.
7-9: Function that dynamically adjusts a value between a min and a max.
10-8: CSS filter method that makes everything look old and yellow.

comiCSS@comicss· May 11

New cartoon: Web Styling Astrology comicss.art/comics/250/ This is cartoon/comic #250... maybe I should have done something special? I guess it was not on the stars for this time. #css #astrology #cartoon #webdev

disc with the title 'Web Style Astrology Circle' divided in 12 sections with the logos of some styling technologies associated to an astrological sign and a description. Aquarius is Material UI (innovative and futuristic), Aries is TailwindCSS (impulsive and energetic), Cancer is CSS (supportive and protective), Capricorn is Foundation (disciplined and scalable), Gemini is UnoCSS (curious and adaptable), Leo is GreenSock (expressive and dramatic), Libra is Bulma (balanced and elegant), Pisces is ThreeJS (dreamy and artistic), Sagittarius is Open-Props (adventurous and flexible), Scorpio is Sass (intense and layered), Taurus is Bootstrap (stable and reliable), and Virgo is materialize (organized and precise)

comiCSS@comicss· May 11

New Game: Chain comicss.art/games/54/ Can you guess the 7 words hidden in this puzzle? They are all related to CSS. #css #game #puzzle #webdev

Puzzle/Crossword with the shape of a chain, the clues are:

1-10: (10 characters) Font variant that enables the display of petite capitals (OpenType feature: pcap).
1-3 (5 characters): Media type for styles applied when the document will be printed.
2-4 (5 characters): Font variant for displaying small illustrations and emoticons.
4-6 (5 characters): CSS function that defines an <image> in a similar fashion to the url() function.
7-5 (5 characters): Shorthand property to set styles to the line indicator in an input.
7-9 (5 characters): Function that dynamically adjusts a value between a min and a max.
8-10 (5 characters): At-property syntax type that can have values in deg or rad.

comiCSS@comicss· May 10

New game: Branches comicss.art/games/53/ This is May 9. Forgot to share it earlier. #css #game #puzzle #webdev

6x8 Grid titled "pointing arrows" with the following letters:

S S N R E Z
G R E S E I
O R R I O S
P U O E N R
C P H R L T
F A C O P E
E U R I S R
D L T A H S

comiCSS@comicss· May 8

New Game: Word Gambit comicss.art/games/52/ Start at the highlighted cell and move like a chess knight to find a hidden quote by Edsger Dijkstra. (Remember: you cannot visit the same tile twice.) #css #webdev #software #game #puzzle

Word Gambit
Start at the highlighted cell and move like a chess knight to find the hidden sentence. With one restriction: you cannot visit the same tile twice.
A 6x6 board with the following words/letters:

TO IT GRAM LY THE HOPE
PRO FOR SHOW IS TES INA
BUT WAY CE. DE LESS PRE
SHO VERY TE SEN SEN TING
TIVE BUGS, BE THEIR QUA CE
A WING EFFEC OF CAN AB

comiCSS@comicss· May 7

New Game: HTML Mini-Crossword comicss.art/games/51/ All the words in this crossword are HTML tags, attributes, and values. Can you solve it? #css #html #crossword #game #webdev

Crossword with the shape of a serif HTML word. And the across and down clues below it.

comiCSS@comicss· May 5

New Game: ABCnagrams (JS Edition) comicss.art/games/49/ 26 Anagrams. Each is missing a different alphabet letter to complete a JavaScript related term. Can you solve it? #javascript #js #game #puzzle #webdev

ABCnagrams: list of letters found (none checked), below there are 26 boxes + ? = SOMETHING.

The list of terms to add a letter and find the anagram are:

- MORE E
- ROT
- SEEING
- SEDATE
- LE NEOCON
- TRITONS
- GRAVITON
- U MEET TOTS
- KY TEENAGER
- HIT
- EX
- LIED
- FOVEAL
- O RAILMEN
- SUP
- ICES
- TOONS
- DIB
- TIED OX
- TUNER
- VOW SHOPPER
- RAKE
- FOINED
- IRON FC
- DEMOUNT
- Y R TELECOURSE

comiCSS@comicss· May 4

New comic: Maslow's Hierarchy of Needs comicss.art/comics/249/ I considered making the last one a square, but in the end I went with a misshapen triangle with cut corners. #css #comic #cartoon #ai

graphic with 3 pyramids. The first one is labeled 'Maslow's Pyramid of Needs' and has the classic levels from bottom to top: psychological needs, safety needs, love and belonging, estemm, and self-actualization. The second one is labeled 'Maslow's Pyramid of Needs (Corporate version)' it only has 3 levels from bottom to top: AI (occupies 3/5), corporote profit, and exec bonus. The last pyramid is labeled 'MAIslow's PAIrAImid of NAIds (AI CompAIny version), the pyramid is misshapen, corners are cut, and there's only one level AI with many AIs written in the background.

comiCSS@comicss· May 4

May 4 Game: Spiral comicss.art/games/48/ Find all the chained CSS terms that form this spiral. #css #puzzle #game #crossword #webdev

10x10 grid with lines forming an espiral and below the clues/hints

comiCSS@comicss· May 3

🧩 May 3 Game: 4Connect comicss.art/games/47/ This board contains 4 groups of 4 related web development terms. Can you connect all of them in fewer than 4 attempts? #css #html #game #puzzle #webdev

4x4 Grid titled 4Connect with the following terms: th, ol, in, em, bdo, dt, s, i, rad, turn, dl, lh, grad, deg, li, q.

comiCSS@comicss· May 2

🧩 May 2 game: Spiral comicss.art/games/46/ In this game, the last letter of each word becomes the first letter of the next, and all the words connect to form a spiral. Use the clues to find the missing CSS terms and complete the chain. #css #game #puzzle #crossword #webdev

a 10x10 grid with borders that make it look like a spiral. The corner cells for each loop of the spiral have numbers from 1 to 19 (ordered inward to outwards).

Below the are some clues from 1 to 19:

1. Keyframes end rule keyword
2. Logical operator in media queries
3. A named primary color
4. Unit for angles
5. A really valuable color
6. Compact and rounded list style
7. A shade of the primary color from #3
8. Relative unit representing 1% of the larger value between lvw and lvh
9. Font size really big keyword
10. Timing function that starts slow and accelerates at the end
11. Cursor value to show the element can be moved upward
12. Timing function that starts fast and decelerates at the end
13. CSS property that can be pretty
14. Property that sets how an element is positioned in a document
15. Pseudo-class that matches elements based on their position
16. Timing function that starts slow, accelerates in the middle, and ends slow
17. Property that adds a shadow to a text
18. It sets how to handle spaces, tabs, and line breaks in the text
19. Sets whether borders appear around <table> cells that have no content

comiCSS@comicss· Apr 30

Today’s game: Branches comicss.art/games/44/ With this, I've completed the challenge of releasing one game a day throughout April. I may slow down a bit now while I work on fixes and prepare a better way to showcase the games. #css #game #puzzle #webdev

Game with a 6x8 grid and the title Box outer layer, and the lettes:

C O L E G A
A L E C K M
P S O D E I
O L O L N W
C Y R B I B
T E L D O N
S H T R E I
R E D I N L

comiCSS@comicss· Apr 29

April 22 Game: Branches comicss.art/games/43/ Can you find all the words associated to the root? The title is a hint for the topic (root). #css #game #puzzle #webdev

6x8 Grid with the title "Movement" and the letters:

t c e i d l
i o r y a e
n m a t i d
n i e d o n
a l d r u s
l m o a t i
i n i l n o
f e e m i t

comiCSS@comicss· Apr 28

April 28 game: ABCnagrams comicss.art/games/42/ Today's topic is HTML attributes. Sounds easy… until you remember some of those names are absolute monsters. Try to complete them all. Good luck! #html #game #puzzle #anagrams #webdev

Screenshot of the ABCnagrams game with instructions on top:

In this puzzle, you're given 26 scrambled clues, each representing an HTML attribute with one missing letter. Your task is to figure out the missing letter, add it back, and unscramble the result to reveal the correct HTML attribute. All missing letters are unique and don't repeat. The words and letters are not in alphabetical order. Some of the HTML attributes are deprecated, some others are experimental. Or maybe not... :)

The first letter is "REQUIRED" (from the anagram DRIER EU + letter Q), there are 25 other anagrams that you can check on the link on the post.

comiCSS@comicss· Apr 27

New comic: Beware of CSS! comicss.art/comics/248/ Best practices don't actually work, so use our library with new best practices that don't actually work either… so use our extension with even newer best practices that also don’t actually work... so use our... #css #comic #webdev

comic with 4 panels in a 2x2 grid. One character is typing CSS on a computer, another one interrupts and says 'You should stop using CSS! It's bad for your website! It says it here on this company's website! ...It also says that CSS is dead, best practices are bad, recommends tables and floats for layout, and...' The first character retakes writing CSS and interrupts 'And let me guess... the solution is their style library?' The second character is surprised 'Wait... How did you know?'

comiCSS@comicss· Apr 27

April 26 Game: Chain comicss.art/games/41/ Thirty-Eight tiles. Seven chained words. One solution... Can you solve it with the clues? #css #game #crossword #webdev

Puzzle title Chain (the puzzle itself looks like a snake or a worm). And the hints:

1-10: Property that determines how much a ____ item will _____ relative to others when the total size of items exceeds the parent (contains a dash).
1-3: Value in an at-rule that indicates that the custom property will not inherit values.
2-4: Unit that represents 1% of the larger dimension of the large viewport.
4-6: Value for the pitch property that indicates that the frequency of the speaking voice should be higher than high (contains a dash).
5-7: vertical-align value that aligns the baseline of the element with the superscript-baseline of its parent.
9-7: Deprecated value for the speak property that indicated that the text would not be read aurally.
10-8: Light yellowish-brown color.

comiCSS@comicss· Apr 26

🎮 April 26 game: 4Connect comicss.art/games/40/ I said yesterday's game was easy, but this one is even easier. Give it a try! #css #game #puzzle #webdev

4x4 grid with the title 4Connect, and the words: inline, block, small-caps, emoji, bottom, left, transition, tabular-nums, top, scroll-behavior, end, animation, prefers-reduced-motion, right, start, and slashed-zero.

comiCSS@comicss· Apr 25

April 25 game: 4Connect comicss.art/games/39/ Today’s game is all about colors. Some people organize them by tone, others by lightness. But me? I organize them by game difficulty 😈 Don’t worry, though... this one is easy. #css #game #puzzle #webdev

4x4 grid with the title 4Connect and the words: lime, plum, darkmagenta, blue, orange, magenta, wheat, tomato, indigo, aqua, salmon, blueviolet, black, slateblue, chocolate, and chartreuse.

comiCSS@comicss· Apr 25

April 24 game: Crossword! comicss.art/games/38/ After a few days of more difficult than usual games, you'll likely find this crossword is pretty easy. #css #html #crossword #game #webdev

Crossword with the same of the word WEB, and the across and down hints.

comiCSS@comicss· Apr 24

Yay! I'll get to hear @zachweinersmith.bsky.social talking at @bookpeople.com! :D Anyone wants to join?

Order receipt from BookPeople and EventBrite to attend Zach Weinersmith's event in Austin, TX.

comiCSS@comicss· Apr 23

April 23 Game: 4Connect comicss.art/games/37/ Today's game is tougher than it seems. It combines HTML and JS, and has some red herrings to make it a bit more difficult than usual (but that's, like, my opinion... you may find it super easy 😅). #html #js #webdev #game #puzzle