20 Ultimate CSS Tutorials That Will Help You Master CSS

Design

December 30, 2008

CSS can be simple to code but there are few concepts which can really make any coder go mad. We have collected a list of 20 really tricky yet easy to understand CSS tutorials to help you learn and master the tricks of CSS.

If you know more CSS tutorials that dazzle then please leave a link of it in the comments section and we will try to feature them too. You may also like to subscribe to our RSS Feeds to stay updated with the, latest articles and events at Dwsmg.com

1. CSS Tabs and Navigation

1.1 Expandable CSS Tabs Tutorial

Expandable CSS Tab increase their size accoring to the size of the text. In it basically two images are used named start.gif and end.gif. The start.gif image is used to expand the size and the end.gif image stay same.

1.2 Advanced CSS Menu

This tutorial showed you how to design a watercolor effect menu in Photoshop. This tutorial 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 list menu utilizing the CSS position property.

1.3 CSS Based Navigation

The goal of this tutorial is to make a CSS based navigation which brings itself to the front as it is highlighted.

1.4 CSS Fancy Menu

In this article you’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

1.5 Sliding Doors

Here, we’ll cover a new scenario where no tab is highlighted, combine Sliding Doors with a single-image rollover, provide a fix for the clickable region in IE/Win, and suggest an alternate method of targeting tabs. We’ll skip a basic recap of the technique (see Part I for this) in favor of jumping right back in where we left off.

1.6 CSS Vertical Navigation with Teaser

In addition to adding teaser information to the navigation, this technique can be modified to add descriptions to any element of page. You could add teaser descriptions to profile names, question-and-answer type FAQ pages, navigation, or a multitude of other applications.

1.7 Overlapping Tabbed Navigation in CSS

A tutorial showing how overlapping tabbed navigation is possible in CSS and can be cross-browser compatible, accessible and javascript free.

2. CSS Rounded Corner

2.1 Box– Rounded Corners for All

The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. Oh yeah, and to make sure they could resize while keeping their backgrounds intact. The important relevant XHTML and CSS for the first box on this page is directly below the box.

2.2 Rounded Corners in CSS

the subject of rounded corners in CSS came up so I showed him my method. There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. Here’s how I do it.

3. CSS Photo Gallery

3.1 Hoverbox Image Gallery

It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. While my example page only has # linked to, this could easily be pointed to a full version of the respective images, or a website if you decide to use it for a design portfolio. For now, it uses photos taken by family and friends.

3.2 Cross Browser Multi-Page Photograph Gallery

Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.

Unlike the Suckerfish HoverLightbox this version does not use javascript but is pure CSS and still works in IE.

3.3 Sliding Photograph Galleries

This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

4. CSS Shadows

4.1 CSS Drop Shadows : Fuzzy Shadows

In this article we’ll learn how to:
Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.
Coerce IE5.5/IE6 into displaying PNG transparency correctly.
Use the above to create fuzzy shadow edges for our Drop Shadow effect.

4.2 CSS Shadows (CSS Shadows Roundup)

In this article, we’ll see yet another technique. Most of the existing techniques use negative margins, while I’ve presented almost one year ago on pro.html.it, the italian portal I write for, a really simple version wich uses relative positioning. Thought I’d share it here, with some variations.

5. Other CSS Tips and Tricks

5.1 IE Double Float Margin Bugs

I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple.

5.2 CSS Cross Browser Transparency

Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.

5.3 Collapsing Tables: An Example

Each of the tables below has a class called “footcollapse” which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.

5.4 Content Overlay with CSS

When you hover over the container, a new container is displayed over the existing content. The trick here is the use of position:relative to allow the static content to appear over absolutely positioned content.

5.5 CSS Zooming

I’ve recently been working on some concepts for a redesign of a site that uses a text-resizing widget. The audience for the site is primarily seniors, so large text is important. And, before you start shouting that people should use their browser’s built-in support for this, many visitors to the site are unaware of such wonderful tools and really appreciate a solution built into the site.

5.6 CSS On-Hover Image Captions

This is a combination of the image caption and the teaser technique, I nested the caption of our image within a hyperlink. What I want to do, is hide the caption until the user hovers over the image.

Sites Where You Can Find More CSS Tips and Tricks

1. 70 Expert Ideas For Better CSS Coding.
2. 20 Websites To Help You Learn and Master CSS.
3. 50 Extremely Useful And Powerful CSS Tools.
4. Are You Making These 10 CSS Mistakes?.
5. 25 Website Designs To Draw Inspiration From.
6. CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices.
7. 100 Web Design Template Sources, Tools and Resources.
8. 15 of the Best CSS Zengarden Designs.
9. 26 Best ways to implement AJAX, CSS and Javascript based Tabs.
10. 21 Ways to Streamline Your CSS.

(8 votes, average: 5 out of 5)