How to Add Drop Shadows to Box Elements
In addition to text shadows, CSS 3 gives you the power to add shadows to box elements, such as <div> tags. In the figure you see how drop shadows were used to set off sections, such as the aside, in this example page of the Jelly Rancher website.
Much like the text shadow, the first value tells the Safari browser the horizontal offset, the second represents the vertical offset, and the third value describes how blurred the shadow should be. Again, the default is 0, and if you don’t specify the blur, the shadow’s color is completely solid.
Here's the syntax for box drop shadows for WebKit browsers:
-webkit-box-shadow: horizontal vertical blur color;
An RGBa color gives you greater control over the shadow’s appearance because you can add transparency. Similarly, using the em measurement creates a shadow that adjusts better if the size of the text changes.
The following style adds a drop shadow to all <div> box elements on a page:
You can add drop shadows to text, <div> tags, and other elements by using CSS 3.
div { -webkit-box-shadow: .15em .25em .5em rgba(27, 27, 27, .6);}
Web Design & Development Glossary
AJAX
asynchronous JavaScript and XML. A technique used in web page development.
Web Design & Development Glossary
API
application programming interface. A set of rules programs use to communicate with each other.
Web Design & Development Glossary
color stop
A special element that indicates a color to be added to a gradient.
Web Design & Development Glossary
FTP
File Transfer Protocol. A network protocol useful for transferring files in a client-server relationship.
Web Design & Development Glossary
HTML
HyperText Markup Language. The predominant language for building web pages.
Web Design & Development Glossary
HTTP
HyperText Transfer Protocol. The primary networking language for the Internet.
Web Design & Development Glossary
PHP
PHP Hypertext Processor. A scripting language that works well within HTML.
Web Design & Development Glossary
socket
A technology that allows remote computers to maintain a persistent connection in order to communicate with each other.
Web Design & Development Glossary
sprite
An graphic object on a web page that will be manipulated in real time.
Web Design & Development Glossary
SQL
Structured Query Language. A programming language useful in managing relational databases.
Web Design & Development Glossary
stateless protocol
An Internet procedure that completely breaks the connection between the client and the server after a transaction, meaning that the next transaction will require an entirely new connection.
Web Design & Development Glossary
Telnet
A network protocol useful in interactive, text-oriented communications.
Web Design & Development Glossary
W3C
World Wide Web Consortium. The organization that sets international standards for the World Wide Web.
