Let's take our previous example and add one more layer to it: A subtle gradient effect.
The only other extra thing we'll need is a portable network graphics image that we can reference via our CSS.
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') format('woff'), url('fonts/league_gothic-webfont.ttf') format('truetype'), url('fonts/league_gothic-webfont.svg#webfontdrbhz05x') format('svg'); } h1 ...