Some Pure CSS Headline Effects

Writing Headline of your site in a new way

Headline is probably the most important part of your website or a blog. It should be attractive cause headline generates interest in user to read the info below it. So its vital to have an attractive headlines. Below we will see some of the CSS techniques you can use to make your headlines better and attractive.

demo Source code

Glossy Headline

This effect works with white background or light colors backgrounds. Below is the HTML & CSS code for it.

Code is pretty simple first we first write an <H1> tag and then write the text we want to give a  glossy look. Next we add a <span></span> tag before the text. So that’s all the markup we need. Now lets style it.

.glosshead: This is the basic styling for the font, font size and color of the headline. One important property is position:’relative’. We will see later why we added that property.

.glosshead span: This is the class for the <span> tag we added. The span makes the gloss. First we make it a block display and position it absolutely.

Note: We had earlier used a property called position:relative so that when we absolutely position the span inside it it takes the <h1> tag as its parent and positions the span accordingly.

Then we add a background color, width and height to it to it.

The box with the green outline is our gloss. Its been highlighted to show the gloss area.

Now for the gloss magic. We will use a property called opacity and set its value to 0.2. It means set opacity of the specified element to 20%. For IE we will use the opacity filter called alpha, it works the same way as opacity. Below is the code and the final result.

Cons: The limitation to this effect is that it works with only white or light colored backgrounds. On darker backgrounds the span box will show as a semi-transparent box. But on light backgrounds it looks absolutely awesome.

Reflected Headline

This effect only works with alphabets that symmetric horizontally. The reflection is not real but a trick to imitate reflection. Below is the HTML CSS of the effect.

In the markup we add a <span></span> before the header text and also write the same text in the span as well. We then add a class called refhead to it.

The markup is done now we need to style it up.

.refhead: This calss gives the basic styling to the markup. Again we position it relative so that we can place the span absolutely.

.refhead span: This is the class which will produce the reflection. First we absolutely position it. What is does is superimpose the span on the <h1> text and you will see something like below.

Now to place the reflection. We need to add a property top to a suitable value to match reflection level. To do that we have added a top value of 44px. You should see something like below.

Now to add the reflection effect. Again we use the opacity property to fade it out and for IE we will use the alpha filter.

Drawback of the effect is that it works with only symmetric alphabets and other thing is that you have to write text twice once for the main part and once again for the span which works as the reflection.

Drop Shadows

We are using a CSS  property called text-shadow, it has been around the block since the advent of CSS2, but not too often used. It looks really good if used correctly. Below is the code on how to drop shadow.

Text-shadow: Text shadow has some parameters which we need to understand to use it. We have used it in our example like this “text-shadow: #777 3px 3px 1px;”.

• The first parameter is the color of the shadow.
• Next is the X-offset, it specifies position of the shadow on X-axis.
• Then comes the Y-offset which specifies the shadow co-ordinate on the Y-axis.
• Next Value is for the blurriness of the shadow. Its an optional parameter, if its not specified the shadows are sharp.

Text-shadow is not IE compatible. So for IE we use a filter called DropShadow. Parameters are similar as of text-shadow its written in this format

filter:DropShadow(Color=shadow color , OffX=X offset, OffY=Y offset, Positive=1);

• Color: Color specifies the shadow color.
• Offx: It specifies x co-ordinate of the shadow.
• Offy: It specifies y co-ordinate of the shadow.
• Positive: Its non-zero value create drop shadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.

Making first letter Different

This is quite a handy technique and gives nice result. Below is the code and explanation on how to do it.

In The Markup we have wrapped the first alphabet in a <span> tag and then we add a class called twofonts to the <h1> tag.  Now we will style it.

.twofont: This provides the basic styling of the h1 tag. We have added a property line-height with a big value of 300% why we have done that will be explained in the next step.

.twofont span: This class is for the first alphabet which is in the span. We have changed its font and color and added a border to it and its done.

Now if the line height is not set to 300% or a different suitable value the headline would not look right. Below is the output of what you will see.

One of the reasons this happens is because the overflow of h1 is set as hidden. The height of span tag becomes more than the h1 tag and it clips off the top and bottom borders.

One question arises though, i.e. what if we remove the overflow property. Well it does give the results but in IE you will see something as below.

So its really important to set the overflow to hidden & the Line height of the h1 to a suitable value so that the bigger alphabet doesn’t get clipped off. When we add these properties back we get the desired result.

Conclusion

Heading are essential part of any information and if proper emphasis is given to them it can make you win and engage people to read your sites. I hope you enjoyed the tutorial. Some more stuff on fonts and different technique will be coming this year on the blog.

demo Source code