3D Text with CSS3 text-shadow

Here’s a fun way to make text look 3D using CSS3. Using CSS whenever possible instead of images has several key advantages, including faster page-loads and better SEO I use the CSS text-shadow technique in a previous theme, and a few people had asked about it, so here it is: everything you need to create your own stunning 3D-text with CSS3..

Here’s a quick table of contents:

• Basic 3D text-shadows with CSS3
• Example of 3D logo with hover effect
• Using CSS vs. images
• Browser support
• More text-shadow examples

Basic 3D text-shadows with CSS3

To make text look 3D with CSS3, we take advantage of text-shadow’s ability to handle multiple values. So you sort of “build up” your 3D styles with something basic such as:

It is the amazing 3D text example!

   text-shadow: 0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;

These text-shadow values use the same syntax:

text-shadow: h-shadow v-shadow blur color;

So the first property value creates a 1px layer of shadow directly beneath (and closest to) the text example. Subsequent values create additional 1px layers that gradually change color, from light to dark. To further the effect, we put 1 pixel’s worth of “blur” on the innermost shadow layer, and then top it off with a nice, seven-pixel blur to sort of “blend” it all together.

A great way to get the hang of 3D text-shadows is to just copy & paste from the example and tweak the colors, blurs, and offsets. Hint when going for the 3-dimensional look: “tweak vertically” down each column of values to keep things “lined up”.

Example of 3D logo with hover effect

For a more elaborate example of 3D text-shadow, here is my site logo as styled in the horrible previous Unicorner theme:

Perishable Press

Here’s a screenshot for those without JavaScript (custom-fonts):

3D logo used in the ‘Unicorner’ theme

Here is the CSS code used to create that fancy 3D logo:

#example-theme a:link, #example-theme a:visited {
	color: #000; font: 48px/1 'Erica One';
	text-shadow: 0 1px 1px #bbb,
			   0 2px 0 #999, 
			   0 3px 0 #888, 
			   0 4px 0 #777, 
			   0 5px 0 #666, 
			   0 6px 0 #555, 
			   0 7px 0 #444, 
			   0 8px 0 #333, 
			   0 9px 7px #302314;
}
#example-theme a:hover, #example-theme a:active {
	text-shadow: 0 1px 1px #ddd,
			   0 2px 0 #c5bba4, 
			   0 3px 0 #c5bba5, 
			   0 4px 0 #b7ae98, 
			   0 5px 0 #a39a87, 
			   0 6px 0 #8b8472, 
			   0 7px 0 #726c5c, 
			   0 8px 0 #5b5547, 
			   0 9px 7px #474136;
}

If you look at the source-code, you’ll notice a few other rules in play; these are used for display purposes (to “undo” styles from alternate themes. These may be safely ignored — you should only need the code provided above, where the first block of CSS sets the :link and :visited styles, and the second one defines :hover and :active, respectively. As with the basic example, further modification and customization is encouraged 🙂

Using CSS vs. images

Here are some key factors in deciding when to use an image for 3D effects versus styling actual text with CSS text-shadow:

use an image..	or use text-shadow..
pixel-perfect rendition/display across browsers	browser support required, and display across browsers may vary
advanced styles & effects	many cool text-shadow effects possible
larger in size, tend to require more bandwidth	less code, even complex styles relatively lightweight
requires an extra HTTP request	code only, requires no extra HTTP HTTP request
anchor text is not selectable, but possible to use image-replacement for SEO	anchor text is selectable, so keywords available for search engines and visitors (e.g., copy/paste-able)
updating/tweaking requires new a image	easy to update or tweak by fiddling with CSS

In general, images are great when you can’t do it with CSS, or when cross-browser consistency is critical. Other situations may also apply — designer discretion is advised.

Browser Support

The good news is that CSS3 text-shadow is supported by just about every major browser; and of course the bad news is that Internet Explorer isn’t one of them. The not-so-bad news, however, is that you can get text-shadow support in IE with a variety of techniques.

More examples..

To continue with more copy/paste examples of CSS3 text-shadow, this quick reference guide should get you going:

• Examples of CSS3 text-shadow property

I’m know there are other good resources out there, so let me know of any favorites and I’ll add them to the list.

Thanks for reading! 🙂

Wrapping Long URLs and Text Content with CSS

To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags):

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

See demonstration

Explanation

By default, the white-space property is set to normal. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap:

