Assessment wanted for creating fancy letterheaded paper ⠀

MDN Learn
#1

Hello, I would like an assessment for Fancy Letterheaded paper. Here is my solution: Task.

I can’t figure out a more cross-compatible way of implementing drop-shadow, I can’t find any reference to drop-shadow in the articles and the function is not new, it has been supported since Chrome 18.

Thank you in advance for your help!

#2

Nice work @TheRealSuperhuman

The background code should be on the article and not the body, because the article has letter dimensions. The code itself is mostly fine. The only thing I see is that the gradient should be the first bg image since it’s asked to be on top of the others.

A more compatible way would be to use box-shadow. This property also works on IE (which isn’t too relevant nowadays). From the drop-shadow() article:

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box , while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself .

Because of the rectangular box we also need to add some border-radius with box-shadow:

border-radius: 50%;
box-shadow: 3px 3px 3px black;

Have a nice one,
Michael

1 Like
#3

I made the fixes and set both gradient alpha chanel to go from half transparent to fully transparent, is it correct now?

By the way, I still don’t understand how does drop-shadow() decides where exactly to apply the shadow to the image (the image is square and has a white color around the circle). Which logic or algorithm is used?

And for the box-shadow, there is a fourth length <spread-radius> value, What’s its purpose? I can’t see a difference between what it does and what changing the first two values does.

#4

That looks good now.
By the way you could also use a single gradient with more color stops:

linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.5))

The space around the circle is transparent and not white. That makes the drop-shadow() work. From the article (alpha mask means “everything that is not transparent”):

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

The spread radius defines how big the shadow is and the first two values define how far to the right and down the shadow shall be moved (the offset).
To test the effect we can start with box-shadow: 5px 5px 5px 5px black; in your code and then change every value to 50px one after the other. After each step observe how the shadow changes until you arrive at box-shadow: 50px 50px 50px 50px black;. This should make it a bit clearer.

I hope that helps. :slightly_smiling_face:

#5

It certainly helps and the experiment was quite interesting. I get what the spread-radius value is and now I’m wondering why the drop-shadow() and text-shadow doesn’t accept this value.

Also everytime, I open the logo image file directly in the browsers (Chrome, Opera, Firefox), they all show a white color around the circle instead of the gray square and white square pattern synonymous to transparency. I had to download the image and open it in an image viewer program to actually see the transparency around the circle.

The browser image viewer show the transparent pixels in the image as white while the browser itself fully recognize transparent images and allows you to see stuff behind them. I wonder why?

#6

I don’t know, but with another little experiment I found out that the algorithms to calculate the shadow are different for box-shadow and drop-shadow (regardless of the spread radius parameter. The first two images have the same parameters and in the third one I tried to match the blur parameter to make it look like the first image:
https://jsfiddle.net/nbrj3efc/

I noticed that, too. That grey-white-square pattern would make sense. I also opened an image viewer program to make sure I’m not telling you something wrong. :grin:

1 Like