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
 
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
 
alvaromontoro profile image
Alvaro Montoro •

Thanks!

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
 
jayehernandez profile image
Jaye Hernandez •

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

Thanks!

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!!!!!