To force long, continuous strings of text to wrap within the width of our <pre> content (or other block-level element, such as <div> and <p>), we need a different value for the white-space property. Here are our options:

• normal – Default value for the white-space property. Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces according to the width of the element.
• nowrap – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap to the next line ONLY at explicit <br /> elements.
• pre – All whitespace is preserved. <pre> content will wrap at implicit line breaks. This is the default behavior of the <pre> element.
• pre-line – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces and line breaks according to the width of the element.
• pre-wrap – All whitespace is preserved. <pre> content will wrap at whitespaces and line breaks according to the width of the element.
• inherit – Value of white-space inherited from parent element.

In a perfect world, we could simply use white-space:pre-line, like so:

pre {
	white-space: pre-line;
	width: 300px;
	}

Although the white-space property is supported by all major browsers, unfortunately many of them fail to apply the property to long strings of continuous text. Different browsers will wrap long strings, but they require different white-space values in order to work. Fortunately, we can apply the required values for each browser by including multiple white-space declarations in our pre selector. This is exactly what we are doing with the CSS code solution presented at the beginning of this article.

The comments included in the CSS solution explain which declarations are targeting which browsers. Notice that some of the rules are browser-specific (using vendor-specific prefixes), while others declare standard values from different CSS specifications. The funky word-wrap property is a proprietary Microsoft invention that has been included with CSS3. And thanks to the CSS forward compatibility guidelines, it’s perfectly fine to include multiple instances of the same property. In a nutshell:

• Unrecognized properties are ignored
• For multiple instances of the same property, only the last rule will be applied

The code solution presented in this article seems to work fine in every browser I have tested, but it doesn’t validate because of the vendor-specific stuff and the crazy Microsoft thing.

For more complete discussion on text wrapping and all the gruesome details, check out Lim Chee Aun’s excellent post on whitespace and generated content. And, for a complete guide to pimping your site’s <pre> content, check out my article, Perfect Pre Tags.

Here again is the demonstration page for this CSS technique.

Make your website faster: Adding Javascript and CSS files at run time

If you want to load your website faster and have good ranking for your website in y-slow of similar tools please go through this tip.
I have discovered a technique for adding javascript and CSS files at run time, it has been checked in various ways and I am also giving the sample code to test.
All you need to is 10 mins which would be required to go through this tip and code snippet but at the end of it you would have known how to make a website faster and get it good y-slow ranking.

At the time of loading a website we need 20 to 30% or max 40% Javascript of the application while the rest 60 to 70% would be required later on. Same for CSS files too, only a smaller part of the code is essential during loading. But if we can implement a technique in which we can load the required Javascript
and CSS at the time of load of the page and add the rest Javascript or CSS files later if required – then we can meet our objective or making our website less bulky and much faster.

Broadly, there are three steps that we should be following :

1. We have to split javascript and CSS files to number of files depending or different functionality. 

2. Only add the required Javascript and CSS files to your webpage
3. Add required Javascript and CSS files after page load on run time.

How to add Javascript file

    var path    = “javascripts”
var script  = document.createElement( ‘script’ );
script.src  = path + ‘/js1.js’;
document.getElementsByTagName( ‘head’ )[0].appendChild(script)

Here “javascripts” is the path where we are keeping javascript file and the file name is “js1.js”  through appendChil;d on head we are adding the
required Js files to webpage head section

How to add CSS file  

   var path   = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type  = ‘text/css’;
style.href  = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );

Here in the same way we are adding the CSS file to website on runtime.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>Abinash’s new Concept</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script src=”javascripts/main.js”></script>
</head>
<body>
<input type=”button” name=”check1″ id=”check1″ value=”box1″ onClick=”showbox(‘box1’)”>
<input type=”button” name=”check2″ id=”check2″ value=”box2″  onClick=”showbox(‘box2’)”>

<div style=”display:none;” id=”box1″>
<input type=”button” onClick=”function1()” value=”Box1 function1() call in (js1.js) file”>
</div>
<div style=”display:none;” id=”box2″>
<input type=”button” onClick=”function2()” value=”Box2 function2() call in (js2.js) file”>
</div>
</body>
</html>

 

/*
Description : here i have taken two buttons ( name=”check1″  & name=”check2″ ) and two hidden divs ( id=”box1″ &  id=”box2″)onclick
of a button it will hide one and open one div , the div’s has some classes defined in style.css file each div’s has one one buttons and it has
some onclick event which we are keeping in js1.js and js2.js files – If you will think slightly we do not need the js1.js and js2.js files on load
If you see the page we only need the javascript onclick functions called  showbox(boxid) at page load
*/

