Posts Tagged ‘css’

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;
Adding “Box of Color” Behind List Links

Adding “Box of Color” Behind List Links

written by: jason

I’m not sure how to describe this, but you may have seen it in action in a sidebar. When you hover over a text link a colored background appears behind the text. It’s easy to accomplish, and I think it looks clean. So how do you do it? Here’s how.

First of all, you need a properly coded html list like so:

  1. <ul>
  2.     <li><a href="#">list item 1</a></li>
  3.         <li><a href="#">list item 2</a></li>
  4.         <li><a href="#">list item 3</a></li>
  5. </ul>
<ul>
	<li><a href="#">list item 1</a></li>
        <li><a href="#">list item 2</a></li>
        <li><a href="#">list item 3</a></li>
</ul>

The ul is the tag for an unordered list, the li is the tag for list item and the a href is an anchor tag.

And here is the css:

You will need to add styles to each of these – plus the hover state to the anchor tag – to make it work. I’ve commented the most important parts. Don’t forget to set the anchor tag to a block element. If you don’t, the color will only extend the width of the text and not the entire width of the ul.

  1. ul {
  2.     width: 300px; /*overall width of the list */
  3.     padding: 0; /*zero out the padding*/
  4.     margin: 0; /*zero out the margin*/
  5. }
  6.  
  7. li {
  8.     list-style: none; /*takes the bullet off the list item*/
  9.     padding: 5px 0px;
  10.     width: 300px;
  11.     border-bottom: 1px solid #707070;
  12.     height: 20px; /*have to give a height here and on the li a */
  13.     margin-bottom: 5px;
  14. }
  15.  
  16. li a {
  17.     font-size: 120%;
  18.     line-height: 130%;
  19.     font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
  20.     display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
  21.     height: 10px; /* height is need here also */
  22.     width: 300px;
  23.     padding: 5px 0 5px 5px;
  24. }
  25.  
  26. a:hover {
  27.     background: #9bb716; /*makes the background green on hover*/
  28.     text-decoration: none;
  29.     color: #fff;
  30.     width: 300px;
  31. }  
ul {
	width: 300px; /*overall width of the list */
	padding: 0; /*zero out the padding*/
	margin: 0; /*zero out the margin*/
}

li {
	list-style: none; /*takes the bullet off the list item*/
	padding: 5px 0px;
	width: 300px;
	border-bottom: 1px solid #707070;
	height: 20px; /*have to give a height here and on the li a */
	margin-bottom: 5px;
}

li a {
	font-size: 120%;
	line-height: 130%;
	font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
	display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
	height: 10px; /* height is need here also */
	width: 300px;
	padding: 5px 0 5px 5px;
}

a:hover {
	background: #9bb716; /*makes the background green on hover*/
	text-decoration: none;
	color: #fff;
	width: 300px;
}