Text Shadows & jQuery

Nov 30, 2009
Episode 1
In this very first episode of Doctype, Nick talks about CSS3 text shadows and Jim goes over jQuery basics.
Spotlight

Thanks to those who make Doctype possible!

Text Shadows in CSS3

The "text-shadow" property in CSS3 does exactly what the name implies. Not only can you use it to add shadows behind your text, you can also create nifty effects like glows, embossed letters, flames, and more. To use text-shadow, you need to supply it with four basic values: x-offset, y-offset, blur radius, and color. A basic text-shadow declaration might look something like this:
  
    text-shadow: 0px 1px 0px #FFF;
  
If you want to get even more advanced, try using the rgba color setting, apply multiple shadows, or using the inset text trick!

Getting Started with jQuery

To get jQuery running on your page, you must include the jquery.js file using a >script> tag. Optionally you can include jquery-ui.js to include some extra effects and widgets
  
    <script type="text/javascript" src="path_to_your_js/jquery.js"></script>
    <!-- jQuery UI enables widgets and effects -->
    <script type="text/javascript" src="path_to_your_js/jquery-ui.js"></script>
  
Using chaining, you can specify many changes and behaviors to the same set of elements, all at the same time.
To use the .effect() method, you must include jquery-ui in your page
  
    <script type=”text/javascript”>
      $(document).ready(function(){
        $('p').css({
          opacity: 0.7,
          background: '#0099FF'
        }).effect('shake');
      });
    </script>