Javascripts/main.js

var is_js1 = 0;
var is_js2 = 0;
var is_css1 = 0;
function showbox(id)
{
if(id == ‘box1’)
{

  //adding css
  if(is_css1 == 0)
{
var path  = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type   = ‘text/css’;
style.href   = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById(‘box2′).style.display=’none’;
document.getElementById(‘box1′).style.display=’block’;

  /***********Add JS**********/
  if(is_js1 == 0)
{
var path   = “javascripts”
var script   = document.createElement( ‘script’ );
 //style.rel   = ‘stylesheet’;
//style.type   = ‘text/css’;
   script.src   = path + ‘/js1.js’;
 //style.media  = ‘screen’;
   document.getElementsByTagName( ‘head’ )[0].appendChild( script );
is_js1 = 1;
}
}
else
{
 //adding css
  if(is_css1 == 0)
{
var path  = “css”;
var style   = document.createElement( ‘link’ );
style.rel   = ‘stylesheet’;
style.type   = ‘text/css’;
style.href   = path + ‘/style.css’;
document.getElementsByTagName( ‘head’ )[0].appendChild( style );
is_css1 = 1;
}
document.getElementById(‘box2′).style.display=’block’;
document.getElementById(‘box1′).style.display=’none’;
  /***********Add JS**********/
if(is_js2 == 0)
{
var path   = “javascripts”
var script   = document.createElement( ‘script’ );
//style.rel   = ‘stylesheet’;
//style.type   = ‘text/css’;
script.src   = path + ‘/js2.js’;
//style.media  = ‘screen’;
document.getElementsByTagName( ‘head’ )[0].appendChild( script );
is_js2 = 1;
}
}
}

/* [ Description on page load we need this function here we are hiding and showing divs but here we are also adding css and javascript files
I took 3 Gobal variables to check wheather a file already added or not, if added it will not add those files again to webpage ] */

javascripts/js1.js

 

function function1()
{
alert(“box1 function”);
}

 

/*[ Description : this is the js file holding the function for <input type=”button” onClick=”function1()” value=”Box1 function1() call in (js1.js) file”> in index.html]*/

 

Javascript/js2.js

 

function function2()
{
alert(“box2 function”);
}

 

/*[ Description : this is the js file holding the function for <input type=”button” onClick=”function2()” value=”Box2 function2() call in (js2.js) file”> in index.html]*/

 

css/style.css

 

.myclass
{
border:2px solid #CC6600;width:400px; height:40px;
}
.myclass2
{
width:400px; height:40px; border:3px solid green;
}

 

/* [ Description : In this file we are keeping the class of box1 and box2 of index.html ] */

***********************************************
End codes
***********************************************

 

Please create these files in your local or load existing one and open your firebug – open the head tag
you can see the main.js only added now click on the first button you can see the js1.js and style.css added to your head tag, it opens the div and div has the css class property and by clicking on the box1 button it is alerting   alert(“box1 function”); Repeat the process when you click the box2 button

 

The over all concept of mine is that we can add the css and javascript files on run time and can make websites faster and having good ranking
The good thing is that it is not requiesting the files to add, internally it is but in firebug it is not showing as a requiest 🙂

CSS Absolute Positioning

Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use

tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage.
What is absolute positioning?

Absolute positioning can be frustrating if you don’t have a sound grasp on what it is and how it works. Let’s start at the very beginning.

Every block element on a page (

,

,

, etc.) has a CSS property called position. By default, the position for these block elements is set to static. Static block elements appear in a stack on the page, from top to bottom. Here’s an example:

Div One

Div Two

Div Three

Div One
Div Two
Div Three

If you change an element’s position to absolute, however, its placement on the page is very different. The placement for an absolutely positioned element is relative to the parent of that element. What does that mean? Let’s see what happens if we take the same code from our last example and make our block elements position: absolute.

Div One

Div Two

Div Three

Div One
Div Two
Div Three

The outcome is very different! You can’t tell, but the first and second

tags are actually hiding behind the third

tag. Whenever you set an element’s position to absolute, it is automatically shown at the top-left corner of the parent element (* see notes about relativity below). This isn’t very useful now, but we can apply this technique to create a variety of simple and effective layout styles.
Positioning

Our last example wasn’t very practical simply because all of our

tags were stacked on top of each other. Using the top, bottom, left, and right properties, we can position absolute elements anywhere we’d like. Let’s try it out.

Div One

Div Two

Div Three

Div One
Div Two
Div Three

Now that’s a little more practical. The first and second

tags are positioned using pixels from the top, left, and right sides of their parent element (the gray box). I positioned the third

tag a little differently just to demonstrate how you can use all the different measurement units that CSS has to offer in order to position absolute elements (px, pt, em, and %).
Relativity

The most difficult and confusing aspect of absolutely positioned elements is figuring out relative positioning. Unless you specify otherwise, your absolute

tags will be positioned relative to your entire HTML document (i.e. the very top left corner of your browser window). Basically, when your browser is trying to render an absolutely positioned element, it traces upward through your HTML hierarchy until it finds a parent element that uses relative positioning (position: relative). If you haven’t set any elements to position: relative, then the tag is used by default. Always set the outer element to position: relative:

Contact Us / Register / Log Out

Contact Us / Register / Log Out
Relative Parent Height

If you place an absolutely positioned element on a page, it does not have a layout height associated with it. That means that even though your absolute DIV is 150 pixels tall, it will not bump the rest of your page down by 150 pixels. Here’s an example:

Div One

Div One

The easiest way to avoid this is to set the parent element’s height to a fixed value. This should clear up any layout height issues because you’ll always have space for your absolute elements. For instance:

Div One

Div One
Absolute vs. Floating

Absolute positioning shouldn’t be used in every case. Often times, I will use it to build out a header on a page where there is a logo, search, some utility links, etc. These types of controls are pretty consistent and don’t change in size, and absolute positioning comes in quite handy. There are, however, some disadvantages to using absolute positioning. Most importantly, absolutely positioned elements don’t appears as part of the normal layout flow in your document. They have a fixed position, which often confines them to a fixed width or height. If you can’t predict the size or consistency of the content in a particular page element (for instance, a page content area where article text appears), then absolute positioning is probably not the best option.

As an alternative, you can use CSS floating to create very fluid and flexible layouts without absolute positioning. See my previous article about tableless column design to learn more about floating elements in your design.

Jul 30 2012

CSS Font-Size: em vs. px vs. pt vs. percent

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
Meet the Units

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.

In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).

