HTML5: Generic Containers

Exclusive offer: get 50% off this eBook here
HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook — Save 50%

Recipes for practical, real-world HTML5 multimedia driven development.

$23.99    $12.00
by Dale Cruse | June 2011 | Web Development

One of the most significant differences between HTML5 and all previous versions of HTML is that before we built generic <div>s and other such generic containers without much knowledge of what content would go in them. With the advent of HTML5, that comes to an end.

In this article by Dale Cruse, author of HTML5 Multimedia Development Cookbook, we will cover:

  • Structuring a blog article
  • Highlighting text using the mark element
  • Using the time element
  • Specifying the pubdate of an article
  • Displaying comment blocks using the article element
  • Adding fonts dynamically with @font-face
  • Adding drop shadow effect to fonts
  • Applying gradient effects to fonts

 

HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook

Recipes for practical, real-world HTML5 multimedia driven development.

        Read more about this book      

(For more resources on Multimedia development, see here.)

Introduction

"On the web, a man should not be judged by the color of his skin but by the content of his content." - Internet meme

To be correct according to the specification semantically, we need to know what the content is so we can wrap it with the most appropriate new element tag. While this may mean we developers have to think differently, a new challenge is exactly why we're here. In this article we'll look at some examples of how to do just that using several of HTML5's new elements.

"In case of conflict, consider users over authors over implementers over specifiers over theoretical purity." - Priority of Constituencies

Throughout this article, we'll show you how to use the new <article> element to mark up both blog posts and comments, add a meaningful publication date to an <article>, use the new <mark> element to highlight text, and how to note visual elements using the new <figure> element. We'll then turn our attention to some new methods of styling text with font replacement techniques, as well as adding drop shadows and gradients to our text.

 

Structuring a blog article

"The <article> element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

Blog entries are perfect candidates for the new <article> element, which is designed for syndicated content.

For this recipe, let's start by identifying the major elements of a blog <article>: There's usually a headline in the form of a heading tag, the blog entry itself consisting of several paragraphs and perhaps one or more images, and some information that usually includes the author's name and other related metadata. Notice this is all self-contained related content.

How to do it...

We're going to continue using the new HTML5 <header> and <footer> elements. The headline, entry and meta-information should be wrapped in their own unique tags, like <h2>, multiple <p>s and the new &ltfooter>.

Let's start with a foundation and add our new <article> element twice:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Title</title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
</body>
</html>

Put your code on a diet?

Ready for a shocker? Want to have your mind blown? The <html> and <head> and <body> tags (as well as their closing tags) are now optional in the HTML5 specification. Sure, you could leave them in there, and your pages will validate just fine, but why should we? If remove them from the previous code, we are left with the spartan:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Blog Title</title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>

Don't believe me? Run that code through the World Wide Web Consortium's validator at: http://validator.w3.org, and you'll see it displays correctly in the browser.

Well, not so fast buster. The problem is that removing those elements breaks our code for screen readers. Uh oh. Strike one. Also, removing the <body> tag breaks our new HTML5-enabling JavaScript for Internet Explorer. Strike two. And guess what? You can see it coming, can't you? Yes, removing the <html> tag removes the language of the page. There it is: Strike three.

So let's add those elements back in, shall we?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Title</title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
</body>
</html>

There, that's better.

How it works...

Remember, the new <article> element is a collection of related information intended for syndication via RSS or another means.

There's more...

Richer, more meaningful semantics is perhaps the most significant goal for HTML5. It's better for machines, better for authors, and most importantly, better for our audiences.

Validation as an aid, not a crutch

As we saw previously, removing the &lthtml> and <head> and <body> tags render a still valid page. So that begs the question of how valid validators are. Unlike the XML world, HTML5 can use incorrect syntax and still render just fine.

The author makes every effort to validate his code whenever possible. It's not necessary to be slavish to the validator, but it's always a good quality control check. And the closer you get to valid code, the better chance browsers will display your work in as consistent a manner as possible.

Eric Meyer's funny

The author loves how CSS guru Eric Meyer thinks about validators:

HTML5 Multimedia Development

Where to find validators

You can make good use of code validators at:

 

Highlighting text using the mark element

"The &ltmark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

When viewing search results, you'll often find the term for which you searched highlighted. Instead of relying on a semantically meaningless tag, we can now use the more meaningful <mark> element.

How to do it...

