demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

INCEPTION

CSS box shadow

css / shadows

Estimated reading time: 1 minute, 11 seconds

As text-shadow is to text, box-shadow is to most everything else. It even uses the same basic syntax, with five values:

box-shadow: horizontal offset vertical offset blur spread  color;

Scene from InceptionCombined with the various transforms and properties in CSS3, box-shadow means that image processing in PhotoShop can be kept to a minimum, and CSS – which is far more easily modified and maintained, as well as very low in file size – can be used for most visual effects on pages.

Remember that in HTML, everything is a box; even if you can’t see it, or if it is only implied. All images are boxes:

img#greek-temple { width: 400px; height: 259px; border: 15px solid #ffd; box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); }

Setting horizontal or vertical offset to 0 and adding relatively high amount of blur provides a “glow“ effect; you can also use this to simulate ambient lighting effects. The same process can be applied to text-shadow. Further, box-shadow has an inset option, which provides an embossed appearance:

h3#inception-logo {
font-family: "Arial Black", Arial, sans-serif; text-align: center;
letter-spacing: .3em; padding: 0 2em; font-weight: 900; font-size: 55px;
color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
}
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.