Posts Tagged ‘line-height’

Line-height Effect

Line-height Effect

written by: jason

I accidentally came across this effect that I use for my sidebar headings. Notice how the text seems to “fall out” of the background. This is achieved not with background images, but css. And it’s pretty simple to accomplish. Here’s what we’re after.

Heading Title

First, you need a little html to call in your css. For this example, I’ll use this:

  1. <h3 class="heading">Heading Title</h3>
<h3 class="heading">Heading Title</h3>

That ought to do it. Now you’ll need to style it in your css with a class of “heading”. Here’s the css that styles it.

  1. .heading {
  2.     color: #fff;
  3.     height: 45px;
  4.     line-height: 135%;
  5.     font-size: 400%;
  6.     text-transform: uppercase;
  7.     background: #000;
  8.     padding: 5px;
  9. }
.heading {
	color: #fff;
	height: 45px;
	line-height: 135%;
	font-size: 400%;
	text-transform: uppercase;
	background: #000;
	padding: 5px;
}

I’m using a class instead of an id because I want to be able to use it on ALL my sidebar headings. And everyone knows that id’s are used only once on a page and class can be used as many times as you’d like.
OK, the main points to remember here are that you have to give the div a height (in our case 45px). That keeps it from expanding when you bump up the line-height. And that brings us to the line-height property. I’m using 135% but you may need to play around with that until you reach the number that best suits your needs depending on the height you gave. That’s it!

If you want to get REALLY fancy, you can add a text-shadow to the css and get something like this:

Heading Title

Add this to the css for the shadow:

  1. text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;