Hello! Today we want to talk about shadows in CSS. Shadows are one of the favorite methods used in web design to add depth and beautify the design. Shadows can be used for texts, boxes, and other elements and create special visual effects for the design.
Shadows in CSS are primarily categorized into two types: box-shadow for creating shadows around boxes and text-shadow for adding shadows to texts. Using shadows is very simple, and with a few lines of code, you can add beautiful effects to your pages.
Continuing with the method of using each one, the performance of them will vary based on how they are applied. Also, I will mention points that you should pay attention to when using shadows; including how to adjust size, distance, spread, and even the color of shadows that you can apply to create unique designs.
Using shadows can help improve user experience; especially when trying to draw the user's attention to a specific part of the page, shadows can be effective. In this case, you should be careful not to use too many shadows as they may ruin the user experience and cause clutter in the design.
Now let's go through some examples and see how shadows can be used in CSS:
<!-- HTML -->
<div class="box">This is a box with a shadow.</div>
<p class="text">This is a text with a shadow.</p>
<!-- CSS -->
<style>
.box {
width: 200px;
height: 100px;
background-color: lightgrey;
box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}
.text {
font-size: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
<div class="box">
This is a simple box with a class named box that has a shadow added to it.
.box { … }
Here, the CSS styles for the box are defined.
box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
This line of code applies a shadow with specific horizontal and vertical offsets, and a blur radius for the element.
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
In this line of code, it adds a shadow to a text which can also have values for horizontal and vertical offsets and blur radius.