DEV Community

Alvaro Montoro
Alvaro Montoro

Posted on

Divtober Day 14: Fancy

The word of the day is "fancy"... so here's a cartoon of a fancy-looking British gentleman with a hat, a monocle, and an umbrella:


There's a second element (not used in the drawing) with a link to a YouTube video of how it was coded (although it is a bit tough to follow with things "jumping around"):

*After recording the video, I changed the code a little. The image will look the same, but the code is a bit different (using the short notation) as mentioned in the comments below.


I did a quick second version with the man holding a cup of tea with the pinkie out:

Top comments (15)

Collapse
 
grahamthedev profile image
GrahamTheDev

Whoop whoop another video - time to go learn some more stuff!

Also your entry today is...spiffing! (coming from a Brit!)

Collapse
 
sidcraftscode profile image
sid • Edited

The entry is peng innit bruv

Collapse
 
grahamthedev profile image
GrahamTheDev

Bruh, I’m old school so it is “lit” or “banging”, I don’t get this peng and bear malarkey 🤣

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I'm too old... Is "peng" a thing? I thought they were asking if it was a PNG 😳

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Haha, peng is attractive I believe or something similar! 🤣 PNG I understand though! ❤️

Thread Thread
 
sidcraftscode profile image
sid

🤣

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
afif profile image
Temani Afif

why you always set the gradient, position and sizes using their properties ? 🤔 I found it difficult to manage that way.

Why not using the syntax background:gradient position / size , ... ?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I updated it following the shorthand notation. I guess it still takes some time to get used to it, but at the moment I have mixed feelings about it: It is definitely cleaner and more organized than having the background images, sizes, and positions separated... but at the same time, I find it more difficult to follow, especially for people that may not be used to that notation (like me 😓).

Collapse
 
afif profile image
Temani Afif

Yes for sure it will be difficult if you are already used to the longhand one. You are not the only one by the way, Lynn also use that notation. I don't know how you can easily find the position or the size for each gradient .. It would take me forever to find the correct one 😖

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Also, this made me remember one reason why I didn't do the shorthand notation more often: I don't know why, I would expect "image size / position" (or "image size position") instead of "image position / size" and it puts me off a little.

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Because I'm a dodo and got used to the long notation 😳

I will try the shorthand notation, it will help making things easier and save me some time looking for things. Thanks for the recommendation.

Collapse
 
waylonwalker profile image
Waylon Walker

Pinkys out

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Pinkies out!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I'm so smart that I changed the original without realizing I hadn't forked it before 🤦