Font-size as the client changes the text size in their browser.

When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict

In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.

The winner: percent (%).
Addendum (January 2011)

It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there. As long as the body is set using the percent unit, you may choose to use either percent or ems on any other CSS rules and selectors and still retain the benefits of using percent as your base font size. Over the past couple of years, this has really become the standard in design.

Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments over the course of the past two years!

Jul 30 2012

All About Table-less Column Design

There are a number of ways to create vertical columns in your XHTML design without using the

tag and the horrendous amount of HTML that always seems to accompany it. Each method listed here is superior in various situations, so choose a good fit for your particular design.
But…why?

Why do we go through all the trouble of creating table-less designs? In short, the answer is performance. At times, it may feel easier to simply drop in a table tag and quickly split your design into columns, but that’s not always the best option. Tables create a large amount of extraneous HTML that can make your pages slower for visitors to download. While it may not seem like a huge difference at first, when designing a template for a very large site, the difference can be astounding.

CSS that is defined in externally linked files is cached on client computers, meaning that anything you put in your external CSS files is downloaded only once. Once that CSS file is downloaded, it is quickly loaded on subsequent page visits, which is faster for your visitor and easier on your web server.

Why is this important? Stay with me, we’re getting there!

Generally, the content in your site changes as visitors browse from page to page, but the overall design remains the same. It is much easier (and faster) to store this persistent design information in cached files, such as images and CSS.

In a table-less column design, almost all design information is stored in cached CSS files. A design that uses tables, on the other hand, often includes some of this information directly in the HTML, forcing users to download the HTML on every page in the site. Whenever possible, site design should be done in CSS rather than in HTML; for this reason, table-less designs are the modern preferred standard in web design.
Floating Columns

The float attribute in CSS is very powerful. So powerful, in fact, that many people seem to shy away from using it. Don’t be afraid! A bad float can ruin any good design, but using them when appropriate will alleviate your HTML-table woes.
The HTML:

This is left-hand content.

Lorem ipsum dolor sit amet.

This is right-hand content.

Lorem ipsum dolor sit amet.

