Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

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

Easy Text Drop Shadows

By Stephen Bucaro

A text drop shadow is a nice effect, but it used to require you to use a graphics editor to create a image text. CSS3 introduces the text-shadow property which makes it easy to create text drop shadows without using graphics. The values required for the text-shadow property are shown below.

text-shadow: offset-x offset-y blur-radius color;

offset-x	Sets the horizontal offset in pixels, to the right being positive
offset-y	Sets the verticle offset in pixels, downward being positive
blur-radius	Sets the size of the shadow
color	Sets the color of the shadow

All modern browsers support CSS3 except (guess which one) Internet Explorer Version 8. However, Internet Explorer has its own proprietary shadow filter that does the same thing. The values required for the text-shadow property are shown below.

filter:progid:DXImageTransform.Microsoft.shadow(Color, direction, strength);

Color	Sets the color of the shadow
Direction	Sets the direction that the shadow is offset, in degrees
Strength	Sets size of the shadow (the extent) in pixels

The trick is to place both the CSS3 text-shadow property and the Microsoft shadow filter in your style specification. Each browser will ignore the property that it doesn't understand.

<p style="font-family:verdana; font-size:20px; color:0000ff; width:250;
text-shadow: 2px 2px 2px #000000;
filter:progid:DXImageTransform.Microsoft.shadow(color=#000000, direction=135, strength=4);">
Easy Text Drop Shadows</p>

Shown above is the code for the example text drop shadow. Note that besides the font and color properties, it specifies the width. The Microsoft shadow filter fails unless you include a width property.

Menu - More
Easy Cascading Style Sheets

Web Design Sections

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

FREE Graphics Warehouse

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.