Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a ‘Shadow To Clipped Elements’. To build this project we would need HTML and CSS. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Shadow To Clipped Elements’. Inside this folder, we have two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file. We start by creating the container div. The container div has one ‘div’ element with the class name ‘clipped-item’. This child div is used for building the clipped shape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shadow To Clipped Elements</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="clipped-item"></div>
</div>
</body>
</html>
Â
CSS:
Next, we provide styling using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
Our CSS starts with providing the required styling related to padding and margin to the body tag. The container div contains a position set to absolute for flexible movement of the element. Then we use transform, top, and left to correctly align it to the center of the screen.
Finally filter property is used for adding visual effect of shadow to our element, then we style our child div ‘clipped-item’ using height, width, background-color and we create a clip-path which is used for clipping out element to a basic shape, we create a polygon using the same.
body {
padding: 0;
margin: 0;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
filter: drop-shadow(-50px 30px 10px rgba(0, 0, 0, 0.6));
}
.clipped-item {
height: 250px;
width: 250px;
background-color: orange;
clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
}
That’s it for this tutorial. If you like this tutorial, do check out my youtube channel. I would love to hear your comments, suggestions, and feedback. Do drop them below. We will meet shortly for yet another amazing tutorial
Â
