|
HTML5 Solutions: Essential Techniques for HTML5 Developers
HTML5 brings the biggest changes to HTML in years. Web designers
now have new techniques, from displaying video and audio natively in HTML,
to creating realtime graphics on a web page without a plugin.
This book provides a collection of solutions to all of the most common HTML5 problems.
Every solution contains sample code that is production-ready and can be applied to any project.
Click Here
|
|
|
Add Drop Shadows to Your Pictures
By Stephen Bucaro
Adding a nice background shadow to your pictures gives them a nice realistic effect. And,
it's very easy to do with the CSS3 box-shadow property.
The box-shadow property is supported in Internet Explorer 9 and higher, Firefox 4 and
higher, and Chrome. The code for the image with drop shadow above is shown below.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:10px 10px silver;" / >
box-shadow Syntax
box-shadow: horizontal-offset vertical-offset blur-size shadow-size shadow-color inset;
| Value | Description |
| horizontal offset | Horizontal offset of the shadow. Negative values are allowed |
| vertical-offset | Vertical offset of the shadow. Negative values are allowed |
| blur-size | Size of the blur - optional |
| shadow-size | Size of the shadow - optional |
| shadow-color | Color of the shadow - optional |
| inset | Make it an inner shadow - optional |
Shown below, I have added a blur-size value of 5 pixels. This makes the shadow effect
even more realistic.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:10px 10px 5px silver;" / >
Shown below, I have added a shadow-size value of 10 pixels.
<img border="0" width="230" height="230" src="mcdivitt.jpg" style="box-shadow:0px 20px 5px 10px #e0e0e0;" / >
The horizontal-offset and vertical-offset properties are applied to a colored box
that is behind and the same size as the picture. The shadow-size property is an increase in
that box size, similar to the border-size property. Note, in the code above that I specified the
shadow-color in hexadecimal format.
|
|
 RSS Feed
Web Design Sections
With this book, readers can start with a tour of the stylesheet language, or skip ahead to any
chapter of the book to look up specific tasks covering just what they need to know. This task-based,
visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning
and intermediate users CSS.
Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give
a general explanation, provide a few key but brief tips, move on. The writing is clear and concise.
... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference
and everything in it is highly accessible.
Click here for more information.
|
|
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads