Solved

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

Posted on 2006-07-18
3
217 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

735 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