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; } 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> |
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:
Please Login to comment...