Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

CSS Shadow Text - Dreamweaver Tutorial


Share this Dreamweaver Article:

Firefox has been able to render CSS shadow text for quite some time now. Safari has had the ability to render a text shadow even longer, but it is only now that we will see CSS shadow text rollout to all major browsers although it will be commonly recognised by browsers other than Safari and Firefox as CSS3 Shadow text.

You don't need to type in any prefix for the text shadows to work and that is testimony to how long the text shadow property has been around for.

Many webmasters try to render text shadows using the Webkit text shadow prefix or the Moz text shadow prefix which is wrong because you do not need to type in any prefix for the text shadows to work and that is testimony to how long the text shadow property has been around for. Simply typing ‘text-shadow:’ followed by the styling attributes you want will be enough to render the CSS shadow text. Once all of the latest innovations for CSS3 styles have been rolled out we can expect to lose the Moz prefix and Webkit prefix in favour of a more generic ‘one fits all’ syntax. I for one cannot wait for that day!


CSS3 Text shadows work, in essence just like CSS3 Box Shadows with the exception that you do not need to use the Webkit text shadow or Moz text shadow prefixes.

After typing ‘text-shadow:’ you will need to specify the horizontal offset of the CSS 3 shadow first. Positive numbers will set the text shadow on the right side of the text in pixel increments. Negative figures like -3px will set the css3 shadows to the left of the text. Next, setting the vertical offset works the same way except that positive numbers will set the css3 shadow below the text to be styled and negative or minus figures like -2px will position the text shadow above the text.


css text shadows properties example


Next in line, the blur radius which can have dramatic effects on the style of you chosen text is set. The higher the number the more the radius of the text shadow blur will be spread. Very high numbers will smudge the text shadow and you can still achieve quite a good text effect.

Finally a text shadow color can be set. This demonstration page is using hexadecimal text shadow colors for all of the examples shown.



The subtle yet very effective css text shadow in this text box was made using a 1 pixel horizontal offset, 1 pixel vertical offset, 1 pixel blur radius and a hex color of white. So the syntax for this css text shadow effect would be:


text-shadow: 1px 1px 1px #FFF;


This text effect gives the impression that the text has been punched into the background.


The above example is a very generic example of what can be achieved using css text shadows. However, by concatenating text shadows together in a longer string of code, you can achieve some pretty astonishing results. All of the examples of CSS3 shadows are available for a free download. You can then define a site in Dreamweaver and keep them close at hand for when you need a good text effect to use in your Dreamweaver website designs.



CSS Text Shadow - example 1

This text shadow using CSS3 is another subtle effect, the blur radius has been cranked up to 85 pixels and the shadow has been centered in the middle of the text on both the horizontal and vertical axis.’ The hex color is a standard yellow from the Dreamweaver color palette.


Text Shadow



 #shadow1 h5 {

        font-size:60px;
        color:#FFF;
        text-shadow: 0px 0px 85px #FF0;
        margin:0;
        padding:0;

 }


CSS Shadow Text - example 2

This is the first example of a CSS3 shadow with concatenated text shadow properties. Each text effect shadow property is separated by a comma and to achieve a straight up vertical offset each subsequent text shadow has been sequentially raised using negative minus figures; -5 px -10px -15px ....


Text Shadow



 #shadow2 h5 {

        font-size:60px;
        color:#CCC;
        text-shadow:0px 0px 4px white,0px -5px 50px #FFFF33,2px -10px 60px #FFDD33, -2px -15px 11px #FF8800,2px -25px 70px #FF2200;      
        margin:0;
        padding:0;

 }


CSS Text Shadow - example 3

This ‘text on fire’ css 3 shadow has been built up in a similar vertical offset fashion although the horizontal offset switches between negative and positive to add a shimmering layered text shadow which resembles a vibrant fire


Text Shadow



 #shadow3 h5 {

        color:#333;
        font-size:60px;
        -box-box-shadow: 10px 10px 100px #09F;
        text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px  -25px 18px #FF2200;  
        margin:0;
        padding:0;

 }
 

CSS Text Shadow - example 4

A similar text effect to the css shadow text effect used in example 2 except this example is using a different color variation. This css shadow text has been built up using cool colors to give an icy feel to this text shadow.


Text Shadow



 #shadow4 h5 {
        color:#FFF;
        font-size:60px;
        text-align:center;
        text-shadow:0 0 4px #E0EEFB, 0 -5px 50px #95C5DE, 2px -10px 60px #5A9ABE, -2px -15px 11px #3C91C7, 2px -25px 70px #1C2742;      
        margin:0;
        padding:0;
 
 }

 

CSS Text Shadow - example 5

This css shadow example parallels example 3 but is using cool colors again to achieve a css3 shadow with a solid icy effect.


Text Shadow



 #shadow5 h5 {
        font-size:60px;
        color:#333;
        text-align:center;
        -box-box-shadow: 10px 10px 100px #09F;
        text-shadow:0 0 4px #E0EEFB, 0 -5px 4px #95C5DE, 2px -10px 6px #5A9ABE, -2px -15px 11px #3C91C7, 2px -25px 18px #1C2742;        
        margin:0;
        padding:0;
 }
  
  


Related Tutorials:

CSS3 Shadow Text in Dreamweaver - Dreamweaver video Tutorial

CSS3 Box Shadows - Dreamweaver article tutorial

CSS3 Box Shadows in Dreamweaver - Dreamweaver video Tutorial

CSS3 Rounded Corners - Dreamweaver article tutorial

CSS3 Rounded Corners Dreamweaver - Dreamweaver video Tutorial




blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials