Assessment and help wanted for Creating fancy letterheaded paper

MDN Learn
#1

Hi guys, I’ve finished the fancy letterheaded paper test, here is the task page https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper and here is my code https://codepen.io/daisymzh/pen/abqvPwJ , I do appreciate your assessment.
Also, I have two questions about this task, the first is about the value of linear-gradient, using rgba would be better, but I just don’t know what number I should write, is there a way to figure out different numbers for different colors(always confusing for me :sweat_smile:)? The second is the requirement “Add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don’t support the previous declaration.” I don’t get the logic here, if the previous declaration(background-image for article) doesn’t work, add another background-image will work? or is background-image wrong for a fallback?
Hope I can get your suggestion, thanks in advance.

#2

Hi @daisymzh95

Well done! :medal_sports:

When using multiple backgrounds it’s often easier to use the background shorthand property. With this property all the values for one background are together and you would separate multiple backgrounds with commas:

background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.2)),
            url(top-image.png) no-repeat left top,
            url(bottom-image.png) no-repeat left bottom;

In this code snippet you will also see the usage of rgba(). The first three numbers stand for red, green and blue and are numbers between 0 (e. g. no red) and 255 (e. g. full red). The last number is the alpha channel and is a number between 0 (transparent) and 100 (nontransparent).

  • rgba(0,0,0,0.2) means: “no red, no green, no blue, mostly transparent” :arrow_right: “black, mostly transparent” :arrow_right: “light gray (on the white background)”.
  • rgba(0,0,0,0) means “fully transparent black” :arrow_right: “white (on the white background)”. Since it pretty hard to just know the correct numbers for a specific color, I recommend using one of the many “CSS color pickers” on the internet. For example: https://rgbacolorpicker.com/.

The idea is to put

background: url(top-image.png) no-repeat left top;

above the other snippet. The reason is that older Internet Explorer versions don’t know about linear-gradient or using multiple comma-separated backgrounds. They would use the single background and simply ignore the other code. Modern browsers would overwrite the single background with the other code after.

I hope that makes it a bit more understandable. Please ask if something isn’t clear. I’m happy to help. :slightly_smiling_face:

Have fun,
Michael

#3

Very clear explanation, thank you for spending time answering my quesitons :grin:

1 Like