Messing Around with CSS3 Shadows
How do I make an messing around with css3 shadows?
I recently messed around with filter: drop-shadow instead of box-shadow on a personal project. Here's a little demonstration of the differences I discovered. PROTIP - use method 2 until method 4 is better supported.. What is a messing around with css3 shadows? How do you make a messing around with css3 shadows? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.
Messing Around with CSS3 Shadows - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Messing Around with CSS3 Shadows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Messing Around with CSS3 Shadows</h1>
<div class="tooltip box-shadow"> <strong>Method 1 - </strong>This tooltip uses box-shadow. Notice that everything is nice and crisp, but the ::after pseudo-element doesn't inherit the shadow.
</div>
<div class="tooltip box-shadow text-shadow"> <strong>Method 2 - </strong>This tooltip uses box-shadow along with a text-shadow on the ::after pseudo-element. This method has the best browser compatibility.
</div>
<div class="tooltip drop-shadow"> <strong>Method 3 - </strong>This tooltip uses filter: drop-shadow. The ::after pseudo-element inherits the shadow, but now everything is a blurry mess.
</div>
<div class="tooltip drop-shadow fixed"> <strong>Method 4 - </strong>This tooltip uses filter: drop-shadow with backface-visibility set to hidden. And voilà, no more blurry mess. Only caveat? It doesn't work in Firefox.
</div>
</body>
</html>
Messing Around with CSS3 Shadows - Script Codes CSS Codes
html { font-size: 62.5%; }
body { font-size: 1.4rem; background: #BADA55; font-family: 'Avenir Next', sans-serif;
}
h1 { text-align: center; color: #C00C00;
}
.tooltip { position: relative; float: left; width: 24rem; padding: 2rem; margin: 0 1.6em 1.6rem 0; background: white; border-radius: 0.5rem;
}
.tooltip:after, .text-shadow:before { content: '\25b6'; color: white; font-size: 2rem; position: absolute; right: -1.5rem; top: 50%; margin: -1rem 0 0 0;
}
.box-shadow { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -o-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.text-shadow:after { text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: -1;
}
.drop-shadow { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.fixed { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;
}
Developer | Kyle Foster |
Username | hkfoster |
Uploaded | September 04, 2022 |
Rating | 4 |
Size | 2,202 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 |
Super Simple Fader | 2,014 Kb |
Vanilla Flavored Unorphanize | 5,098 Kb |
Askew - A Subtle Parallax Banner Plugin | 5,081 Kb |
Ken Burns Banner | 3,817 Kb |
SVG Circular Scroll Progress Bar | 7,656 Kb |
Rift.js | 3,311 Kb |
Messing Around with CSS3 Shadows | 2,202 Kb |
Cattywompus - A Subtle Parallax Banner Plugin | 4,486 Kb |
Smart Fixed Header | 4,519 Kb |
A Pen by Kyle Foster | 2,404 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 |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Blog | Rottingroom | 1,430 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Shopping List | Markmurray | 6,015 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Isometric css island | Xaddict | 2,950 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!