Lecture Notes Of Class 25: CSS Shadows
Objective:
By the end of this
lesson, students will be able to apply box-shadow and text-shadow
properties in CSS to enhance the visual appearance of elements on a webpage.
Introduction to CSS
Shadows
Shadows in CSS are used
to create depth and make elements stand out. There are two main types of
shadows in CSS:
1.
Box Shadow
– Adds a shadow effect around an element (like a box).
2.
Text Shadow
– Adds a shadow effect to text.
1. Box Shadow (box-shadow)
The box-shadow property
is used to apply shadows around an element, such as a div, button, or image.
Syntax:
css
CopyEdit
box-shadow: offsetX
offsetY blurRadius spreadRadius color;
- offsetX
– Defines the horizontal shadow position. Positive values shift the shadow
to the right, and negative values shift it to the left.
- offsetY
– Defines the vertical shadow position. Positive values move the shadow
down, and negative values move it up.
- blurRadius
(optional) – Defines how much the shadow should blur. Higher values create
a more diffused shadow.
- spreadRadius
(optional) – Controls the size of the shadow. Positive values expand the
shadow, while negative values shrink it.
- color
– Defines the shadow color.
Example:
css
CopyEdit
.box {
width: 200px;
height: 150px;
background-color: lightblue;
box-shadow: 10px 10px 15px gray;
}
Output:
- The
element gets a gray shadow, 10px to the right and 10px downward, with a
blur effect of 15px.
Adding Multiple Shadows
You can add multiple
shadows by separating them with a comma.
css
CopyEdit
box-shadow: 5px 5px 10px
black, -5px -5px 10px gray;
This creates multiple
shadows, giving a 3D effect.
2. Text Shadow (text-shadow)
The text-shadow property
is used to apply shadow effects to text.
Syntax:
css
CopyEdit
text-shadow: offsetX
offsetY blurRadius color;
- offsetX
– Horizontal shadow position.
- offsetY
– Vertical shadow position.
- blurRadius
(optional) – The blur effect of the shadow.
- color
– The shadow color.
Example:
css
CopyEdit
h1 {
color: blue;
text-shadow: 3px 3px 5px gray;
}
Output:
- The
text appears blue with a gray shadow shifted 3px to the right and 3px
downward, with a blur effect of 5px.
Adding Multiple Text
Shadows
You can create glowing
text effects or layered shadows by adding multiple shadows.
css
CopyEdit
text-shadow: 2px 2px 4px
red, -2px -2px 4px blue;
Lab Exercise: Design a
Card with Shadow Effects
Task:
Create a stylish card
using CSS shadows.
HTML Code:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Shadow Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h2>CSS Shadows</h2>
<p>Enhance elements with shadow
effects.</p>
</div>
</body>
</html>
CSS Code (styles.css):
css
CopyEdit
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
text-align: center;
}
.card h2 {
color: #333;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.card p {
color: #666;
}
Explanation:
- The
box-shadow property gives the card a soft shadow.
- The
text-shadow property gives the heading a subtle shadow effect.
- The
border-radius: 10px; makes the card’s corners rounded.
- The
card is centered using flexbox.
Conclusion
- box-shadow
is used to create depth and highlight elements.
- text-shadow
enhances text readability and aesthetics.
- Multiple
shadows can be applied to create advanced effects.
No comments:
Post a Comment