O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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=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') ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required