Solved

How do I make typography effect like CNN's title text using CSS?

Posted on 2006-07-18
3
213 Views
Last Modified: 2008-07-03
If you guys ever watched CNN, you will notice the credit text on the bottom of the screen there are colored background to each of the letters. I was trying to mess with the css technique but can't seem to recreate the CNN credit effect. I want the background colors per letter and not per row. Please see the incorrect code below. Any help would be greatly appreciated!

<head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <title>CNN Test</title>
            <style type="text/css">
<!--
* {
      margin: 0;
      padding: 0;
}

body {
      font-family: tahoma, verdana;
      font-style: normal;
      font-size: small;
      color: #333;
}

#wrapper {
      width: 600px;
}
.cnn h1 {
      padding: 5px;
      background-color: #F1AF1A;
}
.cnn p {
      color: #fff;
      padding: 5px;
      background-color: #999;
}
-->
</style>

      </head>
      <body>
      
      <div id="wrapper"><!--  wrapper begins -->
            <div class="cnn"><!--  cnn begins -->
                  <h1>Header</h1>
                  <p>Some text that goes blah and stuff about nothing. Aldo Nova had a one hit wonder during the 80's. Your so beautiful by HIM. Thanks.</p>      
            </div><!--  cnn ends -->
      </div><!--  wrapper ends -->
      </body>
</html>
0
Comment
Question by:funhyun1
3 Comments
 
LVL 5

Accepted Solution

by:
Jezcentral earned 500 total points
ID: 17137154
Do you have a link to a page where we can see the effect you are after?

It sounds like you want to have individual letters with their own background-colors. The easiest way is to put <span class="letterTheColorYouWant"></span> round each one. That's a very long-winded way of doing it, but the most straightforward.

Jezcentral.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS measurement 10 34
Add animation to your css 12 32
stop navigation from wrapping 7 56
How to loop bootstrap columns which contain database records 9 22
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now