freeCodeCamp's Applied Visual Design, Add a box-shadow to a Card-like Element

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=zeMTS_WGDy4


Duration: 2:34
225 views
4

In this lesson from freeCodeCamp's Applied Visual Disign section we look at the box-shadow property. We use the box-shadow attribute when we want to apply a box shadow to an element. The box-shadow property allows us to specify a shadow for our element. The box-shadow property values are in this order: offset-x (this says how far the shadow will be horizontally from element), offset-y (this says how far the shadow will be vertically from the element), blur radius, spread radius, and a color value. We learn that the blur-radius and also the spread radius are optional values. Use the box-shadow property to add a nice shadow to your elements.



Other Videos By We Will Code


2018-09-15freeCodeCamp's Lock an Element to its Parent with Absolute Positioning, Applied Visual Design
2018-09-14freeCodeCamp's Move a Relatively Positioned Element with CSS Offsets, Applied Visual Design
2018-09-12freeCodeCamp's Change an Element's Relative Position, Applied Visual Design
2018-09-11freeCodeCamp's Adjust the Hover State of an Anchor Tag, Applied Visual Design
2018-09-10freeCodeCamp's Set the line-height of Paragraphs, Applied Visual Design
2018-09-09freeCodeCamp's Set the font-size of paragraph Text, Applied Visual Design
2018-09-09freeCodeCamp's Set the font-weight for Multiple Heading Elements, Applied Visual Design
2018-09-08freeCodeCamp's Applied Visual Design, Set the font-size for Multiple Heading Elements
2018-09-08freeCodeCamp's Use the text-transform Property to Make Text Uppercase, Applied Visual Design,
2018-09-07freeCodeCamp's Applied Visual Design, Decrease the Opacity of an Element
2018-09-07freeCodeCamp's Applied Visual Design, Add a box-shadow to a Card-like Element
2018-09-07freeCodeCamp's Applied Visual Design, Adjust the Size of a Header Versus a Paragraph Tag
2018-09-06freeCodeCamp's Applied Visual Design, Adjust the background-color Property of Text
2018-09-06freeCodeCamp's Applied Visual Design, Create a Horizontal Line Using the hr Element
2018-09-05freeCodeCamp's Applied Visual Design, Use the s Tag to Strikethrough Text
2018-09-04freeCodeCamp's Use the em Tag to Italicize Text
2018-09-04freeCodeCamp's Use the u Tag to Underline Text
2018-09-01freeCodeCamp's Applied Visual Design, Use the Strong Tag to Make Text Bold
2018-09-01freeCodeCamp's Adjust the Height of an Element Using the Height Property
2018-08-31freeCodeCamp's Adjust the Width of an Element Using the Width Property
2018-08-31freeCodeCamp's Create Visual Balance Using The Text-align Property, Applied Visual Design


Tags:
freeCodeCamp
applied visual design
box-shadow property
adding box shadow
box shadow attribute
css properties