CSS

Center Multiple DIVs with CSS

By Louis Lazaris / May 10, 2010 / 70 Comments

At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.

Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).

CSS3 Glow Tabs

By Louis Lazaris / April 7, 2010 / 49 Comments

The other day I visited the jQuery Conference page, and immediately fell in love with the beautiful design and CSS3 technique applied to the tabbed navigation on that page. Visit the site in a Webkit-based browser (Chrome or Safari) or Opera 10.5, and you’ll see a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs.

But that’s not all; they’ve also applied some rounded corners and gradients to complete a very nice effect. All with no images — just progressively enhanced with CSS3 so it degrades in non-supportive browsers. I immediately set out to recreate the effect, and I thought I’d write it up so you can see how CSS3 can create intuitive and beautiful interfaces with no images.

How to Dynamically Highlight Content Like Wikipedia Using CSS3

By Louis Lazaris / April 5, 2010 / 18 Comments

If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: (1) the link brings you to the footnote section at the bottom of the page; and (2) the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.

This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point.

In this brief tutorial, I’ll show you how it’s used, and also provide a quick little JavaScript solution that can be added to an IE-only external script to get it to work cross-browser. IE (all three versions) is the only browser that fails to offer support for this very practical CSS3 feature.

Recreating CNN’s Beveled Navigation Buttons with Pure CSS

By Louis Lazaris / February 25, 2010 / 17 Comments

When CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.

I think this is a common-known technique among experienced developers, but many beginning web designers will probably resort to images to create this effect, which is not necessary. So, in this brief tutorial I’ll show you how to create a navigation bar with beveled edges using pure CSS, identical to that on CNN.

A Stationary Logo That Changes on Page Scroll with CSS

By Louis Lazaris / January 18, 2010 / 41 Comments

The Econsultancy marketing blog has an interesting little effect using CSS that causes their logo to change when the page is scrolled. Visit their page and scroll down. You’ll notice the logo changes from a solid version to an outline version.

If you know CSS fairly well, or have investigated some of the sites on css Zen Garden, then you’re probably aware that this technique uses the CSS background-attachment property.

The Right Way to Add Custom List Markers to Unordered Lists

By Louis Lazaris / November 20, 2009 / 4 Comments

Most experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.

Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:

CSS Opacity That Doesn’t Affect Child Elements

By Louis Lazaris / July 28, 2009 / 27 Comments

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

First, here is the CSS code necessary to make an HTML element semi-transparent:

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript

By Louis Lazaris / July 15, 2009 / 10 Comments

One particular design trend that has caught my attention of late on web development and graphic design blogs is the fancy gray border that surrounds images in blog posts. There are subtle variations of it around the web, which you can see on a number of blogs and tutorial sites.

Sometimes it’s just an image with a solid border and slightly lighter shaded background. Elsewhere it’s a linked image with the same effect, plus a rollover state that changes the color of the border and/or background. And sometimes it’s seen in the ads on a design blog.

How To Put a Multi-Line Indent on a Styled Blockquote

By Louis Lazaris / May 28, 2009 / 12 Comments

This brief and easy tutorial provides a method to indent multiple lines of text around a background image on a styled <blockquote> element.

When I wrote the previous post, listing 25 Classic web design articles, I included a styled <blockquote> for each of the listed articles. This is obviously nothing new; virtually all design blogs have a fancy blockquote styled with a double quotation mark in the background or something similar.

But when I was laying out the blockquote in Photoshop, I didn’t like the way it looked with the entire left side indented. Here is how I originally intended it to be:

How to Style a “Call to Action” Area with Minimal Code

By Louis Lazaris / April 21, 2009 / 2 Comments

Doing front-end development for a full service web design company means I’m often involved in very high-end, corporate websites that require styling “call to action” (CTA) or “promo” areas on the home page. These areas usually consist of 3 or 4 boxes that are most likely going to change at some point, and the client might even ask for one or more of the CTA boxes to include dynamic content. What is often troublesome about these boxes is that, more often than not, they don’t contain consistent content. They might have different colored titles, different background images, variations in text size, and so on.

If we’re not careful, our CTAs can suffer from divitis, too many attributes, and CSS-overload. In this tutorial, which is mainly aimed at CSS beginners, I’ll teach you how to create a nice clean CTA that is easy to modify and contains minimal styles and markup.