It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
One box-shadow is cool and all, but check out Philipp Brumm’s tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.
This reminds me very much of the idea for easing linear-gradient. In a gradient, this smoothing effect is handled by multiple stops with the position and color eased (sloped) rather than linear (straight). The result is noticeably smoother and a more pleasing look. … Read article “Make a smooth shadow, friend.”
Greek mythology tells the story of Zeus creating the cloud nymph, Nephele. Like other Greek myths, this tale gets pretty bizarre and X-rated. Here’s a very abridged, polite version.
Nephele, we are told, was created by Zeus in the image of his own beautiful wife. A mortal meets Nephele, falls in love with her and, together, they take an adult nap™. Finally, in a strange twist, the cloud gives birth to half-human half-horse Centaur babies.
Weird, right? Personally, I … Read article “Drawing Realistic Clouds with SVG and CSS”
Let’s do a little step-by-step of a situation where you can’t quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it’ll be applying a shadow to a shape.… Read article “Using “box shadows” and clip-path together”
Used in casting shadows (often called “Drop Shadows”, like in Photoshop) from elements. Here is an example with the deepest possible browser support:
.shadow {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}Thats:
box-shadow: [horizontal offset] [vertical offset] [blur radius] Shadow along the top edge of the website, like this:
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}