Drop Shadow on Text using CSS3

CSS3 brings us yet another great feature that we used to have to go into Photoshop or Illustrator to create.  CSS3 gives us the power to create drop shadows under our text!

Below you will find an explanation of the code and examples.  Copy and past the the code.  Experiment, Explore, come back and share what you find!

Here is the code and an example of a line of CSS3 that would create  effect:

textshadow {
    text-shadow: 1px 1px 1px #00C;
}

Shadows on Text

Deciphering the "Meat" of the Code for this Effect
The 1st number refers to the X Offset.  This shadow moves left to right along the Horizontal Axis.

The 2nd number refers to the Y Offset.  This shadow moves top to bottom along the Vertical Axis.

The 3rd number refers to the blur amount of the pixels.

The 4th number refers to the color of the shadow.   

So, now that we know what each number refers to in this line of CSS3 we can experiment and create different effects.  Here are some examples with the code below:

.one {
    text-shadow: 20px 20px 3px #666;
}

Example 1

.two {
text-shadow: 2px 2px 0px #FF6FCF;
 }

 Example 2

.three {
text-shadow: -4px -4px 1px #BAB9FA;
}

Example 3

.four {
text-shadow: -2px 1px 0px #6699CC;
}

Example 4

Drop Shadows in CSS3

CSS3 is here and has lots of awesome features!  Before CSS3 so many of us had to create these effects in Photoshop and then bring these effects into our websites as images.  We no longer have to do this!  This helps us use text directly in HTML in our sites.  Doing so helps Optimize how our site is found through Search Engines.  In the next series of posts I will give you some code and examples of this new feature.  From here you can experiment and explore.   

Let's start with Drop Shadows.

#dropshadows {
box-shadow: 10px 10px 5px #888;
}

Let's decipher the above line of CSS3.  Each CSS command begins with the #.  The name dropshadows can change.  This will be the name that you assign to the element on your page.  (The blue box above is a divtag.)

Now we move into the "meat" of the code.  The "meat" is always found between the { }.   The line of code for the dropshadow that we see around this blue div tag is as follows:
box-shadow: 10px 10px 5px #888.

What do these numbers mean?
10px (This first number refers to the amount of pixels that make the shadow on right hand, vertical side, also known as the X-Offset.)
10px (This second number refers to the amount of pixels that make the shadow on the bottom horizontal line, Also known as the Y-Offset.)
5px (This 3rd number refers to the amount of blur that these pixels have.  Therefore this line of code that we are looking at has the last 5 pixels blurred.)
#888 (This number refers to the color of the shadow.)

Now that we have deciphered this line of CSS3 let's experiment with some more options for creating Drop Shadows.   

Let's look at a few other ways that we can work with this line of code to create different effects.

Drop Shadow on the other two Sides
#threesidedshadow{
box-shadow: -5px -5px 2px #888;
}

 

Let's take a look at the "meat". Here it is:
box-shadow: -5px -5px 2px #888;

By using the following two numbers to begin: -5px -5px we place a drop shadow on the right vertical and top horizontal  sides.  By using a negative number the shadow moves to the corresponding X-Offset, Y-Offset.  

The first number, -5px refers to the left vertical line of the rectangle, X-Offset.

The second number, -5px refers to the top horizontal line of this rectangle, Y-Offset.

The third number, 2px refers to the amount of pixels that are blurred.

From here you can play around with different combinations of numbers and colors to create a variety of drop shadow effects.

Below are a few more examples with the lines of CSS above.

In Example 1 and Example 2 you will see that there is a shadow around all 4 sides.  This is done by using 3 numbers in the "meat" of the CSS. The 4th number in this code addresses the blur.  The third number applies a Spread Radius and creates a small shadow on the other two sides. 

#example1 {
box-shadow: -5px -5px 5px 5px #888;
 }

#example2{
box-shadow: -2px -2px 2px 2px #969;
}

#example3 {
box-shadow: 3px 3px 1px #036;
}

The possibilities are endless! If you find that as you work these effects are not showing up check the browser that you are using. CSS3 effects are not compatible with many earlier versions of browsers.

Experiment, Explore and come back and share with me what you find!

Visit www.learnartanddesign for video tutorials on Web Design.  The video tutorial cover HTML, CSS, CSS3 with a specific focus on building website in Dreamweaver.

Visit my You Tube Channel for lots of videos on Web and Print Design.
http://www.youtube.com/user/mhobsonbaker?feature=results_main

Yes, the Web is Live!!!!!!

The first website I built was through designing the site in Photoshop and then bringing the page into Image Ready where I could create the links, image maps, and more.  I loved it!  I did not need to leave my comfort zone of Photoshop. 

When Adobe  took over Macromedia the days of Image Ready were over.  After Google search upon Google search I found that Adobe had done away with Image Ready.  With hesitation I decided, it was time to run my organic thinking patterns through the linear coding process of HTML and CSS and learn Dreamweaver.  After all it was a WYSIWYG (What You See Is What You Get) program.  Yes, when I began working with HTML and CSS it literally was a different language.  The more I learned though the more intrigued I became.  Building a website became like a big creative math problem.  The creativity came from solving problem after problem, keeping the Art of the Design alive yet conforming to the underlying Science.

Working in the Web is one of the most fast paced changing subjects that I have encountered.  Therefore I am starting this blog to guide my students or anyone who wants to follow along a clear path to learn how to build a website in Dreamweaver.  I started a You Tube Channel that you can visit at http://www.youtube.com/user/mhobsonbaker?feature=mhum.  Here I have posted lots of videos on how to do most of these steps.  The only problem with my channel is the videos are not organized in an order to watch to gain the skills to build a site.  In this blog I will be able to organize this info and these videos in a linear way, sharing info that I have found helpful along the way.

You may be asking why not write a book or use Course Management Software to do this?  Again, the web is changing so quickly that by the time I finished a book so much of the information would be outdated.  Currently HTML5 is hitting the shelves and the web for that matter.  In a blog I can post current info as I find it and as it changes.  A Blog just feels more organic than working in course management software such as BlackBoard or Epsilen.  I will go for the organic anytime!  Lastly, a Blog is open to everyone, "Education for the People, by the People."  Maybe it is a collective knowledge of sorts.  The more my neighbor learns the better my block becomes. 

Let the neurons begin to fire.....


Welcome!