I made it till the end with the second of the three suggested assessments of the final step of the MDN tutorial on CSS. It’s the paper letter template.
In the below link, you can see my attempts to accomplish what I was asked for.
I’m very insecure with linear gradients, multiple backgrounds with the same element (body), fallback image and I could not replace the shadow filter with another tool.
I will appreciate anybody’s help. This is the link: https://codepen.io/maxsal87/pen/vYgbMJN
Regards from Argentina.
You have really done some good work on this. I tried to figure it out for myself and got stuck with the linear greadient. I learnt something new looking at your CSS and how you divided the linear gradient into sections i.e. 0%, 20%, 80% 100% with rgba to set the transparency as well.
I started to do this and used the following in my code
body {
background: url('top-image.png'), url('bottom-image.png');
background-repeat: round no-repeat, round no-repeat;
background-position: top, bottom;
}
h1 {
background: url('logo.png');
filter: drop-shadow(2px 2px 1px black);
}
I noticed that your top and bottom image are centered and dont cover the whole viewport width.
I used background-repeat which can have 2 value equivalent. By using round and then no repeat I state that the image should take up the whole of the x dimension and not reapeat on the y dimension.
background-repeat: round no-repeat, round no-repeat;
As for your last comment
I’m supposed to comment out this line and implement the drop-shadow in a more cross-over browser compatible way, but… I don’t know how!
I couldnt find anything specific for drop-shadow but only for box shadow
I am just wondering if @chrisdavidmills might be able to answer this last part on compatibility. For reference the exercise on MDN is Creating Fancy Letterhead paper.
1 Like
Thank you very much for your valuable help!