Hello, I have completed the last exercise of the CSS building blocks section. Again, I would like to ask someone with more experience to take a look.
Also, I have two additional questions:
- I used the
display: flex;
declaration in order to center the text vertically. Was that the right approach?
- I’m not sure about the
box-shadow
declarations I used. I tried to search MDN for more info about applying several box-shadows at once but I wasn’t able to find anything. I have completed the exercise thanks to some stack overflow post I found. Could you provide me a link with more info on box-shadows?
- I also created a second box, using ‘Box-shadow generator’ that I found on MDN.
A cool-looking box - Learn web development | MDN (mozilla.org)
My solution:
Edit fiddle - JSFiddle - Code Playground
Hello @Rastko_Gojgic
you doing great well done
-
i am not experience to say if there better way or not but it always depend on the use case check this to see many ways to align it vertically
https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html and i guess using flex is better than many other ways in that case
-
for box-shadow check this one https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow the last example already multi shadow option
box-shadow: 3px 3px red, -1em 0 .4em olive;
notice the comma the seperate 2 shadow
if you checked the syntax part https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntax you would see it mention it
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
hope that help and have a nice day 
1 Like
Nice, this seems very useful, thanks for the reply.
Have a nice day!
2 Likes