If you’re looking to add a 3D effect to an element’s frame without the use of an image, it can be done with pure CSS. Using a combination of CSS properties and pseudo-elements can create the illusion of a box with curled corners or lifted edges.
The edges or corners of a box element can be raised with the transform and box-shadow CSS properties used with the ::before and ::after pseudo-elements.
- • transform – used with skew value to rotate and create angles.
- • box-shadow – used to create shadow effect.
- • ::before – used for placement of the shadow effect located on left.
- • ::after – used for placement of the shadow effect located on right.
This tutorial will cover both raising the edges and corners of a box element for that lifting and curling effect. Before getting started, the HTML needs to be setup first.
SET UP THE HTML
- 1. The standard boilerplate template was used for the HTML. If you’re using Visual Studio Code, the shortcut is Shift + 1 from the index.html page.
- 2. Sections were then created to separate the two different shadow effects. Div tags with a class of container were used within each section.
- 3. The box element divs with class names were then placed within the containers. These divs can be personalized with some additional CSS and will also display your text content.
- 4. Nested within the box element divs, empty div tag with class names were added to use with the pseudo elements.
ADDITIONAL CSS USED
CSS positioning is required to create the raised edge and lifted corner shadow effect. The box elements has to be set with a position: relative while the nested empty divs needs a position: absolute value.
The z-index property with a value of -1 was also used to hide the empty nested divs behind the box elements. Doing this will only show the shadows from the empty divs to create the illusion of depth.
CSS RAISED EDGES USING SHADOW EFFECTS
Two separate files need to be created. Copy the HTML code below and paste it into an index.html file and copy and paste the CSS code below into a style.css file. Here is what the code should output.
HTML CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <!-- Source code: WebsiteEdu (https://websiteedu.com) --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="assets/css/style.css"> <title>CSS Raised Edges | Websiteedu.com</title> </head> <body> <section> <div class="container"> <div class="raised-edge">Content for Raised Edges Box Element <div class="edge-shadow"></div> </div> </div> </section> </body> </html> |
CSS CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* Source code: WebsiteEdu (https://websiteedu.com) */ .raised-edge { background-color: #ccc; position: relative; width: 50%; height: 150px; padding: 25px; margin: auto; text-align: center; font-size: 30px; border: 5px solid white; box-shadow: black 0px 0px 1px; } .edge-shadow:before { content: ""; position: absolute; left: 30px; bottom: 20px; width: 250px; height: 50px; background: black; box-shadow: -15px 30px 15px rgb(141, 141, 141); transform: skew(-7deg,-7deg); z-index: -1; } .edge-shadow:after { content: ""; position: absolute; right: 30px; bottom: 20px; width: 250px; height: 50px; background: black; box-shadow: 15px 30px 15px rgb(141, 141, 141); transform: skew(7deg,7deg); z-index: -1; } |
CSS RAISED CORNERS USING SHADOW EFFECT
Copy the HTML code below and paste it into an index.html file and copy and paste the CSS code below into a style.css file. Here is what the code should output.
HTML CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <!-- Source code: WebsiteEdu (https://websiteedu.com) --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="assets/css/style.css"> <title>CSS Raised Edges | Websiteedu.com</title> </head> <body> <section> <div class="container"> <div class="raised-corner">Content for Lifted Corner Box Element <div class="corner-shadow"></div> <!-- <div class="corner-shadow-left"></div> --> </div> </div> </section> </body> </html> |
CSS CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* Source code: WebsiteEdu (https://websiteedu.com) */ .raised-corner { background-color: #ccc; position: relative; width: 50%; height: 150px; padding: 25px; margin: auto; text-align: center; font-size: 30px; border: 5px solid white; box-shadow: black 0px 0px 1px; } .corner-shadow:before { content: ""; position: absolute; left: 10px; bottom: 115px; width: 100px; height: 75px; background: white; box-shadow: -20px 10px 10px rgb(141, 141, 141); transform: skew(12deg,12deg); z-index: -1; } .corner-shadow:after { content: ""; position: absolute; right: 10px; bottom: 115px; width: 100px; height: 75px; background: white; box-shadow: 20px 10px 10px rgb(141, 141, 141); transform: skew(-12deg,-12deg); z-index: -1; } |
SUMMARY
It’s easy to see how everything works simply by removing the z-index from the CSS. The position of the shadows can also be moved around by changing the values of the left right bottom values so feel free to play around with the code.
