Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2006-07-18
3
Medium Priority
?
225 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…
Suggested Courses

660 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