Solved

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

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

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

772 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