Web design articles, tutorials, and more.
To make the web impressive.
CSS
Recreating CNN’s Beveled Navigation Buttons with Pure CSS
By Louis Lazaris on February 25th, 2010
Categories: CSS, Web Design Tutorials | 10 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 on January 18th, 2010
Categories: CSS, Web Design Tutorials | 31 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 on November 20th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 3 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 on July 28th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 13 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 on July 15th, 2009
Categories: CSS, Graphic Design, JavaScript & jQuery, Web Design Tutorials | 3 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 on May 28th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 9 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 on April 21st, 2009
Categories: CSS, XHTML | 1 Comment >
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.
