Home arrow Style Sheets arrow Top CSS3 Tutorials for Shadows

Top CSS3 Tutorials for Shadows

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.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
May 25, 2011
  1. · Top CSS3 Tutorials for Shadows
  2. · Three More Great CSS3 Shadow Tutorials

print this article

Top CSS3 Tutorials for Shadows
(Page 1 of 2 )

Using CSS text-shadow to create cool text effects

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.

Link: http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

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.

Link: http://www.tutorialshock.com/tutorials/fancy-css3-boxes/

Box-shadow: shadow effect on elements in CSS3

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.

Link: http://css.flepstudio.org/en/css3/box-shadow.html

CSS3 text-shadow Can it be done in IE without JavaScript?

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.

Link: http://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials