Add a box-shadow to a Card-like Element – freeCodeCamp Solutions

The box-shadow property applies one or more shadows to an element.

The box-shadow property takes values for

• offset-x (how far to push the shadow horizontally from the element),
• offset-y (how far to push the shadow vertically from the element),
• blur-radius,
• spread-radius and
• color, in that order.

The blur-radius and spread-radius values are optional.

Multiple box-shadows can be created by using commas to separate properties of each box-shadow element.

Here’s an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card.

  #thumbnail {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

Decrease the Opacity of an Element

The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.

A value of 1 is opaque, which isn’t transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.

The value given will apply to the entire element, whether that’s an image with some transparency, or the foreground and background colors for a block of text.

Set the opacity of the anchor tags to 0.7 using links class to select them.

  .links {
    text-align: left;
    color: black;
    opacity: 0.7;

Use the text-transform Property to Make Text Uppercase

The text-transform property in CSS is used to change the appearance of text. It’s a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.

The following table shows how the different text-transformvalues change the example text “Transform me”.

Transform the text of the h4 to be uppercase using the text-transform property.

  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    text-transform: uppercase;

  }