In this recipe, you'll see HTML5doctor.com has an excellent example of how to use the new <mark> element to highlight a search results term. This gives a useful semantic hook not only for styling but also for the machine tracking the results.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h1>716,000,000 search results for
the query "<mark>HTML 5</mark>"</h1>
<section id="search-results">
<article>
<h2><a href="http://en.wikipedia.org/wiki/HTML_5">
<mark>HTML 5</mark> - Wikipedia, the free
encyclopedia</a></h2>
<p><mark>HTML 5</mark> is the next major revision of
<mark>HTML</mark> ("hypertext markup language"), the core
markup language of the World Wide Web. The WHATWG started
work on the ... <a
href="http://en.wikipedia.org/wiki/HTML_5">
Read more</a></p>
</article>
<article>
<h2><a href="http://dev.w3.org/html5/spec/Overview.html">
<mark>HTML 5</mark></a></h2>
<p>A vocabulary and associated APIs for <mark>HTML</mark> and
XHTML. Editor's Draft 16 August 2009. Latest Published
Version: http://w3.org/TR/<mark>html5</mark>/; Latest
Editor's ... <a
href="http://dev.w3.org/html5/spec/Overview.html">
Read more</a></p>
</article>
</section>
</body>
</html>

Adding a simple style declaration like:

<style type="text/css">
mark {background-color: yellow; font-weight: bold;}
</style>

in the <head> section helps us render this highlighted text:

HTML5 Multimedia Development

How it works...

The new <mark> element simply highlights a word or phrase to draw the reader's attention. To do this, simply specify the <mark> to be bold or italicized or highlighted in some way in your corresponding Cascading Style Sheet.

There's more...

Sure, you could mark up and style a search-results page to use the <b> or <i> or even <span> tags to indicate for which term the search took place, but each of those tags only affects the presentation layer. They lack meaning. The new &ltmark> element can accomplish the same visual effect, while also adding that extra meaning to your markup. In fact, the new &ltmark> element is full of win.

<Mark> long and prosper

Another great use of the new <mark> element is highlighting a date in a calendar picker, as we often see on any date-based reservation system website like Priceline.com.

Priceline.com highlights the current date by default when booking your itinerary. Instead of using a semantically meaningless tag to achieve this, the new <mark> element could be a perfect candidate to use.

HTML5 Multimedia Development

Waiting for browsers

The new <mark> element isn't fully supported by any web browser at the time of this writing. Though the extra semantic meaning may not be apparent to machine readers, we can still use the new <mark> element as a stylistic "hook" until the day its meaning is fully supported by a variety of browsers.

Is "future proof" a word?

Remember that HTML5's new elements attempt to add extra meaning to our markup. The goal is never to take away meaning or break pages. With this in mind, it becomes much more palatable to layer on new elements like the <mark> element that's not fully implemented by browsers yet. Even if its meaning is not fully understood by machines yet, it certainly does not hurt to add it and make our pages as "future proof" as we possibly can.

See also

In 2001, Carrie Bickner prepared the "New York Public Library Online Style Guide" (http://legacy.www.nypl.org/styleguide) for branches of the NYPL to use when updating their websites. In this seminal publication, Bickner made the case for web standards by separating content (markup) from presentation (Cascading Style Sheets) from behavior (JavaScript). The publication was extremely forward-thinking for the time and was in use for many years.

 

Using the time element

"The &lttime> element represents either a time on a 24-hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

The new <time> element is a powerful way to display time or a specific date.

How to do it...

In this recipe we'll display dates and times that will be readable for both humans and machines. Let's look at four examples.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<article>
<header>
<h2>Headline</h2>
<time datetime="2010-11-29">November 29, 2010</time>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
<time datetime="2010-11-29">Nov. 29</time>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
<time datetime="2010-11-29">the date this was written</time>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
<article>
<header>
<h2>Headline</h2>
<time datetime="2010-11-29T11:34">the date and time this was
written</time>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer>Meta information.</footer>
</article>
</body>
</html>

How it works...

We can use the new <time> element to indicate specific dates, times, or both.

There's more...

The new &lttime> element specifies an exact moment in time—not a time period.

Odd rules

One interesting aspect of the new <time> element is that you can't use a date before the Christian Era. You also can't use a date like "November 2010." Whatever date we specify must be a positive, specific date—not a relative one. The HTML5 Working Group continues to address this seemingly arbitrary restriction.

<time>'s Time will come

Browsers display the new <time> element but don't do anything special with it—yet.

Always remember SEO

Time. Why are we so obsessed with it? One very valid reason to focus on time and dates on the web is Search Engine Optimization. SEO, once seen as some sort of mysterious voodoo only black hatted wizards understood, is now everyone's responsibility online. You spend time creating good code and expect a writer to create content worth reading. Now go one step further and ensure that your intended audience can actually find the content you have taken the time to create. And the new <time> element is just one of the ways search engines draw attention to the most recent content.

See also

The new HTML5 <time> element is a possible addition to the Microformats movement. Microformats promise to add additional semantic meaning to our markup. Though not officially a standard, Microformats are slowly gaining acceptance in the web development community. Learn more at Microformats.org.

 

HTML5 Multimedia Development Cookbook Recipes for practical, real-world HTML5 multimedia driven development.
Published: May 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Multimedia development, see here.)

