How to: CSS Large Background 495

How to: CSS Large Background

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

CSS Decorative Gallery 548

CSS Decorative Gallery

Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

View Demo Gallery

Download Demo ZIP

jQuery Tutorials for Designers 1,131

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don't know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I'm not going to get into the details of the CSS.

Note: the version used in this article is jQuery 1.2.3

View jQuery Demos

Download Demo ZIP

CSS Gradient Text Effect 483

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

View Demos

Download Demo ZIP

CSS: The All-Expandable Box 152

CSS: The All-Expandable Box

In HTML, if you don't specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it's list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.

View Demo Expandable Box

Download Demo ZIP

Advanced CSS Menu 612

Advanced CSS Menu

Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

View Demo CSS menu

Download Demo ZIP

FALL LOVE: 20% FALLSALE coupon code & 40% affiliate commission boost at Themify (details)