How to Create Floating Box Effect using HTML and CSS ?
The floating box effect is a classical example of a custom box-shadow technique. In this technique, we create realistic-looking shadows without using the box-shadow property that is provided by the CSS.
Approach: The approach is to use after selector to use create shadow using the blur function.
HTML Code: In this section, we have created the basic structure of the body. Here, we have used a <div> tag containing class attribute to render the floating box on the screen.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >Floating Box</ title >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
< div class = "geeks" ></ div >
</ body >
</ html >
|
CSS Code: In this section, we have used some CSS property to design floating box and assign some styles on them. The following steps describe the CSS properties:
- Step 1: First we have done some basic styling like providing a background, creating a box, and aligning everything to the center of the page.
- Step 2: Now, use the after selector to create a thin line below the box that we have created and then use blur function to give it the shadow effect.
Tip: Try use a darker color and a low value for blur function for shadow. If not, you might end up making your shadow transparent.
CSS
<style>
body {
background : green ;
}
h 1 {
display : flex;
justify- content : center ;
color : white ;
font-size : 40px ;
}
.geeks {
width : 400px ;
height : 250px ;
background : white ;
position : absolute ;
top : 16% ;
left : 35% ;
border-radius: 20px ;
}
.geeks::after {
content : "" ;
position : absolute ;
bottom : -30px ;
background : rgb ( 43 , 42 , 42 );
width : 90% ;
height : 4px ;
left : 3% ;
border-radius: 50% ;
filter: blur( 3px );
}
</style>
|
Complete Code: It is the combination of the above two codes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width,initial-scale=1.0" >
< title >Floating Box</ title >
< style >
body {
background: green;
}
h1 {
display:flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width:400px;
height:250px;
background: white;
position: absolute;
top:16%;
left:35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height:4px;
left:3%;
border-radius:50%;
filter: blur(3px);
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
< div class = "geeks" ></ div >
</ body >
</ html >
|
Output:
Last Updated :
14 Sep, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...