Z-level shadows
How do I make an z-level shadows?
Indicate position on Z-axis by amount of shadow. What is a z-level shadows? How do you make a z-level shadows? This script and codes were developed by Hampus Persson on 13 September 2022, Tuesday.
Z-level shadows - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Z-level shadows</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="shadow1"> 1
</div>
<div class="shadow2"> 2
</div>
<div class="shadow3"> 3
</div>
<div class="shadow4"> 4
</div>
<div class="shadow5"> 5
</div>
</body>
</html>
Z-level shadows - Script Codes CSS Codes
.shadow1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 200px; height: 160px; margin: 30px; padding: 10px; font-family: Verdana; font-size: 5rem; color: #009688; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24);
}
.shadow2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 200px; height: 160px; margin: 30px; padding: 10px; font-family: Verdana; font-size: 5rem; color: #009688; background-color: #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16), 0 5px 7px rgba(0, 0, 0, 0.24);
}
.shadow3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 200px; height: 160px; margin: 30px; padding: 10px; font-family: Verdana; font-size: 5rem; color: #009688; background-color: #fff; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.19), 0 8px 10px rgba(0, 0, 0, 0.24);
}
.shadow4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 200px; height: 160px; margin: 30px; padding: 10px; font-family: Verdana; font-size: 5rem; color: #009688; background-color: #fff; box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 15px rgba(0, 0, 0, 0.24);
}
.shadow5 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 200px; height: 160px; margin: 30px; padding: 10px; font-family: Verdana; font-size: 5rem; color: #009688; background-color: #fff; box-shadow: 0 10px 16px rgba(0, 0, 0, 0.3), 0 15px 20px rgba(0, 0, 0, 0.34);
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #eceff1;
}
![Z-level shadows - Script Codes](http://shots.codepen.io/hmps/pen/qnseb-512.jpg)
Developer | Hampus Persson |
Username | hmps |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 2,311 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Dropdown | 4,452 Kb |
Inputs with floating labels | 3,078 Kb |
Rotating cube | 2,161 Kb |
The media object | 2,731 Kb |
Filter list | 3,517 Kb |
Slider | 4,088 Kb |
FlowText.js | 3,728 Kb |
Badge animation | 2,732 Kb |
Slide like Mailbox | 3,758 Kb |
Typeahead Dropdown | 5,417 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Wikipedia Viewer | Codinger | 4,681 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Tab panels | Accessibility | 0 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!