WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / authoring / style / sheets / headlines

[previous] [next]

Making Headlines With Cascading Style Sheets

Developer News Eclipse Helios Update Brings New PHP Tools Internet Explorer 9 Ups Standards Support JBoss Portal 5 Release Easier to Use

Image is Everything

Then there are times when you wish to incorporate an image into your designs. Thanks to the background property in CSS, you can include images in every block level element! You don't have to build a huge background image and tuck it into your pages through the body element.

Either you think your page needs help in attracting the wandering eyeballs of your visitors or the client wants that something special. In the next few examples, we will cover three headline examples that use a JPG, a GIF, and a PNG.

Example #12

This first example just makes use of an image. Since the image isn't cropped exactly how I want, I'll be using background-position to move it. Also, in order to get the first letter in the headline to standout, I'm going to use the pseudo-element, h2:first-letter, in order to increase the size and change its color.

h2	{
	margin-bottom: 0;
	padding: 2em .5em .5em .5em;
	background-image: url(examples.jpg);
	background-position: -20px -80px;
	background-repeat: no-repeat;
	color: #333;	
}

h2:first-letter
{
	color: #fff;
	font-size: 200%;
}

p	
{
	margin-top: 0;
	color: #333;
	padding: .25em 0 0 .75em; 
}

For a live example, take a look at Headline 12.

Example #13

Before Flash took the Web by storm, Web builders actually used GIFs to create animations for the Web pages. (Yes, it's shocking but true!) And thanks to CSS, you can put animated GIFs behind headlines like I do here.

First, here's the animated GIF:

Next up is the CSS:

h2	
{
	margin-bottom: 0;
	padding: 0 .5em .5em .5em;
	background-image: url(animgifheader.gif);
	background-position: -20px -15px;
	background-repeat: no-repeat;
	color: #333;	
}

p	
{
	margin-top: 0;
	color: #333;
	padding: .25em 0 0 .75em; 
}

For a live example, take a look at Headline 13.

In this example, I simply took a screen capture of the text and the blurred sections of the text to create the animation. However, you could create Monty Python-esque animations or have simple, but annoying, rapid color changes. It's all up to you.

home / authoring / style / sheets / headlines

[previous] [next]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Building an Ajax-driven File Uploader · Creating an ASP.NET Registration and Confirmation System · Combine Ajax and JSON to Transmit Complex Presentation Data Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Live Migration Brings High Availability to Windows · A Simpler Solution for VoIP Phone Calls? · Review: Dropcam Echo

Created: December 11, 2002
Revised: December 11, 2002

URL: http://webreference.com/authoring/style/sheets/headlines/6.html