Shadows are just one of many ways in which CSS3 can help you spruce up your projects. Shadows are a great way to transform simple and plain objects into something much more visually appealing. To help you get a better understanding of CSS3 shadows, here is a list of some of the best tutorials around on the subject. Most of the tutorials are text-based, but there are a couple of videos tossed in for good measure.
One rather obvious area where the text-shadow property can be applied is with text. For instance, if you want a page heading to really stand out, adding some text-shadow can turn dull, boring text into something that catches the eye. Without doing too much work, text-shadow will give your on-screen words some added depth and actually help lift them off the page, and here is one tutorial that will show you how to do just that.
Before you get into creating the effect, the tutorial gives a brief breakdown on text-shadow and how it works. You get to see the different parts that make up its syntax to get a better understanding of their functions. After the intro, its on to creating the different effects. Six effects are on exhibit here, and they all have their own unique characteristics that should appeal to users of different tastes: vintage retro, neon, inset, anaglyphic, board game, and fire. While the effects themselves are impressive, that fact that they require such little code is even more appealing.
Advanced (yet awesome) pure CSS3 boxes without using images
If you are looking for a good example of the power of CSS3 and how it can be used to replace certain graphic programs with its various functions, this tutorial is it. Using pure CSS3, the tutorial teaches you the necessary steps to make various frame boxes that look so good you would think they were made in Photoshop.
One of the best, if not the best, features of the tutorial is the fact that it offers so many examples. By doing this, you truly get to see just what can be accomplished via CSS3 when you use your imagination. Zero images are used whatsoever. There are over 15 different styles of boxes that are discussed in the tutorial. Creating them requires the use of some standard CSS3 properties. Each box differs in some way, be it the folds in the corners, shadows, textures, gradients, you name it. Not only will you get some practice with shadows, but you'll get to toy with other useful properties as well. The amount of knowledge presented and its form makes this tutorial one worth bookmarking when you want to delve into CSS3 shadows and more.
The box-shadow CSS3 property gives you the ability to add a cool shadow effect to specific elements. Popular and easy to use, box-shadow can be attained without the use of images. If box-shadow intrigues you and you are looking to learn more about the property, this is a good place to start. By visiting this tutorial, you will get an introduction into the property and see how it can be tweaked to get varying effects. Once you are finished, you will learn how to affect box-shadow in terms of its positioning on an element, its gradient, and even its color.
Four different box-shadow values are explained: horizontal length, vertical length, blur radius, and color. You are then shown five different examples of how box-shadow can be implemented. There's box-shadow with positive or negative value, with no blur, with border-radius, and applied to two neighboring elements. Aside from the code, you get to see the different shadow effects to get a better understanding of how the property works.
This tutorial centers on the text-shadow property and how it works across browsers. While most browsers handle text-shadow properly, the release of Internet Explorer 9 created some compatibility issues. If you intend on using text-shadow in one way or another on your site and want it to appear correctly for users of different browsers, this tutorial is well worth your time.
The tutorial begins by explaining the property's syntax. It then adjusts the syntax values and shows examples of how they offer different visual effects. The real highlight comes when Internet Explorer is discussed. While you may have had problems with text-shadow and Internet Explorer in the past, you will see a nifty workaround solution here that eliminates the compatibility issues as much as possible.