Menu
I am trying to get the similar kind of look ( see the below image) using CSS . This has all the borders are slightly folded and has lite 3D look . I tried using box-shadow and pasted the code below . This gives me some what similar kind of shape but can not get fine one and also using two DIVs to get that effect . Can we get using a single DIV ..? Thank You
.div-1 {
width:150px;
height:300px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border-radius: 10px;
}
.div-2 {
width:100%;
height:100%;
box-shadow: width:100%;height:100%;box-shadow: 0 0 5px #aaa inset;
border-radius: 10px;
}<!DOCTYPE html>
<html>
<body>
<div class="div-1">
<div class="div-2"></div>
</div>
</body>
</html>
828
We can assign a 3D groove border to an element using the following syntax. Syntax: border-style: groove; Approach: In this example, we will give the grooved border to the heading h1.
ridge - Defines a 3D ridged border. The effect depends on the border-color value. inset - Defines a 3D inset border. The effect depends on the border-color value. outset - Defines a 3D outset border.
Introduction to CSS Border Padding. Padding is defined as space between the HTML contents and its borders. In general, padding will create some extra spaces within the HTML elements we can mention the padding in pixels, percentage format values in the document.
I think you can go like this :
.div-1 {
width:150px;
height:300px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
border-radius: 10px;
}<!DOCTYPE html>
<html>
<body>
<div class="div-1">
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