The CSS:

.left {
width: 60%;
float: left;
padding: 0 2% 0 0;
}
.right {
width: 35%;
float: left;
padding: 0 0 0 2%;
}
.bottom {
clear: both;
}

The Result:

Advantages:

Fluid width – allows for dynamic width (resizing)
Fluid height – matches the height of the tallest column, allowing for fully dynamic height of all columns
Disadvantages:

Floating – if you are using fixed-width columns, and if the content in a column is too wide, your columns will word-wrap within your design and stack on top of each other
Variable column height – background colors or images applied to columns will not match in height
Absolute Columns

In many cases, the floating column design does the trick quite amiably. If, however, for some reason you find yourself in a situation where you are using a fixed-width design, and you really can’t control the width of content in your site, floating columns can become a nightmare. There’s nothing worse than seeing your left-hand column disappear from your layout, only to be re-positioned at the bottom of your page! If that’s the case, you may consider using the absolutely-positioned column design.
The HTML:

This is left-hand content.

Lorem ipsum dolor sit amet.

This is right-hand content.

Lorem ipsum dolor sit amet.

The CSS:

.columns {
position: relative;
}
.left {
width: 60%;
margin: 0 35% 0 0;
padding: 0 2% 0 0;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 35%;
padding: 0 0 0 2%;
}

The Result:

Advantages:

Fluid width – allows for dynamic width (resizing)
No floating – consistent even when content is too wide to display
Disadvantages:

Minimum height – the absolutely-positioned column must always be shorter in height than the fluid column(s), else it will display on top of design elements below
Variable column height – background colors or images applied to columns will not match in height
Concerning “variable column height.”

I would like to point out that “variable column height” is listed as a disadvantage of each method. The main disadvantage in using table-less CSS column designs is that when you have two elements side-by-side, they won’t necessarily match in height. If your design requires two shaded columns to match in height, this table-less approach may not be your best option. In general, it’s best to create designs that don’t require this type of approach from the get-go. Many people try to compensate for this lack of height-matching by using repeating background images that make it appear as if the columns match in height, but I have never been a fan of adding images to do something that HTML and CSS could handle otherwise.
When all else fails…

The only time I use a table in HTML is to (1) display tabular data or (2) when I absolutely need to have two height-matching elements display side-by-side in a design. Some fanatical CSS enthusiasts would argue that this is a lame approach, but in some cases designers need to act on simple pragmatism.

If you’re in a situation where you need to use a table, please do not use extraneous HTML. The cellpadding and cellspacing attributes are not needed! You can do everything with CSS. It goes something like this:
The HTML:

This is left-hand content. Lorem ipsum dolor sit amet.

This is right-hand content. Lorem ipsum dolor sit amet.

The CSS:

.columns {
width: 100%;
border-collapse: collapse;
}
.left {
width: 60%;
padding: 0;
vertical-align: top;
}
.right {
width: 40%;
padding: 0;
vertical-align: top;
}

The Result:

It may still be a table, but it’s a minimal table if I ever saw one.

Good luck, and happy styling.

Navigation Using Unordered Lists

An unordered list (the

tag in HTML) is a great way to easily organize your site navigation with a minimal use of HTML, but how is it done? This is a simple tutorial showing you exactly how to create a simple list-based navigation menu in your site.
Vertical Menus

Vertical menus are the easiest list-based menus to create; basically all you have to do is hide the bullets and padding for your list using CSS. In the example below, we have a very simple two-level vertical navigation menu.
The HTML:

• Google
• Yahoo!
  • Yahoo! Shopping
  • Yahoo! Sports
  • Yahoo! Weather
• Amazon
• eBay

The CSS:

ul.navigation,
ul.navigation ul {
margin: 0;
}
ul.navigation li {
list-style-type: none;
padding: 0 0 0 20px;
}

The Result:

Horizontal Menus

Horizontal menus are slightly more complex than the vertical variety, but they aren’t so far removed. As you can see in the example below, the HTML remains largely the same; we’ll modify the CSS to allow the navigation list items to appear in left-to-right orientation.
The HTML:

• Google
• Yahoo!
• Amazon
• eBay

The CSS:

ul.navigation,
ul.navigation ul {
margin: 0;
}
ul.navigation li {
list-style-type: none;
float: left;
}

The Result:

