Css Module 18

  Module 18 : CSS Shadows & Effects

In this module, we will cover box shadows, text shadows, and filter effects like blur and grayscale. These effects add depth, contrast, and aesthetic appeal to web elements. We will explore practical methods, exercises, examples, and lab experiments to help you gain hands-on experience.

Section 1: Introduction to CSS Shadows & Effects

CSS provides several powerful visual enhancement techniques to make elements stand out or create realistic effects. These include:

Box Shadows: Adding shadows to elements for depth.

Text Shadows: Creating shadow effects for text.

Filter Effects: Manipulating element appearance with effects like blur, brightness, and grayscale.

Each of these techniques can be customized using CSS properties to achieve different styles.

Section 2: Box Shadows in CSS

Box shadows help create depth and add visual separation between elements.

Syntax of Box Shadow

box-shadow: offset-x offset-y blur-radius spread-radius color;

offset-x: Moves shadow horizontally (right for positive, left for negative values).

offset-y: Moves shadow vertically (down for positive, up for negative values).

blur-radius: Softens the shadow edges (higher value = softer).

spread-radius: Expands or contracts the shadow.

color: Specifies the shadow color (can use RGBA for transparency).

Example: Basic Box Shadow

.box {

  width: 200px;

  height: 100px;

  background-color: lightblue;

  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);

}

Explanation:

              

10px → Moves shadow 10px to the right.

10px → Moves shadow 10px down.

20px → Creates a soft blur effect.

rgba(0, 0, 0, 0.5) → Black shadow with 50% transparency.

Example: Multiple Shadows

.box {

  width: 200px;

  height: 100px;

  background-color: lightblue;

  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.5);

}

Explanation:

First shadow is 5px down and right with black transparency.

Second shadow is 5px up and left with white transparency (glow effect).

Exercise: Experimenting with Box Shadows

Try creating a card with a glowing effect using different shadow properties.

Section 3: Text Shadows in CSS

Text shadows create glowing or embossed effects for text.

Syntax of Text Shadow

text-shadow: offset-x offset-y blur-radius color;

Works similar to box-shadow, but applies to text instead.

             

Example: Basic Text Shadow

h1 {

  font-size: 36px;

  color: blue;

  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

}

Explanation:

3px right & 3px down → Moves shadow slightly.

5px blur → Softens shadow edges.

rgba(0, 0, 0, 0.5) → Semi-transparent black shadow.

Example: Multiple Text Shadows

h1 {

  font-size: 40px;

  color: white;

  text-shadow: -2px -2px 2px red, 2px 2px 2px blue;

}

Explanation:

First shadow: Moves up-left (-2px, -2px) in red.

Second shadow: Moves down-right (2px, 2px) in blue.

Creates a 3D neon text effect.

Exercise: Create a Neon Text Effect

Try different text-shadow values to make a glowing text effect.

Section 4: CSS Filter Effects

CSS filters allow modifying the appearance of elements, especially images.

Common Filter Effects

filter: blur(px) grayscale(%) brightness(%) contrast(%) opacity(%) saturate(%);

Each function modifies a specific property.

Example: Blur Effect

img {

  filter: blur(5px);

}

Blurs the image by 5px.

Example: Grayscale Effect

img {

  filter: grayscale(100%);

}

Converts the image to black and white.

Example: Combined Effects

img {

  filter: blur(2px) grayscale(50%) brightness(120%);

}

Explanation:

Blur 2px → Slight blur.

Grayscale 50% → Partially black and white.

Brightness 120% → Slightly brighter.

Exercise: Apply Filter Effects to an Image

Try combining blur, grayscale, and brightness on an image to create a stylized effect.

Section 5: Lab Experiments

Lab 1: Creating a Soft Glow Button

Objective: Create a button with a glowing effect.

button {

  background-color: blue;

  color: white;

  font-size: 20px;

  padding: 10px 20px;

  border: none;

  border-radius: 5px;

  box-shadow: 0 0 15px rgba(0, 0, 255, 0.7);

}

button:hover {

  box-shadow: 0 0 25px rgba(0, 0, 255, 1);

}

Steps:

Apply a box-shadow for the glow.

Increase the shadow when hovered for an interactive effect.

Lab 2: Create a 3D Floating Card

Objective: Use multiple shadows for a 3D hover effect.

        

.card {

  width: 250px;

  padding: 20px;

  background-color: white;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  transition: box-shadow 0.3s ease-in-out;

}

.card:hover {

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}

Steps:

Apply a subtle shadow initially.

Increase the shadow size on hover to create depth.

Lab 3: Apply Filters to Images

Objective: Create an interactive image filter effect.

img {

  filter: grayscale(100%);

  transition: filter 0.3s ease-in-out;

}

img:hover {

  filter: grayscale(0%);

}

Steps:

Make an image black & white initially.

Remove grayscale on hover to reveal full color.

Final Challenge

               

      

                       

Create a Realistic Glassmorphism Card

Objective: Use box-shadow, blur, and transparency for a modern UI effect.

.glass-card {

  width: 300px;

  height: 200px;

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(10px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

}

Key Features:

Semi-transparent background

Blur effect for glass look

Soft shadow for floating effect

Conclusion

You have learned:

✔ Box shadows for depth and realism.

✔ Text shadows for stylish typography.

✔ CSS filter effects for image styling.

Next Steps:

Try combining effects for creative designs.

Experiment with different values and animations.

Let me know if you need additional custom examples!