with Lorelle and Brent VanFossen

CSS Tips and Tricks – Jazzing Up the Content

We’ve show how to jazz up a web page’s content within a container or box. Now it is time to look at some tips and tricks for jazzing up the content.

CSS Text Effects

There are a variety of text characteristics you can also add to jazz up your text.

First of all, you can play with color. One of the popular effects on web pages in the early 1990s was a text rainbow of colors:

T h i s i s a R A I N B O W o f C O L O R F U L t e x t .
<div style=”text-align:center; font-family:Arial Black, Arial, Helvetica, sans-serif; font-size:110%; font-weight:bold”>

<span style=”color:blue”>T</span>
<span style=”color:aqua”>h</span>
<span style=”color:lime”>i</span>
<span style=”color:purple”>s</span>
<span style=”color:fuchsia”> </span>
<span style=”color:orange”>i</span>
<span style=”color:gold”>s</span>
<span style=”color:green”> </span>
<span style=”color:blue”>a</span>
<span style=”color:aqua”> </span>
<span style=”color:lime”>R</span>
<span style=”color:purple”>A</span>
<span style=”color:fuchsia”>I</span>
<span style=”color:orange”>N</span>
<span style=”color:gold”>B</span>
<span style=”color:green”>O</span>
<span style=”color:blue”>W</span>
<span style=”color:aqua”> </span>
<span style=”color:lime”>o</span>
<span style=”color:purple”>f</span>
<span style=”color:fuchsia”> </span>
<span style=”color:orange”>C</span>
<span style=”color:gold”>O</span>
<span style=”color:green”>L</span>
<span style=”color:blue”>O</span>
<span style=”color:aqua”>R</span>
<span style=”color:lime”>F</span>
<span style=”color:purple”>U</span>
<span style=”color:fuchsia”>L</span>
<span style=”color:orange”> </span>
<span style=”color:gold”>t</span>
<span style=”color:green”>e</span>
<span style=”color:blue”>x</span>
<span style=”color:aqua”>t</span>
<span style=”color:lime”>.</span>
</div>

You can also create the rainbow effect word by word:

This is a RAINBOW of COLORFUL text.
<div style=”text-align:center; font-family: Arial Black, Arial, Helvetica, sans-serif; font-size:110%; font-weight:bold”>

<span style=”color:green”>This</span>
<span style=”color:blue”>is</span>
<span style=”color:aqua”>a</span>
<span style=”color:lime”>RAINBOW</span>
<span style=”color:purple”>of</span>
<span style=”color:fuchsia”>COLORFUL</span>
<span style=”color:orange”>text.</span>
</div>

You can also play with text colors for headers such as this technique which highlights each word with a color and removes the space between them to look like many popular magazine headings.

RED BLUE

A similar technique uses the background to influence the color and let’s the text be white or the color of the background.

REDBLUE

Or take it a step further and reverse all the colors.

REDBLUE

We’ve grouped all three of the above examples together so you can compare the CSS construction.

Simple Text Colors:
<div style=”font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900″>
<span style=”color:red“>RED</span>
<span style=”color:blue“>BLUE</span>
</div>

Colored Backgrounds with White (or Transparent) Text:
<div style=”margin:10px; font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900; color:white“>
<span style=”background:red; padding:10px 0 10px 10px”>RED</span>
<span style=”background:blue; padding:10px 10px 10px 0″>BLUE</span>
</div>

Colored Backgrounds with Colored Text:
<div style=”margin:10px; font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900″>
<span style=”background:red; color:blue; padding:10px 0 10px 10px”>RED</span>
<span style=”background:blue; color:red; padding:10px 10px 10px 0″>BLUE</span>
</div>

You can also play with the way the text looks using CSS properties like text-transform, font-variant, and letter-spacing:

this is all lowercase forced to uppercase
<div style=”text-transform:uppercase”>this is all lowercase forced to uppercase</div>
This is Font-Variant Small Caps
<div style=”font-variant:small-caps”>This is Font-Variant Small Caps</div>
This is letter-spacing at .5em
<div style=”letter-spacing: .5em”>This is letter-spacing at .5em</div>
This is letter-spacing at 1em
<div style=”letter-spacing: 1em”>This is letter-spacing at 1em</div>
This is a line of text
with the line height forced to 8px
<div style=”line-height:8px”>This is a line of text
with the line height forced to 8px</div>

Why would you want the text to overlap? Here is a design to consider:

CSS Style Sheet:
#logo {
position:relative; line-height:60%; font-family:Arial Black, sans-serif; font-weight:bold; text-align:center; padding:15px}

#logo div {
color:#66CC00; font-size:3em; letter-spacing:.1em}

#logo span {
color:#006600; font-size:1.5em; font-style:italic; letter-spacing:.6em; padding-left:15%}

HTML Structure:
<div id=”logo”>
<div>LORELLE</div>
<span>Design</span>
</div>

 

CSS Filter Fun

The use of CSS filters is another way of jazzing up your web page content and design. Filters come in different types ranging from simple shadows to eye-popping. The following are a few of the more popular, and easily attainable, filters. CSS filters are still fairly new and now all browsers recognize filters equally. Firefox is one of those which has trouble with filters, but all of these should work in the latest Microsoft Internet Explorer. Also, if you have an older browser, it’s time to update it!

Shadow Filter

Filters that create shadows on the content come in two forms: shadow and drop shadow. The Shadow filter merely shows a narrow shading behind a graphic or text. The Drop Shadow Filter shows an offset silhouette duplicate of the graphic or text behind the subject. Let’s look at their features individually.

The shadow filter creates a simple shadow behind the subject.

Shadow Filter – Gray
<div style=”font-size:1.3em; height:1%; font-weight:bold; filter:shadow(color:gray)“>Shadow Filter – Gray</div>

Notice how the left side of the S in Shadow is cut off along the left margin. The shadow effect literally casts a shadow to the left and down from the subject as the default. If there is no padding around the subject, the shadow will be cut off. Let’s add the padding.

Shadow Filter – Gray
<div style=”font-size:1.3em; height:1%; font-weight:bold; padding:10px; filter:shadow(color:gray)“>Shadow Filter – Gray</div>

Now the shadow filter is completely visible on the left. Also, almost all filters require a height, and a few require a width, to their container. Let’s look at some color effects you can do with shadow.