The basic structure (as shown in the examples above) can be used for your site menus, but you’ll undoubtedly want to add some style and color to match the design of your site. Here are a few examples to get you started and to perhaps give you some ideas of your own.
Vertical Navigation

Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

Horizontal Navigation

Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

As you can see, we’re using CSS to add rollover effects and sub-menu background colors. You can add images and other navigation elements to take your design even further.

Five Web Design Tools You Shouldn’t Be Without

Just about every web designer uses applications like Dreamweaver, Coda, Photoshop, and the like for their work each and every day. These tools really lay a foundation for web design work, but there are a number of other applications and plug-ins out there that you may not be aware of. These tools can increase your productivity and make your job easier to boot. In an effort to alleviate your designer woes, I have come up with a list of the five most valuable (and FREE) tools that I’ve found. Your comments and supplemental suggestions are most welcome!
1. Firebug

FirebugThe no-brainer. If you’re in web development, you’re going to need a DOM inspector, and Firebug is the best there is. You’ll find it makes your job of inspecting and troubleshooting your HTML, CSS, and JavaScript much easier (no more “view source”). Firebug lets you inspect any element on your page with just a click, and furthermore, you can even change HTML and CSS properties on the fly to see how your changes will affect your design before you even implement them. In addition, you get some great script debugging tools that help you troubleshoot your AJAX, jQuery, and other scripting elements that you’ve added to your application. This is a free add-on for Firefox (if you’re not already using Firefox, please consider “the switch;” it’s simply the better browser, and add-ons like this make it even more so). For more information and features, visit GetFirebug.com.
2. Web Developer

Web Developer ToolbarWhile we’re on the topic of Firefox add-ons, let’s look at another great addition to your web developer’s toolbox. The Web Developer add-on for Firefox gives you an impressive array of tools to use at your web design disposal. This installs a toggle-able toolbar in Firefox that gives you an overwhelming amount of power to alter and view your web document in a number of different ways. View your document at different standard screen resolutions, disable CSS styles, disable and get meta information for images, disable and debug client scripting, and even view and modify file and session cookies used by the page you’re currently viewing. There’s much more to this add-on than I could ever touch here, so I implore you to read more about it at the Mozilla add-on page, which can be found here.
3. Instant Eyedropper

Instant EyedropperWeb designers need to know what colors they’re looking at on the screen. This happens all the time. Often times, I see other designers taking a screenshot of their page, opening Photoshop, and pasting the screenshot into a new image file. This can be tedious and resource intensive for something as simple as copying a six-digit hex code from your screen. One application that will make this process much more streamlined is Instant Eyedropper. This is a great little utility that puts an unobtrusive icon in your Windows taskbar. When you need to copy a color from your screen, simply click on the icon, and drag your mouse to the area on your screen where the color appears. Using a magnifying glass, you can pinpoint the exact pixel you’d like to copy the color from. When you’ve found your pixel, simply release the mouse. The color is now copied to your clipboard. It’s a marvelously simple idea, and I love the configuration options you’re given with this utility (magnification level, color formats, etc.). Unfortunately, the latest supported OS for this utility is Windows XP. It still works on newer systems, but I’ve noticed some buggy behavior on Vista, Server 2008, and Windows 7. Additionally, this utility does not support dual monitors, so you can only copy colors from your primary display.
4. HttpFox

HttpFoxThis is yet another Firefox add-on you should be interested in. HttpFox lets you quickly and easily view HTTP header information (such as post/get variables), HTTP response codes, and caching information. When something isn’t working, this is a fantastic tool to figure out exactly what the web server is sending back to your clients. I have seen a lot of similar add-ons and programs, but HttpFox really shines in terms of quality, stability, and polish.
5. IETester

IETesterThere are “browser compatibility issues,” and then there are “IE compatibility issues.” Every web designer struggles with getting their content to function and appear just as great on IE as it does on other (*ahem* “better”) browsers. Internet Explorer is in a league of it’s own, and that’s not a compliment. The various versions of IE are so numerous and so different in their rendering functionality that it becomes a cumbersome burden for designers to even attempt to achieve the oft-coveted “cross-browser” badge of honor. One problem you’ll run in to when hacking your sites to look good in IE is that it’s somewhat difficult to test multiple versions of IE on one machine. One tool that I’ve found to make this process a little easier is called IETester. This program is still in “alpha” release, so it’s quite buggy, but it works well enough to quickly test your site’s functionality and appearance in older IE browsers. The latest version, at the time of this writing, has everything from IE 5.5 all the way up to IE8 RC1. If your user demographic is heavy on the IE-side of the browser spectrum, you’ll definitely want to give this tool a shot.

