CSS Box-shadow
CSS is all about presentation. Discover how CSS Box-shadow works to transform plain HTML into a premium user experience in the guide below.
The "box-shadow" property in CSS enables developers to apply a shadow effect to an element, giving the appearance of depth and separation from the backdrop. The box shadow may produce various effects, such as border shadows, commonly referred to as "border shadows". we will start with the fundamentals in this article before moving on to more complex usage.
Basics of Box Shadow in CSS
The basic format of the box-shadow attribute is outlined as follows:
Box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
- Horizontal Offset (required): This specifies how far away from the element the shadow is supposed to offset horizontally. The shadow is moved to the right by a positive value and to the left by a negative number.
- Vertical Offset (required): The height at which the shadow should be displaced from the element. The shadow is moved up or down by a positive or negative number.
- Blur Radius (optional): This parameter controls how blurry the shadow will be. The shadow will be more hazy the higher the value. The shadow will display a sharp edge if the value is zero.
- Spread Radius (optional): The spread radius modifies the shadow's size. A positive value makes the size larger, while a negative value makes it smaller. If left out, the blur radius automatically calculates the shadow size.
- Color (optional): The shadow's color, if applicable. You may represent colors using various methods, including named colors, RGB, HEX, or HSL values.
Border Around Text
Imagine you're sketching an illustration and decide to outline a particular area to enhance its visibility. This is essentially what a border around text accomplishes. It serves as an elegant perimeter around words, elevating their appearance and ensuring they are easily discernible. Conceptually, a text border acts as a frame encircling the outer edges of the text, akin to outlining words to emphasize them or set them apart from surrounding content. Employing a border can effectively draw attention to the text, making it more prominent in a web page, document, or design. Furthermore, borders can be customized with varying colors, widths, and styles like solid or dashed lines, enabling the text to achieve a distinct aesthetic or underscore its significance.
Example
.element {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Output
Adding Border Shadow
Utilizing the box-shadow property on an element with a solid background color can achieve a border shadow effect. This shadow will surround the edges of the element, giving the illusion of a border. Below is a visual representation:
/* Basic border shadow */
box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
Output
Advanced Border Shadow Techniques
1. Multiple Shadows:
A lone element has the capability to possess numerous shadows that are set apart by commas. This functionality allows for the creation of intricate shadow effects, similar to the demonstration provided previously.
2. Inset Shadows:
The element will seem to be pushed into the background when the "inset" keyword is employed to generate an inner shadow effect.
/* Inset shadow */
.element {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}
3. Spread Radius for Border-Like Shadows:
A more unique border-style shadow effect can be achieved by using a non-zero spread radius.
/* Border-like shadow with spread radius */
.element {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}
In this scenario, the spread radius is adjusted to 3 pixels, producing a shadow that mimics a border encircling the element.
4. Transition and Animation:
Moreover, you can generate shadow effects by incorporating transitions or animations to the box-shadow property.
.element{
width: 100px;
height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;}
}
Output
Before effect After effect
Conclusion
Box shadows can be generated with CSS's "box-shadow" attribute, a powerful feature for achieving this effect. By adjusting parameters such as the horizontal and vertical position, blur radius, spread radius, and color, you can create a wide range of shadow effects. Utilizing CSS box shadows can enhance the visual appeal of elements on your webpage, whether you desire a simple border shadow or a more intricate design.
