How do I make typography effect like CNN's title text using CSS?
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>
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.