How to Create an Accordion Hover Effect with Box Shadows in CSS
How to Create an Accordion Hover Effect with CSS Box Shadows
Hypertext Markup Language is HTML. It’s both an example of how to put together a web page and a tool for creating it. It’s made up of several components.
Its elements provide instructions to the browser on how to render the content. CSS, or Cascading Style Sheets, defines how HTML elements appear in various print and digital media, such as monitors and other printed and digital forms. Using CSS can significantly reduce design time. It allows you to manage many web page designs simultaneously. In this article, we’ll learn how to create an accordion hover effect using box shadows in CSS.
Basic HTML File
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Methodology
To create a shadow around an element, you can use the CSS box-shadow property.
An element’s frame can be shadowed using the box-shadow CSS property. Multiple effects can be selected, separated by commas. The box-shadow’s characteristics are the X and Y offsets relative to the element, the blur and spread radii, and the color.
You can use the box-shadow property to cast a shadow from the frame of almost any element. If a border-radius is provided on an element with one, the box-shadow will adopt the same rounded edges. Multiple text-shadows and multiple box-shadows have the same z-ordering.
CSS The syntax of the box-shadow property is as follows.
box-shadow: x-offset y-offset blur-radius spread-radius color;
CSS Box-Shadow Properties
If we take a deeper look at what box-shadow is, we’ll see that the box-shadow CSS property is used to give the appearance of a shadow to an element’s frame. The element’s frame, separated by commas, can be affected in various ways. The element’s x and y offsets, blur and spread radii, and color of the box shadow can all be used to describe it.
- Default Value – None is the default value.
-
Property Value – All of the features are demonstrated in detail in the sample below.
-
x-offset – This is necessary to set the horizontal position of the shadow. Use positive values for the shadow on the right side of the box and negative values for the shadow on the left side.
-
y-offset – The position of the shadow must be specified vertically. Use positive values for shadows below the box, and negative values for shadows above the box.
-
Blur – This optional property is used to blur the box shadow.
-
Spread – This controls the size of the shadow. The spread value determines the spread.
-
Color – This optional property controls the color of the shadow.
-
Inset – By default, the shadow is placed outside the box. However, we can use nesting to make the shadow appear inside the box.
-
Initial – The box-shadow property is used to set it to the default setting.
-
Inherit – This property is inherited from its parent.
-
None – This has no shadow property and is the default setting.
Example
Here’s an example of creating an accordion hover effect –
<!DOCTYPE html>
<html>
<body style="text-align: center">
<style>
.info {
position: relative;
max-width: 100%;
font-size: 60px;
}
.info label, .info-content {
padding: 15px;
display: block;
}
.info label {
background: #9c9c9c;
}
.info-content {
background: #fc838b;
display: none;
}
.info input {
display: none;
}
.info input:hover ~ .info-content {
display: block;
border:solid;
}
.info label:hover {
box-shadow: inset 0 0 15px red;
}
</style>
<div class="info">
Hover mouse over the div to see the effect of box-shadow. After clicking on the button you will see more content.
<input id="info1" type="checkbox" />
<label for="info1">Click Here</label>
<div class="info-content">
create an accordion hover effect with box-shadows in CSS.
</div> </div>
</body>
</html>
Conclusion
In this article, we first learned what HTML and CSS are, then saw what boxshadow is and its various properties, and how we can use it to create an accordion hover effect using boxshadow as an example.