1. CSS
  2. Flash
  3. HTML
  4. Illustrator
  5. Java
  6. JavaScript
  7. Maya
  8. Photography
  9. Photoshop
  10. PHP
  11. Ruby
  12. Ruby on Rails
  13. 3ds Max

CSS: Stacking Text with CSS

  1. Clicks today:
    0
  2. Clicks this month:
    0
  3. Overall rating:
    3.00/5

CSS » Tips and Tricks — over 10 years ago
Learn how to stack text with the help of the powerful CSS tag, Z-Index.

Comments

avatarJacorre over 10 years ago

Only problem with this is that they are positioned based on the page itself. If you want to use this technique for the headings of a page that contain content the content will appear right under the text. Here's another way to do it that will give more control:

The CSS would be:

text-top {

color:#099;
position:absolute;
left:-2px;
top:-2px;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;

}

text-bottom {

color:#CCC;
position:relative;
left:12px;
top:12px;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;

}

The HTML:

<div id="text-bottom">Stacking Text <div id="text-top">Stacking Text</div> </div>

avatarJacorre over 10 years ago

Oops didn't notice the left and top settings were still in the text-bottom css. You can remove those two lines since they aren't needed.

Your Comment

You must be logged in to post a comment.