|
CSS Tip:
Creating Logos Using CSS
by Larisa Thomason,
Senior Web Analyst,
Keynote NetMechanic
Before most browsers reliably supported CSS formatting, designers had to place text inside an image if they needed a special background color, size, spacing, or other formatting not supported by basic HTML.
Fortunately, you can now use cool text effects to create simple logos and other content using Cascading Style Sheets instead of images.
Create A Text Logo
We'll start by creating a class called "TheaterLogo" and then using an inline style definition for the site's tagline. Remember that the tagline is important: it's where you state your site's value proposition!
<style type="text/css">
.TheaterLogo
{
background-color : white;
border-style : outset;
border-color: red;
border-width:7px;
height:85px;
width:350px;
color:maroon;
font-weight:bold;
font-family: "Comic Sans MS", sans-serif;
font-size:28px;
text-align:center;
}
</style>
This creates a logo with a white background, a rather thick red border, uses maroon text, aligned to the center, where the preferred font is Comic Sans font. The font will be 28 pixels in size and displayed in bold face. The height and width properties are determined by the amount of text you need to include and your page layout constraints.
Here's how you add it in the BODY section of your document:
<div class="TheaterLogo"> Calhoun Little Theater<br>
<span style="font-size:18px;text-align:none">Amateur
theatrical productions....
<br> professional
quality!</span></div>
Add A Background Image
If you want to get really ambitious, you could even add a background image to create your site logo. It adds more visual interest without much extra download time.
Since you aren't making the text, border, and background color part of the image, visitors with images turned off will still see something more interesting than just ALT text.
Add a background image using the background-image property. Stop the image from tiling by setting the background-repeat property to the "no-repeat" value.
<style type="text/css">
.ImageLogo
{
text-indent: 25px;
font-style: oblique;
color: navy;
font-weight: bold;
font-family: arial;
font-size: 28px;
background-image:url('sunriseSmall.gif');
background-repeat: no-repeat;
background-color: white;
height:80px;
}
</style>
Then, include it on your page - again using the DIV tag:
<div class="ImageLogo">
<span style="font-size:14px;"> <br></span>
<p>SunRise Coffee<br>
<span style="font-size:18px; color:maroon;
line-height:14px; font-weight:normal;">
<br>Shade-grown coffee ground fresh daily</span>
</div>
In this case, we used white as a background color, but you may want to choose a different color that will complement the rest of your site's color choices. Even if visitors are surfing using a graphical browser, there's always the chance that the background image may not load. Just in case, be safe and choose a complementary background color that works well with both the background image and the text.
Note how we use the SPAN tag first to place the company's name on the logo. Then, another SPAN tag reduces the size of the tagline text and changes the alignment. That gives the tagline a different "look" than the theater's name.
There's no "best" way to accomplish this! It's always dependent on your site's individual name, logo, layout, and look and feel. Get ready to spend some time experimenting and testing in different browsers to achieve the best effect.
Here's an example page that shows various ways to use these techniques. View the page's source code to see exactly how we achieved the desired effects.
Do Thorough Browser Testing
Be extremely careful with this technique. Your site logo is one of the major branding tools for your site. Make sure the logo will still look ok if the background image fails to load. Choose your fonts carefully: if visitors don't have the required font installed, their browser will use its default font instead.
And be sure to test the page in multiple browsers! Here's how the logo with the background image appears in different browser versions. Amazingly, it even looks decent in Netscape 4.7!
Here's a sample:
Although browsers now present CSS much more reliably than even a year ago, they all have certain quirks that can cause display problems. Test your page in every browser and browser version you can to make sure that visitors see it as you expect.
The easiest way to do this is with Browser Photo. It shows you actual screen shots of your Web page in 16 different browsers, browser versions, and operating systems. Don't wait for visitors to report your page errors. Find them first - and fix them! - with Browser Photo.
We've covered other CSS effects in previous newsletter stories. Review them for more ideas about how to:
|
