diff --git a/curriculum/challenges/english/blocks/review-css-colors/671a90c1cf517678b130419e.md b/curriculum/challenges/english/blocks/review-css-colors/671a90c1cf517678b130419e.md index e26295f61c5..6e673ee4d79 100644 --- a/curriculum/challenges/english/blocks/review-css-colors/671a90c1cf517678b130419e.md +++ b/curriculum/challenges/english/blocks/review-css-colors/671a90c1cf517678b130419e.md @@ -99,7 +99,7 @@ div { ```html -

Hex Text

+

Hex Text

Hex Background

``` @@ -115,6 +115,40 @@ p { ::: +## The `box-shadow` Property + +- **Definition**: The `box-shadow` property applies one or more shadows around an element. +- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit. +- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow. +- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`. +- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions. +- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside. +- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back. + +### Syntax + +```css +box-shadow: offset-x offset-y blur-radius spread-radius color; +``` + +:::interactive_editor + +```html + +
Shadow Color Example
+``` + +```css +.shadow-box { + width: 200px; + padding: 20px; + background-color: lightblue; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); +} +``` + +::: + ## Linear and Radial Gradients - **Linear Gradients**: These gradients create a gradual blend between colors along a straight line. You can control the direction of this line using keywords like `to top`, `to right`, `to bottom right`, or angles like `45deg`. You can use any valid CSS color and as many color stops as you would like. diff --git a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md index 8c2aa8aa4f9..a451911e365 100644 --- a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md +++ b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md @@ -217,7 +217,42 @@ Review the concepts below to prepare for the upcoming exam. - **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color. - **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color. - **`hsla()` Function**: This function adds a fourth value — alpha — that controls the opacity of the color. -- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F. +- **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F. + +## `box-shadow` Property + +- **Definition**: The `box-shadow` property applies one or more shadows around an element. +- **Offset Values**: You must specify horizontal (`offset-x`) and vertical (`offset-y`) values. Positive `offset-x` moves the shadow to the right, while negative values move it to the left. Positive `offset-y` moves the shadow down, while negative values move it up. If a value is `0`, you do not need to include a unit. +- **Blur Radius**: This optional value controls how blurry the shadow appears. If not included, it defaults to `0`, which creates sharp edges. The higher the value, the softer the shadow. +- **Spread Radius**: This optional value controls how much the shadow expands or shrinks. If not included, it defaults to `0`. +- **Shadow Color**: You can specify the color using named colors, hex values, `rgb()`, `rgba()`, `hsl()`, or `hsla()` functions. +- **`inset` Keyword**: Adding the `inset` keyword places the shadow inside the element instead of outside. +- **Applying Multiple Box Shadows**: You can apply multiple shadows by separating them with commas. Shadows are layered from front to back. + +### Syntax + +```css +box-shadow: offset-x offset-y blur-radius spread-radius color; +``` + +:::interactive_editor + +```html +
Shadow Example
+ + +``` + +::: ## Linear and Radial Gradients