Assignments Of Class 25: CSS Shadows
Assignment 1: Apply a Simple Box Shadow to a Div
Problem: Create a simple div with a box shadow effect.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation:
- The box-shadow property is used to create the shadow effect.
- 10px is the horizontal offset.
- 10px is the vertical offset.
- 15px is the blur radius.
- rgba(0, 0, 0, 0.3) defines the color of the shadow with some transparency.
Output: A square div with a light blue background and a soft shadow behind it.
Assignment 2: Add Multiple Shadows to a Box
Problem: Add multiple shadows to a div element.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Box Shadows</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightgreen;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation:
- Multiple box-shadow values are separated by commas.
- The first shadow is offset by 5px both horizontally and vertically, with a blur radius of 10px and a darker shadow color.
- The second shadow is offset negatively (-5px for both horizontal and vertical), with a lighter shadow color.
Output: A square div with a light green background and two shadows, one to the bottom-right and one to the top-left.
Assignment 3: Text Shadow on a Heading
Problem: Apply a text shadow effect to a heading.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow</title>
<style>
h1 {
font-size: 48px;
color: darkblue;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Shadow Effect</h1>
</body>
</html>
Explanation:
- The text-shadow property adds a shadow to the text.
- 3px 3px 5px represents the horizontal offset, vertical offset, and blur radius, respectively.
- rgba(0, 0, 0, 0.3) specifies a soft black shadow.
Output: A large heading with a dark blue color and a shadow that appears to the bottom-right of the text.
Assignment 4: Box Shadow with Inset Effect
Problem: Apply an inset shadow to a div.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Box Shadow</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightcoral;
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation:
- The inset keyword is used to create a shadow inside the element.
- The shadow is placed inside the div with a 5px horizontal and vertical offset and a 15px blur radius.
Output: A square div with a coral background and an inset shadow that creates a darkened effect inside the div.
Assignment 5: Shadow with Spread Radius
Problem: Apply a box shadow with a spread radius.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow with Spread</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellow;
box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explanation:
- The fourth value in the box-shadow (5px) represents the spread radius, which increases the size of the shadow.
- The shadow spreads out further from the box.
Output: A yellow square div with a large shadow spreading outward from the div.
Assignment 6: Text Shadow with Multiple Shadows
Problem: Apply multiple text shadows to a heading.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Text Shadows</title>
<style>
h1 {
font-size: 48px;
color: purple;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
</body>
</html>
Explanation:
- Multiple shadows are applied to the text, one with a black shadow and another with a red shadow.
- The shadows are offset and have different colors.
Output: A heading with multiple shadows in different directions and colors.
Assignment 7: Design a Card with Box Shadow
Problem: Create a card with a box shadow to give it a floating effect.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card with Shadow</title>
<style>
.card {
width: 300px;
height: 400px;
background-color: white;
margin: 20px;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card">
<h2>Card Title</h2>
<p>This is a card with a shadow effect applied.</p>
</div>
</body>
</html>
Explanation:
- The box-shadow property is used to give the card a subtle floating effect.
- The card has a white background and rounded corners (border-radius: 8px).
Output: A card with a subtle shadow effect, creating a floating appearance.
Assignment 8: Shadow with Hover Effect
Problem: Create a card that has a shadow effect that intensifies when hovered over.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Shadow</title>
<style>
.card {
width: 300px;
height: 400px;
background-color: lightgray;
margin: 20px;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="card">
<h2>Hover Me!</h2>
<p>The shadow effect will increase when hovered.</p>
</div>
</body>
</html>
Explanation:
- The card has a shadow by default.
- When hovered, the shadow increases in size and darkness using the hover selector.
Output: A card with a shadow that intensifies when the user hovers over it.
Assignment 9: Text Shadow on Button
Problem: Apply a text shadow effect to a button.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Text Shadow</title>
<style>
button {
font-size: 20px;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Explanation:
- The text-shadow is applied to the button text, giving it a slight 3D effect.
Output: A button with a subtle text shadow making the text appear slightly raised.
Assignment 10: Complex Box Shadow with Gradient Background
Problem: Create a card with a gradient background and a complex box shadow.
Solution:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card with Gradient and Complex Shadow</title>
<style>
.card {
width: 300px;
height: 400px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
margin: 20px;
padding: 20px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 30px rgba(0, 0, 0, 0.2);
border-radius: 12px;
}
</style>
</head>
<body>
<div class="card">
<h2>Gradient Card</h2>
<p>This card has a gradient background with multiple shadows.</p>
</div>
</body>
</html>
Explanation:
- The card has a gradient background (linear-gradient).
- Multiple shadows are applied to the card, creating a more complex shadow effect.
Output: A card with a gradient background and two shadows, one lighter and one darker.
No comments:
Post a Comment