Image Buttons and Accessibility

Image buttons are a fairly common occurrence in web media. As with everything else in web design, you have a dizzying arsenal of methods from which you can choose to create this type of design element, and choosing the right method can greatly aid in your design’s accessibility, performance, and SEO-friendliness.
Concerning Accessibility

Accessibility is chiefly important for a web designer (or at least, it should be). When you create your HTML, keep things as simple as possible. Assume that every single user who visits your site will (1) not have CSS support, (2) will disable all images on your page, and (3) will not have JavaScript enabled. If you design your HTML in this fashion, you’ll find that creating accessible content is much easier to do. Once you have an accessible document that works on all systems, you can use the fantastic features of CSS and client-side scripting to really bring your site to life. These “nice to have” features (style, scripting, etc.) are not essential to the structure of your document or the content that’s contained within. When it comes down to it, users are after your content, so that’s priority number one.
A Simple Example

With that in mind, let’s say we wanted to create an image that links to another page (this is so very simple, but it serves as a great example of this technique). Because we’re assuming that users have disabled all images, we certainly don’t want to use the tag for our link, because those users without image support simply won’t see it. For that reason, our link will look like any other link on the site.

Learn Guitar

I know…this is really simple, but stay with me; I promise we’re going somewhere with this. Our very simple HTML has passed our criteria: users with CSS disabled will see the link, as will users without images or script. It’s very simply an accessible link on our page, read as easily by normal users as it is by search engines or even people using screen readers. Next, for users who can utilize our “nice to have” features, we’ll add a bit of CSS to make our image appear.

.learnGuitar {
display: block;
width: 200px;
height: 50px;
background: url(‘/path/to/learn-guitar.png’);
text-indent: -9999em;
}

As you can see, we’re using the text-indent CSS property to bump our text out of the way, and in it’s place, we’re using background to set an image for our link. All you have to do for your own image is adjust the width, height, and background URL to match. What you get when you’re all done is this:

Learn Guitar
Adding a Hover Image

Easy and accessible CSS image replacement! It looks great, but let’s take it one more level to really make sure users know that our button DESERVES to be clicked. Let’s add a hover style. I’m going to use an image “sprite” for the hover image, which means that both our static and hover states are contained within the same image. Here’s my *single* image that’s used for this type of style:

Learn Guitar Image Sprite

We’ll adjust our CSS to account for our new hover image. Note that the height and width attributes will not change! The hover-state image will be “clipped,” so that it’s only visible when users move their mouse cursor over our image button.

.learnGuitar {
display: block;
width: 200px;
height: 50px;
background: url(‘/path/to/learn-guitar.png’) top;
text-indent: -9999em;
}
.learnGuitar:hover {
background-position: 0 -50px;
}

Now, when users move their mouse cursor over our image button, the CSS will “slide” the background image so that the hover state is displayed instead of the static state.

Learn Guitar

Crafting your image buttons in this fashion can really save on performance and download times. Perhaps more importantly, your site will be much more “friendly” to visually impaired users using screen readers, and you’ll find that search engines will have an easier time understanding what your links and other content are all about.

Let me know if you have any questions or comments!

Reusable Transparent CSS Rounded Corners

I decided to take a second look and write a quick post that details how I create corners today, after almost a year of evolution in the ever-changing world of web design. This is absolutely the most simple and efficient way to create rounded corners using strictly CSS and HTML.

Rounded corners are all the rage; they have been for some time now. There are pure CSS approaches to implementing this type of design, but occasionally your clients demand that your user experience be consistent across all browsers. Whether it’s time to stop using HTML and images for rounded corners is still a matter of debate. Nonetheless, I think every designer finds themselves doing this from time to time.

Say No to Images

I’ve found that many designs contain various types of rounded box styles on the same page. In my previous tutorial, this would demand that you create a separate corner image for each style of box. If you have a box with a red background, you’ll need to create a corner image with red corners. That makes sense from a visual perspective. From a data perspective, however, it’s not the best approach. If you think about it, the only thing you’re really “downloading” when you download a corner image is the curvature of your box’s edge. Wouldn’t it be better if we could somehow reuse that data on every box style everywhere else in your design?

