Solved

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

Posted on 2006-07-18
3
220 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

626 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