Messing Around with CSS3 Shadows

Developer
Kyle Foster
Size
2,202 Kb
Views
24,288
  1. Messing Around with CSS3 Shadows Previews
  2. Messing Around with CSS3 Shadows HTML Codes
  3. Messing Around with CSS3 Shadows CSS Codes

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 Previews
IQ Test

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;
}
Messing Around with CSS3 Shadows - Script Codes
Messing Around with CSS3 Shadows - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4
Size 2,202 Kb
Views 24,288
Do you need developer help for Messing Around with CSS3 Shadows?

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!

Kyle Foster (hkfoster) Script Codes
Name
Slimslider.js
Cattywompus - A Subtle Parallax Banner Plugin
Vanilla Flavored Hypher
Super Simple Fader
A Pen by Kyle Foster
Ken Burns Banner
Rift.js
Rumble on Hover
Vanilla FlowType.js
SVG Circular Scroll Progress Bar
Create amazing web content with AI!

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!