Well, you can! How gloriously fantastic! Well…don’t get all excited just yet. There are a few limitations to this. This will only work when your rounded box appears on a solid color. For instance, the text you’re reading right now is on a solid white background. We can easily add rounded boxes to this page because of the solid color. This doesn’t really work if your background is an image or a gradient color.

Meet the Sprite

So, you have a solid background color, and you’re ready to add some rounded corner boxes to your page. The only really important thing here is your corners image. In Photoshop or an image editing software of your choice, create a square image. Basically, your image is all four box corners stuck together, so make it symmetrical. Fill your image with the background color of your page, and then delete a circle out of the middle of the square. It’s that easy! Here’s what it should look like when you’re done:

In case you’re not Photoshop-savvy, I have created a few templates that you can download and use.

• TransparentCorners-10.psd – 10×10 pixel corner image template
• TransparentCorners-15.psd – 15×15 pixel corner image template
• TransparentCorners-20.psd – 20×20 pixel corner image template

The Markup

Now that we have this nice fancy reusable transparent corner image, it’s time to create the HTML that will be used to house our beautiful box and its contents. Here’s the basic setup:

<div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<p>This is your box content. Lorem ipsum dolor sit amet.</p>
</div>

Pretty simple, right? We have an outer “box” <div/>, a <div/> for each corner, and then our content that will appear inside the box.

The Style

Our HTML doesn’t do much by itself. Most of the work to be done is going to be done in our CSS style sheet. In an attached style sheet, add the following CSS:

.box {
	position: relative;
	padding: 1em;
}
.red {
	background: #cc0000;
	color: #fff;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(/path/to/cornerImage.png) no-repeat;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: 100% 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 100%;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: 100% 100%;
}

As you can see, we’re really trying to keep this simple. Basically, we have an outer “box” style, a “red” style that sets the box’s background color to red, and finally individual “corner” styles that will automatically position themselves at the edges of our content, regardless of the height/width of that content. Groovy.

The Result

I’ve created a simple “white” background corner image for use on this page. What you get when you put all of this together is a very flexible corner system that requires very little HTML and CSS to implement:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo felis, molestie rutrum blandit vitae, pellentesque vitae risus. Nunc hendrerit eleifend lectus. Aenean interdum facilisis sem eget laoreet. Morbi in nisl nec neque auctor volutpat. Nam sodales felis id magna cursus ac pretium libero mollis.

And the coolest part…

It’s Reusable!

The coolest part about using transparent images for our corners is that we can apply these corners to just about anything on our page that we want to. For instance, I could create some additional box styles (other than “red”) by adding a bit of CSS.

.red {
	background: #cc0000;
	color: #fff;
}
.blue {
	background: #00cc00;
	color: #fff;
}
.green {
	background: #0000cc;
	color: #fff;
}
.gray {
	background: #dedede;
	color: #666;
}

After changing our box’s class (class="box blue", class="box green", etc.), we would get:

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Gray is the new “red”. Vestibulum iaculis varius laoreet. Ut et condimentum nunc. Suspendisse eleifend congue dolor, non consequat ante tristique sit amet.

That’s really cool, but this doesn’t even touch the limits of how you can apply this. In addition to solid color boxes, we could also apply this to photos and gradients (which would be much harder in a more traditional corner system). Our corners really don’t care what type of content they’re applied on, they only really care about the background color. Let’s try it out on some different page elements (accompanying HTML and CSS are included for each style):

The Mini Profile

HTML:

<div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<h3>My Profile</h3>
	<img src="kyle.jpg" alt="Me" />
</div>

CSS:

.photo {
	width: 200px;
	padding: 0;
}
.photo h3 {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	margin: 0;
	font-size: 1em;
}

My Profile

The Gradient

HTML:

<div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<p>Notice the gradient background image!</p>
</div>

CSS:

.blueGradient {
	background: url(gradient-image.png) repeat-x;
	color: #fff;
}

Notice the gradient background image! Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis posuere purus, vitae sagittis enim sodales at. Proin in purus et metus vestibulum cursus. Vivamus volutpat dolor quis lectus cursus et lobortis felis iaculis. Aenean ut enim magna, sit amet convallis mi. In hac habitasse platea dictumst. In hac habitasse platea dictumst.

We’ve accomplished all of the styles you see above using a single image and some fancy CSS footwork. This really minimizes the impact of your corners on page download times, especially if you’re using a number of different styles on a single background color. No scripts, no confusing HTML, simple markup, and a single image. Happy styling.