Pattern by escannord
1.container { 2 width: 100%; 3 height: 100%; 4 --bg: linear-gradient( 5 45deg, 6 rgb(0, 0, 0) 25%, 7 transparent 25%, 8 transparent 75%, 9 rgb(0, 0, 0) 75%, 10 rgb(0, 0, 0) 11 ), 12 linear-gradient( 13 45deg, 14 rgb(0, 0, 0) 25%, 15 white 25%, 16 white 75%, 17 rgb(0, 0, 0) 75%, 18 rgb(0, 0, 0) 19 ); 20 --bgsize: 60px 60px; 21 --bgposition: 0 0, 30px 30px; 22 background-color: white; 23 background-image: var(--bg); 24 background-size: var(--bgsize); 25 background-position: var(--bgposition); 26 position: relative; 27 perspective: 1000px; 28 transform-style: preserve-3d; 29 overflow: hidden; 30 box-shadow: inset 0px 0px 500px rgb(15, 15, 15); 31} 32 33.container::before { 34 content: ""; 35 width: 100%; 36 height: 150%; 37 box-shadow: 0px -100px 500px black, inset 0px 100px 500px rgb(15, 15, 15); 38 position: absolute; 39 top: 55%; 40 background-image: var(--bg); 41 background-size: var(--bgsize); 42 background-position: var(--bgposition); 43 transform-origin: top; 44 transform: rotateX(80deg); 45} 46
2.3K views
2.3K views
Saad3092003 5. December 2023. at 17:22
5. December 2023. at 17:22
Nice optical illusion science applied
escannord 6. December 2023. at 5:35
6. December 2023. at 5:35
@Saad3092003 thank you
MIT License