Specifying the pubdate of an article

"The pubdate attribute is a boolean attribute. If specified it indicates that the date and time given by the element is the publication date and time of the nearest ancestor &ltarticle> element, or, if the element has no ancestor <article> element, of the document as a whole." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

The new pubdate is an attribute for the new <time> element when it exists within the new <article> element. It allows us to be even more precise when presenting the date and time of publication.

How to do it...

In this recipe we'll build on the new <time> element from the last recipe and add the new optional pubdate attribute to display our publication date.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<article>
<header>
<h2>Headline</h2>
<p>Published on <time datetime="2010-11-29" pubdate>
November 29, 2010</time> in the something category.</p>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer></footer>
</article>
<article>
<header>
<h2>Headline</h2>
<p>Published on <time datetime="2010-11-28" pubdate>
November 28, 2010</time> in the something category.</p>
</header>
<p>First paragraph</p>
<p>Second paragraph</p>
<footer></footer>
</article>
</body>
</html>

How it works...

Pubdate is simply a binary variable, or Boolean, attribute to denote when something was published.

There's more...

You can think of pubdate as adding extra information to an element (<time>) that is already providing extra information. It is like the cherry on a sundae. And who doesn't like cherries on their sundaes?

Still waiting on browsers

We are getting really forward-thinking by including new elements like <mark>, <time>, and pubdate, as none are fully supported by any browser—yet.

HTML5 Multimedia Development

Modern browsers like Firefox display the new <time> element and pubdate attribute natively without styling.

Extra credit

You can code the new pubdate Boolean attribute as <time datetime="2010-11-29" pubdate="pubdate"> if you want to conform to XML syntax.

Let's end confusion

Even though HTML5 is still quite new, there's already some confusion about the new pubdate Boolean attribute. Some think it should generate the date of publication based on your computer clock or a server. That's not its role. Its role is to produce a machine-readable publication date that is useful no matter what text you may put after it.

See also

Tantek Celik has created a very useful site at http://favelets.com that features all sorts of "bookmarklets" or in-browser JavaScript commands. Use these to do things like validate HTML5, CSS, and anchors all in the same window. Very helpful!

 

Displaying comment blocks using the article element

"The <article> element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

We can certainly make the case for marking up blog comments using the new <article> element too. In this recipe, we will do exactly that.

How to do it...

Let's use the new <article> element to mark up a block of blog comments.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<article>
<header>
<h3>Comment by:
<a href="http://dalejcruse.com">Dale J Cruse</a></h3>
<p>On <time datetime="2010-11-29">November 29, 2010</time></p>
</header>
<p>The is the first paragraph of my comment</p>
<p>The is the second paragraph of my comment</p>
<footer>
<p><small>Creative Commons Attribution-ShareAlike
License</small></p>
</footer>
</article>
<article>
<header>
<h3>Comment by:
<a href="http://dalejcruse.com">Dale J Cruse</a></h3>
<p>On <time datetime="2010-11-29">November 29, 2010</time></p>
</header>
<p>The is the first paragraph of my comment</p>
<p>The is the second paragraph of my comment</p>
<footer>
<p><small>Creative Commons Attribution-ShareAlike
License</small></p>
</footer>
</article>
</body>
</html>

How it works...

"Wait a minute," you are thinking. "A blog comment isn't an <article>!" you exclaim. Not so fast, buster. If we analyze the components of a blog comment, we'll find the same elements common to other <article>s.

There's more...

While we're at it, let's check out that new <small> element in the previous <footer>s. Previously, <small> was a presentational element that denoted physically small text. Not anymore! Now <small> has been redefined for use this way:

"The <small> element represents so called 'small print' such as legal disclaimers and caveats." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Blog comments

Since blog comments and their comment feeds can be intended for syndication, there's even more reason to use the new <article> element.

Value comments

Comments. They are found in just about any blog worth its readership. No matter if we're creating our own sites or our own blog content management systems, we deserve to treat the code for comments with every bit as much care and attention as we do the actual blog posts themselves.

Opportunity's yours

Disqus.com is the online home of the most widely used blog comments plugin. Publishers can easily incorporate it into their sites without much programming effort. So where does that leave us? Well, no matter whether you use Disqus or any other commenting system, somebody had to develop that code, right? It might as well be you!

