Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an accordion hover effect with box-shadows in CSS
Hyper Text Markup Language is what HTML is. It serves as both an example of how a Web page is put together and a tool for creating Web pages. It is made up of several components.
Its elements provide instructions to the browser on how to render the content. CSS, or cascading style sheets, define how HTML elements appear in various print and digital media, such as displays and other print and digital forms. The use of CSS considerably reduces time. It allows for the simultaneous management of many webs page designs. This article, we will learn how to create an accordion hover effect with box-shadows in CSS.
Basic HTML Document
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Approach
To create shadows around an element, use the CSS box-shadow property.
An element's frame can have shadow effects added with the box-shadow CSS attribute. Multiple effects can be selected and separated by commas. The X and Y offset in relation to the element, the blur and spread radii, as well as the color, all characterize a box shadow.
You can cast a drop shadow from the frame of practically any element with the box-shadow attribute. The box shadow adopts the same rounded edges if a border radius is supplied on the element that has one. Multiple text shadows and multiple box shadows each have the same z-ordering.
The syntax for the CSS box-shadow property is as follows.
box-shadow: x-offset y-offset blur-radius spread-radius color;
CSS box-shadow property
If we take more deeply into what box-shadow is, we know that the box-shadow CSS attribute is used to give the frames of an element the appearance of a shadow. The element's frame, which is separated from it by a comma, can be subject to a variety of impacts. The X and Y offset in relation to the element, the blur and spread radii, the color, and the box shadow may all be used to characterize it.
Default value − None is its default value.
Property value − With the sample below, all the features are presented in detail.
x-offset − Setting the shadow's horizontal position is necessary. The shadow is set on the right side of the box using a positive value, and on the left side of the box using a negative value.
y-offset − The location of the shadow value must be specified vertically. The shadow below the box is set using a positive value, while the shadow above the box is set using a negative value.
Blur − The purpose of this optional attribute is to obfuscate the box's shadow.
Spread − It is employed to control the shadow's size. The value of the spread determines the spread's size.
Color − It is a choice property that controls the shadow's color.
Inset − The shadow generates outside the box by default. However, we can make the shadow inside the box using the inset.
Initial − The box-shadow attribute is used to set it to its default setting.
Inherit − This characteristic comes from its parent.
None − It has no shadow properties and is the default setting.
Example
Following is an example to create 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 about what HTML and CSS are and later saw what boxshadow and its various properties are and how can we use it to create an accordion hover effect with box-shadow as an example.
514 Views
