CSS Box Shadows

0
votes

Can someone help me with what I'm doing wrong in the CSS code below, I want to learn and I want to make what is in the attached image. The instructions are: Styles:

  • width: 400 px,
  • height: 100 px,
  • background color: beige,
  • shadow - centered, 5 px blur, 5 px shadow width, color rgba (0,0,0,0.3),
  • horizontally centered text, font size 50 px, moved 20 px from the top, font weight 700,
  • rounding corners: 20 px.

My code

.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    box-shadow: inset 5 5 5px rgba(0, 0, 0, 0.3)}

Thank you

2
cssbox-shadow
Your box shadow property is defined incorrectly. You need to use units for the numbers, ie inset 5px 5px 5px... - Terry
I attached an image but I don't know what happened to id, I made a new post on Imgur imgur.com/gallery/jMudhd5, I changed the 5 to px. The shadow only on 2 sides and the txt isn't centered I think is the "text moved 20px from the top" part - NameHere
if the shadow is centered, then first two values are 0 , it would be 0 0 5px 5px rgba(0,0,0,0.3) developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Syntax - G-Cyrillus

2 Answers

1
votes
.test {
    width: 400px;
    height: 100px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    padding-top: 20px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3)}

Added padding-top for your requirement of text being moved 20 px from the top. This has everything else you need I believe.

0
votes

Try: box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);