See also

Josh Duck has created the clever and useful Periodic Table of HTML5 Elements at: http://joshduck.com/periodic-table.html. There, Josh smartly groups categories of similar new elements like Root element, Text-level semantics, Document sections, and more!

 

Adding fonts dynamically with @font-face

Not so long ago, we designers and developers were limited to only a select few "web safe" fonts for text. If we wanted to display text in a font face that wasn't considered "safe," we made an image out of it. It was dumb, but we had no other choice. Now we do. The font has finally been liberated on the web.

Good typography is essential to any design, and the new @font-face ability lets us embed fonts for browsers to use. Though technically not part of HTML5, this CSS3 property is much too important not to address.

Getting ready

For this recipe, let's find a fun font and embed it as a simple logo. Below you'll find links to several great sites to find both free and paid fonts for web use. For this example, let's look at a previous version of the author's personal portfolio at http://dalejcruse.com.

How to do it...

There are several methods to display custom fonts on the web, but we're going to examine and use the bulletproof way to get it working in modern, legacy, and even mobile browsers.

Let's head over to the @Font-Face Generator at http://fontsquirrel.com/fontface/generator.

HTML5 Multimedia Development

Using the @font-face Kit Generator wizard walks us through the process of uploading a font ("League Gothic" here) and ensuring that the font you use is legally authorized for use.

