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:

Discussion (15)

Collapse
inhuofficial profile image
InHuOfficial

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
Siddharth Chaudhary • Edited on

The entry is peng innit bruv

Collapse
inhuofficial profile image
InHuOfficial

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 Author

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

Thread Thread
inhuofficial profile image
InHuOfficial

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

Thread Thread
sidcraftscode profile image
Siddharth Chaudhary

🤣

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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 Author

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 Author

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 Author • Edited on

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 Author

Pinkies out!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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