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 14 years ago
Learn how to stack text with the help of the powerful CSS tag, Z-Index.

Comments

avatarJacorre over 14 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 14 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.

avataryeoyeo 10 months ago

you are soo inspiring! thanks for this! denver doula

avatarhayedia 5 months ago

I've been browsing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be a lot more useful than ever before. More Info At: קידום אתרים

Your Comment

You must be logged in to post a comment.