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:
<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:
<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.
A similar technique uses the background to influence the color and let’s the text be white or the color of the background.
Or take it a step further and reverse all the colors.
We’ve grouped all three of the above examples together so you can compare the CSS construction.
<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
:
with the line height forced to 8px
with the line height forced to 8px</div>
Why would you want the text to overlap? Here is a design to consider:
Design
#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.
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.
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.
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.
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:
<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>
<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>
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.
#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.
Just like the shadow filter, you can play around with the colors on the drop shadow filter.
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.
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.
<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>
<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>
2 Comments