All geek questions in one place

CSS glass slightly folded borders 3D effect

I am trying to get a similar look (see image below) using CSS. It has all the borders, slightly folded and have a light 3D look. I tried using box-shadow and pasted the code below. This gives me some, what a similar shape, but cannot get perfect, and also use two DIVs to get this effect. Can we use one div ..? Thank you.

enter image description here

.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>
+5
source share
2 answers

I think you can do 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>
+3
source 

 .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), 0 0 5px #aaa inset; border-radius: 10px; position:relative; display:block; } 
 <!DOCTYPE html> <html> <body> <div class="div-1"> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1276251/

More articles:


All Articles