DEV Community

Cover image for 100 Days of CSS Illustrations (21-30)

100 Days of CSS Illustrations (21-30)

Alvaro Montoro on September 03, 2020

This week was a busy one at work, and I barely made the 10 illustrations for this batch. Most of them are my own compared to other times that I bas...
Collapse
 
dmahely profile image
Doaa Mahely

The Messi illustration 🔥

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Maybe I should update it and add a hanger for the jersey if he ends up leaving Barcelona.

Collapse
 
robole profile image
Rob OLeary

And a tear drop running down his cheek 😏

Collapse
 
sanikerdemadrid profile image
Manmohan 🇮🇳

That Messi goal gave me nightmares for a week but the illustration is fire. Great one, mate. 🔥

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! I am an Atletico de Madrid supporter. Messi has made me cry more than once...

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

#30 is insane! What's your secret?

I've seen people make really neat things with clip-path, but that CSS property has always confused me.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! I used a regular graphic design tool and exported the paths so I could use them on CSS.

Collapse
 
jasondavis_2 profile image
Jason Davis

I am working as a design team lead at Monster Logo Design and I have seen my team members using different techniques in terms of exporting the paths.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Hey! You are my neighbors! (or at least fellow Austinites?)

Collapse
 
robole profile image
Rob OLeary

I notice you mentioned drop-shadow affecting rendering in some browsers, what other properties or features should you avoid to make an illustration more cross-browser compatible in your experience?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

With the newer versions of Edge being Chromium, there are not as many issues. A few properties to be careful are:

  • filter: not all filters are supported by all the browsers. E.g. drop-shadow on Safari;
  • clip-path: IE does not support it at all, and most browsers only support polygon() or url(). path is in the definition, but no browser supports it (and it would be a game-changer).
  • background-image with gradients: while linear-gradient and radial-gradient are supported, conic-gradient is not, and repeating-linear-gradient is only partial.
Collapse
 
ziizium profile image
Habdul Hazeez

This right here is INTERESTIIIIIIIIIIIIIING!!!!!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
jayehernandez profile image
Jaye Hernandez

Amazing work! Great colors used as well for the magic castle 🏰

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!