Shadow Filter With Light Green Shadow
<div style=”font-size:1.3em; height:1%; padding:10px; filter:shadow(color=#33CC99)“>Shadow Filter With Light Green Shadow</div>
Blue Shadow Filter With Peach-Colored Text
<div style=”font-size:1.3em; height:1%; font-weight:bold; padding:10px; color:#FF9966; filter:shadow(color=#0033FF)“>Shadow Filter With Blue Shadow and Peach-Colored Text</div>

As you can see, you can play with the colors of the shadow and the text to create different effects with the shadow filter. You can also play with the direction of the shadow by adding a directon attribute.

This is Shadow set at Direction 145
<div style=”font-size:1.3em; height:1%; padding:10px; filter: shadow( color=gray, direction=135)“>This is Shadow set at Direction 145<

Shadow filters affect more than text. They can also be used on images and graphics as well as boxes. Remember to allow enough margin and padding for the effect to be fully seen. Here are some examples:

Baby Blue Eyes Flowers, photograph by Brent VanFosssen

<div class="alignleft" style="padding:10px; height:241px; width:161px; filter:Shadow(direction=135, color=#0000ff, strength=12)">
<img src="blueeye1.jpg" width="161" height="241" alt="Baby Blue Eyes Flowers, photograph by Brent VanFosssen"></div>

 
This is Shadow set on the box at Direction 315 with the strength to 25.

<div style="width:40%; filter:shadow(color=#999900, direction=315 strength=25); padding:30px 10px 5px 30px"><div style="border:2px #006600 solid; background:#99CC66; font-size:1.1em; font-weight:bold; padding:10px; color:#006600">This is Shadow set on the box at Direction 315 with the strength to 25.</div></div>

To Make A quote diffeRENT from the rest, you can bEAT your own DRUM.

You can really have some design fun with CSS text shadows and filters. It is really up to your imagination. Here is an experiment to create a magazine style pull-quote, using many of the techniques discussed on these pages about CSS tips and tricks. There are many over-the-top ways to use the shadow filter. There are also some very subtle designs that can be used with the shadow filter that can enhance your web page. We’ve created a container box with a shadow, and then applied various font elements to the text to create a fun, magazine-style effect.

CSS Style Sheet:
#shadowbox {
width:40%; float:right; filter:shadow(color=#999999, direction=225); padding:10px}

#shadowbox div {
background:white; font: 1.5em Impact, Helvetica, sans-serif; color:#99CCFF; padding:10px 20px 10px 10px}

HTML Structure:
<div id=”shadowbox”><div>To
<span style=”color:#CC99CC; text-transform:uppercase; font-variant:small-caps; font-family:Georgia, Times, serif; font-weight:bold; font-size:1.4em”>Make</span>
A quote
<span style=”font-weight:bold; font-size:1.8em”>diffe
<span style=”color:#FF99FF”>RENT</span>
</span>
<span style=”text-transform:uppercase; font-variant:small-caps; color:#6699CC”>from the rest </span>,
you can
<span style=”color:#6699FF”>b</span>
<span style=”color:#CC99FF”>EAT</span>
your own D
<span style=”color:#FF99FF”>RUM</span>.
</div>
</div>

Drop Shadow Filter

Like the shadow filter, the drop shadow filter also casts a shadow, but this one is a duplicate of the content offset from the original.

Drop Shadow Filter
<div style=”font-size:1.3em; height:50px; filter:dropshadow(color=red)“>Drop Shadow Filter</div>

Just like the shadow filter, you can play around with the colors on the drop shadow filter.

Yellow Drop Shadow Filter with Blue Text
<div style=”color:blue; font-size:1.3em; height:50px; filter:dropshadow(color=yellow)“>Yellow Drop Shadow Filter with Blue Text</div>
Light Green Drop Shadow Filter with Dark Green Text
<div style=”color:darkgreen; font-size:1.3em; height:50px; filter:dropshadow(color=#66FF00)“>Dark Green Drop Shadow Filter with Dark Green Text</div>
Purple Drop Shadow Filter with Pink Text
<div style=”color:pink; font-size:1.3em; height:50px; filter:dropshadow(color=#9900CC)“>Purple Drop Shadow Filter with Pink Text</div>

As you can see from these examples, the dark text with a complementary lighter shadow color is a more pleasing look. But the drop shadow filter fun doesn’t stop here. As with the shadow, you can adjust the offset position with the drop shadow.

Drop Shadow offset by 3 on x and y
<div style=”padding-left:10px; font-size:1.1em; height:30px; filter: dropshadow( color=#999999, offx=3, offy=3, positive=1 )“>Drop Shadow offset by 3 on x and y</div>
Drop Shadow offset by 20 on x and y
<div style=”padding-left:10px; font-size:1.1em; height:50px; filter: dropshadow( color=#999999, offx=20, offy=20, positive=1)“>Drop Shadow offset by 20 on x and y</div>
Drop Shadow offset by minus 20 on x and plus 20 on y
<div style=” padding-left:40px; font-size:1.1em; height:50px; filter: dropshadow( color=#999999, offx=-20, offy=20, positive=1)“>Drop Shadow offset by minus 20 on x and plus 20 on y</div>

Again, watch your edges. I had to increase the left padding on the last example by 40px in order for the shadow to be entirely visible on the left size.

The drop shadow filter can also be added to images and boxes.

Baby blue eyes flower, photograph by Brent VanFossen

<div class="alignleft" style="padding:10px; filter:dropShadow( color:#6699CC, offX=-10, offY=10, positive=true); width:161px; height:241px">
<img style="margin:8px" src="http://cameraontheroad.com/photos/flowers/blueeye1.jpg" width="161" height="241" alt="Baby blue eyes flower, photograph by Brent VanFossen">
</div>

 
Drop Shadow on a box

<div style="width:30%; filter:dropShadow(color: #999900, offX=10, offY=-10, positive=true); padding:15px">
<div style="border:2px #006600 solid; background:#99CC66; font-size:1.1em; font-weight:bold; padding:10px; color:#006600">
Drop Shadow on a box</div>
</div>

 

Shadows and Drop Shadows – Links and Resources

2 Comments

  • Ben
    Posted August 12, 2005 at 10:56 | Permalink

    I find a little annoying that some of the effects presented here rely on a proprietary solution (the “filter” option) that will only work with IE. And nowhere it is presented as a non-portable trick. I find this especially surprising when you can see a Firefox banner. Firefox is a great navigator, but since thos tricks use a IE specific code, it won’t work…

  • Posted December 16, 2005 at 18:05 | Permalink

    “Firefox is one of those which has trouble with filters, but all of these should work in the latest Microsoft Internet Explorer. Also, if you have an older browser, it’s time to update it!”

    Firefox is one of those web browsers that use standards. IE has this privative “filter” thing that is not standard nor compatible with other browsers

One Trackback

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>