Shadows
We can use box shadows to create a visual effect where an element appears to float above the background. This effect can create depth, highlight specific elements, and add visual interest to a webpage. To achieve it we can apply the box-shadow property.
cssbox-shadow: offset-x | offset-y | blur-radius | spread-radius | color;
offset-xrefers to the horizontal positioning of the shadow, with a positive value shifting the shadow to the right of the element and a negative value shifting it to the left;offset-yrefers to the vertical positioning of the shadow, with a positive value shifting the shadow downwards and a negative value shifting it upwards;blur-radiussets the degree of blurring for the shadow and is an optional value, with a higher value producing a more blurred shadow;spread-radiusis also optional, increases or decreases the size of the shadow based on its positive or negative value;colorspecifies the color of the shadow using any valid color format, and is also an optional value.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div>
<p>without shadow</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
esse obcaecati eveniet quas debitis deleniti expedita odit odio iure,
natus ipsa quod exercitationem! Labore rem maiores ex rerum dolor iusto.
</p>
</div>
<div>
<p>with shadow</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis harum
excepturi sequi deserunt aspernatur culpa, praesentium est numquam iure
cupiditate voluptates ullam architecto! Obcaecati, cum facere enim
reprehenderit atque earum.
</p>
</div>
</body>
</html>
body {
display: flex;
justify-content: space-between;
}
div {
width: calc(100% / 2 - 20px);
padding: 10px;
border-radius: 4px;
}
div:first-child {
margin-right: 20px;
}
div:nth-child(2) {
box-shadow: 14px -8px 20px 1px rgba(0, 0, 0, 0.75);
}
p {
text-align: center;
}
Note
To find the best suited shadow visit the source shadow generator.
In addition to box-shadow, text-shadow and drop-shadow properties allow us to create shadows for text and other elements, respectively. They work the same way as the box-shadow property. However, these properties are used rarely in comparison with box-shadow.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 5. Kapitel 5