Once uploaded, the generator will convert your font to multiple file formats. Download all of these, and save them to the server where you want them to be displayed. All that's needed is two bits of styling:

  1. Referencing the @font-face files
  2. Assigning the new font to the element we want to use.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <!--[if lt IE 9]><script
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
    </script>[endif]-->
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <style>
    @font-face {font-family: 'LeagueGothic'; src:
    url('fonts/league_gothic-webfont.eot'); src: local(''),
    url('fonts/league_gothic-webfont.woff') format('woff'),
    url('fonts/league_gothic-webfont.ttf') format('truetype'),
    url('fonts/league_gothic-webfont.svg#webfontdrbhz05x')
    format('svg');
    h1 {font-family: 'LeagueGothic'; font-size: 124px;
    line-height: 124px; margin: 355px 0 -25px 0;
    text-transform: uppercase;}
    </style>
    </head>
    <body>
    <h1>Dale J Cruse</h1>
    </body>
    </html>

HTML5 Multimedia Development

And boom goes the dynamite.

How it works...

The new @font-face ability allows us to save font files in various formats on our web servers and use CSS to reference them for display. In this way, the font files become another asset, just like an image.

There's more...

Browsers use their own proprietary font files for display on the web. By downloading and referencing each of the possible formats, we have ensured that modern browsers like Firefox, Chrome, and Safari, as well as legacy browsers like Internet Explorer and even mobile browsers can display our intended fonts.

Don't steal

Ensure that the font(s) you are using has been legally authorized to be used for online display. Stealing isn't cool.

Firefox note

Remember to store the fonts you want to use on the same server as your unique domain. Some browsers (I'm looking at you, Firefox) do not like it when you try to reference fonts across domains.

Paul Irish rocks

In the spirit of giving credit where it is due, the CSS method we used to call various locally stored font files was developed by Paul Irish in his post "Bulletproof @font-face Implementation Syntax" at: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax.

See also

There are some terrific sources to find both free and paid fonts on the web, including:

 

Adding drop-shadow effects to fonts

Once upon a time, it seemed like web designers and developers added drop shadows to every visual element they could. It was almost like they were getting paid by the drop shadow. Luckily that time has come and gone. Today, only the most fashionable designers and developers know to add drop shadows very sparingly Let's take a look at how to do that using only CSS.

Getting ready

To get started, let us use the previous example, and simply add a very subtle drop shadow to the headline font from a previous version of the author's portfolio site at http://dalejcruse.com.

How to do it...

In this recipe we will use some careful styling to add a tasteful drop shadow effect to some of our text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
@font-face {
font-family: 'LeagueGothic';
src: url('fonts/league_gothic-webfont.eot');
src: local(''), url('fonts/league_gothic-webfont.woff')
format('woff'), url('fonts/league_gothic-webfont.ttf')
format('truetype'), url('fonts/league_gothic-
webfont.svg#webfontdrbhz05x') format('svg');
}
h1 {font-family: 'LeagueGothic'; font-size: 124px;
line-height: 124px; margin: 355px 0 -25px 0;
text-transform: uppercase; text-shadow: black 1px 1px 0;}
</style>
</head>
<body>
<h1>Dale J Cruse</h1>
</body>
</html>

How it works...

The text-shadow CSS attribute displays a subtle black drop shadow one pixel to the right and one pixel underneath our text in modern browsers. Though very subtle on the author's portfolio site, the effect can be seen much more dramatically if we set the background and font color both to white.

With the background and text color both set to white, all we see here is the black drop shadow one pixel to the right and one pixel underneath. Since IE does not support text-shadow, this would be rendered as pure white in that browser. That's probably not what you want.

HTML5 Multimedia Development

There's more...

In addition to absolute color values like "black," we can also use hexadecimal values like "#000" or even RGBA values with a semi-transparent alpha channel.

Browser support

Modern browsers like Chrome 2+, Firefox 3.1+, Opera 9.5+, and Safari 1.1+ all support the text-shadow CSS property. This song is pretty worn out by now, but suffices to say Internet Explorer does not support it.

With great power…

Just because the ability to add drop shadows to text using only CSS exists, don't consider it a license to go and abuse it. We don't want to revert to the ugly days of the web when drop shadows were everywhere. Instead, use your powers for good.

A plea to all readers

For the sake of readability, consider applying drop shadow effects only to headline or header fonts. Applying it to body text becomes tiresome and unreadable. And you do not want to be the person known for overusing and killing drop shadows all over again.

See also

Google released the WebFont Loader open-source JavaScript library to better control the way browsers load web fonts. Check out the super-simple implementation at: http://code.google.com/apis/webfonts/docs/webfont_loader.html.

 

Applying gradient effects to fonts

Let's take our previous example and add one more layer to it: A subtle gradient effect.

Getting ready

The only other extra thing we'll need is a portable network graphics image that we can reference via our CSS.

How to do it...

In this recipe we will add a .png image file with alpha transparency to create a slick gradient effect on our headline.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>[endif]-->
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
@font-face {font-family: 'LeagueGothic'; src:
url('fonts/league_gothic-webfont.eot'); src: local(''),
url('fonts/league_gothic-webfont.woff') format('woff'),
url('fonts/league_gothic-webfont.ttf') format('truetype'),
url('fonts/league_gothic-webfont.svg#webfontdrbhz05x')
format('svg');
}
h1 {font-family: 'LeagueGothic'; font-size: 124px;
line-height: 124px; margin: 355px 0 -25px 0;
text-transform: uppercase; text-shadow: black 1px 1px 0;
position: relative;}
h1 span {background: url(gradient.png) repeat-x; display: block;
height: 124px; position: absolute; width: 100%;}
</style>
</head>
<body>
<h1><span></span>Dale J Cruse</h1>
</body>
</html>

Notice that extra <span> in our <h1> tag. That is where we have put our image.

How it works...

By simply layering an image with some transparency over our text, we have subtly altered the text to appear to have a gradient.

There's more...

Your imagination is the only limitation to this effect. You could create fades, metallic effects, vertical or horizontal stripes—even zebra stripes!

Careful there
Remember: Just because you can, does not mean you should. Use text gradients sparingly. Please.

See also

For a beautiful example of a gradient effect over a font, check out the header on Alex Clarke's college project about Enceladus, one of Saturn's moons at: http://hagablog.co.uk/demos/enceladus/index.html. While you're enjoying the visual design, don't forget to check out the source code to see Alex's very well documented HTML5 code.

Summary

In this article we took a look at the approach the developers use to create generic containers to house various types of content.


Further resources on this subject:


HTML5 Multimedia Development Cookbook Recipes for practical, real-world HTML5 multimedia driven development.
Published: May 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Dale Cruse

Since 1995, Boston-area web developer Dale Cruse has been publishing websites for high-profile clients ranging from the U.S. Army to Bloomingdale's. He has been a guest lecturer at the Art Institute of New England & is currently pursuing speaking opportunities. Contact him at http://dalejcruse.com. He is also the author of the Champagne blog Drinks Are On Me at http://drinksareonme.net.

Books From Packt


MODx Web Development - Second Edition
MODx Web Development - Second Edition

Plone 3 Multimedia
Plone 3 Multimedia

Kentico CMS 5 Website Development: Beginner's Guide
Kentico CMS 5 Website Development: Beginner's Guide

Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

Grok 1.0 Web Development
Grok 1.0 Web Development

Yii 1.1 Application Development Cookbook: RAW
Yii 1.1 Application Development Cookbook: RAW

Python 3 Web Development Beginner's Guide
Python 3 Web Development Beginner's Guide

Agile Web Application Development with Yii1.1 and PHP5
Agile Web Application Development with Yii1.1 and PHP5


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
j
A
x
G
v
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software