Stacking Shadows
How do I make an stacking shadows?
Box & text shadows are a few of those properties that never seem to be used to their full potential. . What is a stacking shadows? How do you make a stacking shadows? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.
Stacking Shadows - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stacking Shadows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="first">Example of Stacking multiple box-shadows</div>
<div class="second">STACKED TEXT SHADOWS</div>
</body>
</html>
Stacking Shadows - Script Codes CSS Codes
div { margin: 30px; text-align: center; padding: 20px; font-family: 'Oswald', sans-serif; -webkit-transition: .3s ease; transition: .3s ease;
}
.first { background: #ddd; -webkit-box-shadow: 0 0 0 3px #fff, -26px 26px 0 -20px #999, 26px -26px 0 -20px #999, 0 0 0 9px #ddd; box-shadow: 0 0 0 3px #fff, -26px 26px 0 -20px #999, 26px -26px 0 -20px #999, 0 0 0 9px #ddd;
}
.first:hover {
/* radius only applied at smaller points the shadow would be at if it were centered */ border-radius: 150px;
/* note that webkit sometimes has trouble with moving shadows & leaves artifacts */ -webkit-box-shadow: 0 0 0 3px #fff, -36px 36px 0 -20px #999, 36px -36px 0 -20px #999, 0 0 0 9px #ddd; box-shadow: 0 0 0 3px #fff, -36px 36px 0 -20px #999, 36px -36px 0 -20px #999, 0 0 0 9px #ddd;
}
.second { background: #4d6d70; color: #fff; color: transparent; font-size: 60px; font-weight: bold; letter-spacing: 7px;
/* can stack as many text-shadows as desired */ text-shadow: 0 0 0 #fff, .05em .05em 0 #4d6d70, -.05em -.05em 0 #4d6d70, .05em -.05em 0 #4d6d70, -.05em .05em 0 #4d6d70, .05em 0 0 #4d6d70, -.05em 0 0 #4d6d70, 0 -.05em 0 #4d6d70, 0 .05em 0 #4d6d70, -.06em .07em 0 #ccc;
}
.second:hover {
/* shadows have better coverage on blocky text, can add more for additional coverage, but may have performance issues (untested, just speculating on diminishing returns) */ text-shadow: 0 0 0 #fff, .05em .05em 0 #ed3434, -.05em -.05em 0 #3f86f2, .05em -.05em 0 #999, -.05em .05em 0 #333, .05em 0 0 yellow, -.05em 0 0 yellow, 0 -.05em 0 yellow, 0 .05em 0 yellow, -.06em .07em 0 #ccc;
}
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 2,146 Kb |
Views | 42,504 |
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 |
Working on a Volusion version of a Drupal Theme | 6,095 Kb |
Circle Hovers | 1,586 Kb |
CSS-Only Fly Menu | 3,744 Kb |
Masonry-Style Layout in CSS | 2,116 Kb |
Playing with transition timing | 1,993 Kb |
Basic Fullscreen Video Background | 2,208 Kb |
JS Input Selector | 2,182 Kb |
Basic Flexbox Reference | 1,662 Kb |
A Better underline | 2,120 Kb |
Footnote concept | 3,056 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 |
Loading animation | Codeams | 2,408 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
SVG Animation | Pollardld | 3,133 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 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!