Home arrow Style Sheets arrow More of the Top CSS3 Tutorials for Shadows

More of the Top CSS3 Tutorials for Shadows

Weíve shown you various tutorials in the past that put CSS3ís power on display. One area where this was noted was with shadows. Since there are so many CSS3 shadow tutorials making the rounds on the web, here are some more for you to ponder as you develop your skills.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
September 06, 2011

print this article

Weíve shown you various tutorials in the past that put CSS3ís power on display. One area where this was noted was with shadows. Since there are so many CSS3 shadow tutorials making the rounds on the web, here are some more for you to ponder as you develop your skills.

3D CSS Text with Zoom

Incorporating 3D text into your site is a great way to spruce up its design.  This tutorial will show you the steps necessary to creating the 3D effect by stacking various CSS3 text-shadow properties.  You will then learn how to make the effect pop out when the cursor is hovered above it by using CSS text transform and transition properties.  No JavaScript is used whatsoever.  Itís all CSS.  As an added bonus, the effect degrades gracefully in browsers that are not compatible, such as Internet Explorer. 

The tutorialís format is ideal because it begins with the simple steps for creating the text-shadow and letís you stop there.  You can keep going if you want to implement the cool hover effect.  If you are looking for an interesting CSS3 trick thatís easy to learn, you will find it here.

Link: http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial

CSS3 vs. Photoshop: Rounded Corners and Box Shadows

The main aim of this tutorial is to use some CSS3 styling to create a websiteís navigation bar.  Every website needs one, so learning to create such a bar is something worthwhile.  Youíll learn how to implement box shadows, as well as other CSS3 effects in the form of rounded corners and gradients.  So, not only will your shadow skills be improved, but youíll also get to practice with other highly useful CSS3 effects.  The tutorial is a great example of the power of CSS3, as it allows you to create effects quickly and with little code.  It also helps to reduced HTTP requests, which will speed up your site, giving you a product that looks good and performs better.

The tutorial is written for a basic level, so you wonít have to be a pro to complete it.  Make sure you have about an hour of time handy to go through all the steps.

Link: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-vs-photoshop-rounded-corners-and-box-shadows/

CSS3 Text-shadow Tutorial

If you are looking for a lot of bang for your buck when it comes to CSS3 tutorials, this is one you will want to visit.  It deals with text shadows and gives you multiple examples of variations the property that you can use.  Youíll see examples of the basic shadow, hard shadow, double shadow, and more.  Each example is listed with its concise code and a visual representation so you can see the final result.  The syntax is defined at the beginning of the tutorial.  Overall, this is a nice one-stop-shop to learn about text shadows and the ways they can be tweaked to fit your needs.

Link: http://www.amazingthings.in/2011/07/css3-text-shadow-tutorial-simple_03.html

10 CSS3 Box-Shadow Experiments

This tutorial is impressive because it truly shows the power and flexibility of CSS3 and how it can be gradually tweaked to produce a multitude of effects.  The entire tutorial centers on boxes and the box-shadow property.  There are 15 boxes in all with unique styles of their own, so you will get plenty of practice.  You can create a pop-up effect for a box that looks like a Post-it note, create illusions of wrinkles, a Polaroid style, and even add some tape into the mix.  In the end, youíll see how you can create all of these effects with pure code and eliminated the need for JPEGs and other clunky methods.

Link: http://www.webdesignshock.com/css3-box-shadow/

Beautiful CSS Box Shadows

Hereís another tutorial that deals with the CSS3 box-shadow property.  Box-shadow is useful because it lets you insert a shadow around a specified HTML element.  The shadow can be controlled with relative ease by simple changing its different properties and values.  This tutorial is more of an explanation of box-shadow rather than a complete tutorial on the subject.  Itís worth visiting because it breaks the property down into simple terms to give you a foundation to build on with more advanced tutorials.  Keep this tutorial handle as a reference tool.

Link: http://www.designcourse.com/articles/1/CSS/90-The-CSS-Box-Shadow-Property

CSS Drop Shadows without Images

This tutorial focuses on drop shadows.  It first explains the basics of drop shadows, which is helpful if you are entirely new to the technique.  Once thatís out of the way, the author moves into ways in which you can tweak drop shadows for varied effects.  The tutorial is concise, yet detailed, and it gives you a quick overall look at how to take your drop shadows to another level.

Link: http://nicolasgallagher.com/css-drop-shadows-without-images/

How to Create Text Shadows in CSS3

Beginners should like this tutorial for its simplicity and short time to complete.  It only takes about five minutes, and will give you a well-rounded look at the CSS3 text-shadow property. 

The tutorial begins by adding the text-shadow property to your rule of choice.  It then discusses each of the four values applied to text-shadow, such as color, horizontal position, vertical position, and blur.  The author tells you the corresponding effects that will appear from adjusting each value to give you insight on the entire property tweaking process.  Be sure to visit this tutorial if you are interested in learning more about text-shadow and want the property broken down into a manner thatís easy to understand and follow.

Link: http://www.macprovideo.com/hub/web/how-to-create-text-shadows-css3

Creating Ribbons in CSS3

Ribbons are commonly used to give websites a more festive and colorful appearance.  Thanks to CSS3, you can now create ribbons without having to use images.  This tutorial will show you how the box-shadow and text-shadow CSS3 properties can be instrumental in the creation of ribbons.  Best of all, itís easy to do.

Link: http://css3-tutorial.com/creating-ribbons-in-css3

CSS3 Text-Shadow

You wonít find any amazing tricks or tips in this tutorial, but it is worth keeping bookmarked as a refresher or a quick reference on the CSS3 text-shadow property.  It offers a quick explanation of the property and follows it up with some text-shadow examples.  Youíll see how adjusting the offset, blur distance, and color of the shadow will be reflected in the design to add depth, extra fuzziness, or even some glow.  Perhaps the basic nature of the tutorial will make it easier to understand the concept, after which you can move on to more complex and advanced tutorials.

Link: http://css3-tutorial.com/css3-text-shadow


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By wubayou

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