Â

CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.

But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work.

The notion of a “cascade” is at the heart of CSS (just look at its name). It ultimately determines which properties will modify a given element. The cascade is tied to three main concepts: importance, specificity and source order. The cascade follows these three steps to determine which properties to assign to an element. By the end of this process, the cascade has assigned a weight to each rule, and this weight determines which rule takes precedence, when more than one applies.

Please consider reading our previous related article:

• CSS Specificity: Things You Should Know

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

1. Importance

Style sheets can have a few different sources:

1. User agent
   For example, the browser’s default style sheet.
2. User
   Such as the user’s browser options.
3. Author
   This is the CSS provided by the page (whether inline, embedded or external)

By default, this is the order in which the different sources are processed, so the author’s rules will override those of the user and user agent, and so on.

There is also the !important declaration to consider in the cascade. This declaration is used to balance the relative priority of user and author style sheets. While author style sheets take precedence over user ones, if a user rule has !important applied to it, it will override even an author rule that also has !important applied to it.

Knowing this, let’s look at the final order, in ascending order of importance:

1. User agent declarations,
2. User declarations,
3. Author declarations,
4. Author !important declarations,
5. User !important declarations.

This flexibility in priority is key because it allows users to override styles that could hamper the accessibility of a website. (A user might want a larger font or a different color, for example.)

2. Specificity

Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

Upon assessing a rule’s importance, the cascade attributes a specificity to it; if one rule is more specific than another, it overrides it.

If two rules share the same weight, source and specificity, the later one is applied.

2.1 How to Calculate Specificity?

There are several ways to calculate a selector’s specificity.

The quickest way is to do the following. Add 1 for each element and pseudo-element (for example, :before and :after); add 10 for each attribute (for example, [type=”text”]), class and pseudo-class (for example, :link or :hover); add 100 for each ID; and add 1000 for an inline style.

Let’s calculate the specificity of the following selectors using this method:

• p.note
  1 class + 1 element = 11
• #sidebar p[lang="en"]
  1 ID + 1 attribute + 1 element = 111
• body #main .post ul li:last-child
  1 ID + 1 class + 1 pseudo-class + 3 elements = 123

A similar method, described in the W3C’s specifications, is to start with a=0, b=0, c=0 and d=0 and replace the numbers accordingly:

• a = 1 if the style is inline,
• b = the number of IDs,
• c = the number of attribute selectors, classes and pseudo-classes,
• d = the number of element names and pseudo-elements.

Let’s calculate the specificity of another set of selectors:

• <p style="color:#000000;">
  a=1, b=0, c=0, d=0 → 1000
• footer nav li:last-child
  a=0, b=0, c=1, d=3 → 0013
• #sidebar input:not([type="submit"])
  a=0, b=1, c=1, d=1 → 0111
  (Note that the negation pseudo-class doesn’t count, but the selector inside it does.)

If you’d rather learn this in a more fun way, Andy Clarke drew a clever analogy between specificity and Star Wars back in 2005, which certainly made it easier for Star Wars fans to understand specificity. Another good explanation is “CSS Specificity for Poker Players,” though slightly more complicated.

Andy Clarke’s CSS Specificity Wars chart.

Remember that non-CSS presentational markup is attributed with a specificity of 0, which would apply, for example, to the font tag.

Getting back to the !important declaration, keep in mind that using it on a shorthand property is the same as declaring all of its sub-properties as !important (even if that would revert them to the default values).

If you are using imported style sheets (@import) in your CSS, you have to declare them before all other rules. Thus, they would be considered as coming before all the other rules in the CSS file.

Finally, if two selectors turn out to have the same specificity, the last one will override the previous one(s).

2.2 Making Specificity Work For You

If not carefully considered, specificity can come back to haunt you and lead you to unwittingly transform your style sheets into a complex hierarchy of unnecessarily complicated rules.

You can follow a few guidelines to avoid major issues:

• When starting work on the CSS, use generic selectors, and add specificity as you go along;
• Using advanced selectors doesn’t mean using unnecessarily complicated ones;
• Rely more on specificity than on the order of selectors, so that your style sheets are easier to edit and maintain (especially by others).

A good rule of thumb can be found in Jim Jeffers’ article, “The Art and Zen of Writing CSS”:

Refactoring CSS selectors to be less specific is exponentially more difficult than simply adding specific rules as situations arise.

3. Inheritance

A succinct and clear explanation of inheritance is in the CSS3 Cascading and Inheritance module specifications (still in “Working draft” mode):

Inheritance is a way of propagating property values from parent elements to their children.

Some CSS properties are inherited by the children of elements by default. For example, if you set the body tag of a page to a specific font, that font will be inherited by other elements, such as headings and paragraphs, without you having to specifically write as much. This is the magic of inheritance at work.

The CSS specification determines whether each property is inherited by default or not. Not all properties are inherited, but you can force ones to be by using the inherit value.

3.1 Object-Oriented Programming Inheritance

Though beyond the scope of this article, CSS inheritance shouldn’t be confused with object-oriented programming (OOP) inheritance. Here is the definition of OOP inheritance from Wikipedia, and it makes clear that we are not talking about the same thing:

In object-oriented programming (OOP), inheritance is a way to form new classes […] using classes that have already been defined. Inheritance is employed to help reuse existing code with little or no modification. The new classes […] inherit attributes and behavior of the pre-existing classes. …

3.2 How Inheritance Works

When an element inherits a value from its parent, it is inheriting its computed value. What does this mean? Every CSS property goes through a four-step process when its value is being determined. Here’s an excerpt from the W3C specification:

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

In other words:

1. Specified value
   The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.
2. Computed value
   The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.
3. Used value
   The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).
4. Actual value
   This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer).

If you look at any CSS property’s specification, you will see that it defines its initial (or default) value, the elements it applies to, its inheritance status and its computed value (among others). For example, the background-color specification states the following:

Name: background-color
Value: <color>
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: the computed color(s)

Confusing? It can be. So, what do we need to understand from all this? And why is it relevant to inheritance?

Let’s go back to the first sentence of this section, which should make more sense now. When an element inherits a value from its parent, it inherits its computed value. Because the computed value exists even if it isn’t specified in the style sheet, a property can be inherited even then: the initial value will be used. So, you can make use of inheritance even if the parent doesn’t have a specified property.

3.3 Using Inheritance

The most important thing to know about inheritance is that it’s there and how it works. If you ignore the jargon, inheritance is actually very straightforward.

Imagine you had to specify the font-size or font-family of every element, instead of simply adding it to the body element? That would cumbersome, which is why inheritance is so helpful.

Don’t break it by using the universal selector (*) with properties that inherit by default. Bobby Jack wrote an interesting post about this on his Five-Minute Argument blog. You don’t have to remember all of the properties that inherit, but you will in time.

Rarely does a CSS-related article not bring some kind of bad news about Internet Explorer. This article is no exception. IE supports the inherit value only from version 8, except for the direction and visibility properties. Great.

4. Using Your Tools

If you use tools like Firebug or Safari’s Web Inspector, you can see how a given cascade works, which selectors have higher specificity and how inheritance is working on a particular element.

For example, here below is Firebug in action, inspecting an element on the page. You can see that some properties are overridden (i.e. crossed out) by other more specific rules:

Firebug in action, informing you how specificity is working.

In the next shot, Safari’s Web Inspector shows the computed values of an element. This way, you can see the values even though they haven’t been explicitly added to the style sheet:

With Safari’s Web Inspector (and Firebug), you can view the computed values of a particular element.

5. Conclusion

Hopefully this article has opened your eyes to (or has refreshed your knowledge of) CSS inheritance and specificity. We encourage you to read the articles cited below, as well as Smashing Magazine’s previous article on the topic.

Even if you don’t think about them, these issues are present in your daily work as a CSS author. Especially in the case of specificity, it’s important to know how they affect your style sheets and how to plan for them so that they cause only minimal (or no) problems.

Resources And Further Reading

• Assigning Property Values, Cascading, and Inheritance, W3C
• CSS3: Cascading and Inheritance, W3C
• Selectors Level 3: Calculating a Selector’s Specificity, W3C
• The Cascade, SitePoint
• Inheritance and Cascade, Dev.Opera
• CSS Inheritance, Dorward Online
• Cascading Order and Inheritance in CSS, David’s Kitchen
• Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade, Van SEO Design
• Specifics on CSS Specificity, CSS-Tricks
• Link Specificity, meyerweb.com
• Redundancy vs. Dependency, mezzoblue

(al)

© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS

 Â

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

CSS Layouts: Techniques And Workarounds

Facebook Style Footer Admin Panel
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.

Adaptable View: How Do They Do It?
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”

Easy Display Switch with CSS and jQuery
A quick and simple way to enable users to switch page layouts using CSS and jQuery.

Quick Tip – Resizing Images Based On Browser Window Size
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.

One Page Résumé Site
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.

Pegs: Automate Display: fixed++
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.

CSS 100% Height
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

CSS3 Drop-Down Menu
A clean, simple a nice navigation menu, designed by Nick La.

CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.

Fluid Images
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?

Scroll/Follow Sidebar, Multiple Techniques
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.

Vertical Centering With CSS
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

Create YouTube-like adaptable view using CSS and jQuery
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

How To Create a Horizontally Scrolling Site
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!

Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.

Setting Equal Heights with jQuery
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.

Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.

6 Flexible jQuery Plugins to Control Web Page Layouts Easily
A collection of six jQuery plug-ins to manage page layouts easily.

Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.

How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.

A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.

Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Smart Columns With CSS and jQuery
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.

Images And Visual Effects With CSS

A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.

Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!

Grayscale Hover Effect With CSS and jQuery
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.

Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.

Image Rollover Borders That Do Not Change Layout
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.

Horizontal Stripes
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.

Nine Techniques for CSS Image Replacement
Put nine different techniques of image replacement to the test.

Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

A Stationary Logo That Changes on Page Scroll with CSS
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.

Silhouette Fade-Ins
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.

Creating Triangles in CSS
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.

A parallax optical illusion with CSS: The Horse in Motion
Time for some fun with CSS and optical illusions.

Pure CSS Line Graph
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.

Zooming with jQuery and CSS
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.

Create Resizing Thumbnails Using Overflow Property
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.

Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.

Date Badges and Comment Bubbles for Your Blog
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.

CSS Tables And Web Forms

UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.

Tables: Not As Evil As You Think
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.

Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.

Make a Select’s Options Printable
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.

Twitter-Like Log-In With jQuery and CSS
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.

Clean and Pure CSS Form Design
This tutorial illustrates how to design a pure CSS form without using HTML tables.

CSSG Collection: Free Comment Styles
This is the second CSSG collection from CSS Globe.

Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.

Editable/Printable Invoice
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.

How to Mask Passwords Like the iPhone
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.

Make Web Forms Suck Less With Labels
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.

FancyForm: JavaScript checkbox replacement
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.

jQuery checkbox v.1.3.0 Beta 1
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.

Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.

Fluid Search Box
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.

Last Click

Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!

Related posts

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

(kk) (jb) (vf) (al)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, jquery

 Â

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.

By the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.

Interesting CSS Techniques

Building the New Visual Annotations
These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.

Sexy Music Album Overlays
This aticle shows how to style your music streams and provides you some graphics to do so.

A Colorful Clock With CSS & jQuery
This tutorial describes how one can create a clock using basic CSS and JavaScript.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Advanced Event Timeline With PHP, CSS & jQuery
This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

CSS Navigation Menus

CSS 3D Meninas
“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.

Sproing! – Make An Elastic Thumbnail Menu
“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.

How to Create Simple and Effective Sub Navs with Definition Lists
“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”

Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

Unobtrusive Dropdown Page Changer
Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.

How to Code an Overlapping Tabbed Main Menu
Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

Solution For Very Long Dropdown Menus
“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”

Mega Drop Down Menu w/ CSS & jQuery
When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.

CSS Typography and Body Copy

How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Typographic work planner
Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.

Thinning Text in Webkit (Safari)
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.

Pseudo Drop Caps
They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.

How to Create Perfect Pre Tags
If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.

Improve your web typography with baseline shift
The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.

Typograph – Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Fancy Quotes With jQuery, AJAX & CSS
Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.

How To Create Simple, Stylish and Swappable Image Captions
Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don’t communicate clearly that they belong to an image. Let’s see what we can do to address these problems.

Styling photo captions with CSS
Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS.

Image captions on Web pages
This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.

Styling Post Headings That Stick Out
“Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.”

Using ellipsis with HTML and CSS
If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.

5 Message Boxes to Style your Notifications with CSS
This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.

CSS Lists

Create a Microsoft Word-Style Outline with CSS
As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

Pure CSS Timeline
“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”

Automatic numbering with CSS Counters
When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.

CSS tricks for custom bullets

Elastic Calendar Styling with CSS
A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.
You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Style a List with One Pixel
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.

Style Your Ordered List
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

Simulating a Table Using an Unordered List
Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.

8 different ways to beautifully style your HTML lists with CSS
“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”

Quick Tip – Simplify List Margins with CSS
Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.

Sexy HTML List Tricks
Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.

Clickable <li>
I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.

CSS Buttons

Simply-Buttons v2
This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.

How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

Liquid & Color Adjustable CSS Buttons
When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.

Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

Recreating the button
“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”

Rounded form buttons

Google’s Imageless Buttons
An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.

Stay tuned!

This is the first part of our large round-up of fresh CSS/JavaScript-techniques. Don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

Would you like to see more similar round-ups on Smashing Magazine in the future?(answers)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 64 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, javascript, js

John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.

You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.

John didn’t stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

CSS and Typography

• Hyphenator
  Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.
• CSS Type Set
  CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.

  

• Typechart
  Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.

  

• CSS-Typoset Matrix and code generator
  A matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels.
• Em Calculator
  Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

  

• Facelift Image Replacement (FLIR)
  Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial.
• Vertical rhythm calculator
  This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.

  

• typeface.js
  Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

CSS Online Tools

• PSD2CSS Online
  A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.

  

• MoreCSS
  MoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS.
• px to em
  This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
• CSS Frame Generator
  This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.

  

• CSS Redundancy Checker
  You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.
• CleverCSS
  CleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables.
• WordOff
  WordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.

  

• Postable
  “I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

  

• Kotatsu
  Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.

  

• htmldevelopertools
  This tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.

  

• Deploy
  Deploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.

  

• CSS Evolve
  CSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via ]
• Lorem 2
  This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes.
• SelectORacle
  A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.
• JS Bin
  A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste or EtherPad.

  

• CSS Text Wrapper
  The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

  

• Writing Tests Against CSS
  CSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove.
• CSS Sprite Generator
  With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you.
• Sky CSS Tool
  An online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning.
• CSS Tidy Online
  An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.
• Web-Based Tools for Optimizing, Formatting and Checking CSS
  A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.
• Grid Designer 2.4
  This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

  

• Yahoo’s Secret Text-Sprite Generator
  Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.
• Replace CSS Colors – Editor
  This tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file.
• The Box Office
  The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.
• MinifyMe
  A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.

  

• cssdoc
  CSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together.
• CSS Menu Generator
  This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.
• sheetUp – DOM Stylesheet Library
  Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser.
• CSS SuperScrub
  This tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names.
• DrawAble Markup Language
  Drawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

  

Handy Kits For Designing With CSS

• Regex Patterns for Single Line CSS
  If you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.

  

• 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards
  An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
• Graph Paper
  This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up.
• Starter Kit For Developers (PSD)
  This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).
• CSSHttpRequest
  CSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

In-Browser CSS Tools

• Collection of Web Developer Tools, by Browser
  Sometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.

  

In-Browser CSS Tools: Firefox Extensions

• Dust-Me Selectors
  A Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
• Aardvark Firefox Extension
  With Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements.
• CSSViewer
  A CSS property viewer that displays all information about a design element.
• Dummy Lipsum
  This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.
• Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin
• GridFox
  GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.

  

• 20 Firefox Add-Ons To Enhance Your Web-Development
  Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checker and ColorZilla.

Coding and Programming With CSS

• CSS Extra Coda Plug-in
  CSS Extra is a plug-in for Coda that gives you access to some dynamic CSS. Although it is not truly dynamic in that it will not force Coda to process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS.
• Edit in Place with JavaScript and CSS
  This tool offers you more intuitive editing (in-place editing) of your documents and style sheets. The idea: in a selected area, the user can enter the markup or change the current value directly.
• Simple CSS
  Simple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware.
• AWK
  AWK is a very powerful programming language that you can use on the command line for advanced text processing.
• cssutils
  A Python package for parsing and building CSS.



• RESTful CSS
  A new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.

  

New CSS Frameworks

• CSS Drop-Down Menu Framework
  A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
• BlueTripCSS Framework
  A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, and has now found a life of its own. The framework contains 24-column grid, sensible typography styles, clean form styles, a print styleshet, an empty starter stylesheet, sexy buttons and status message styles.
• Hartija – CSS Print Framework
  Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
• AM framework
  This framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template.
• Introducing SenCSS
  A clean, minimal CSS template for new projects.
• Typogridphy
  Typogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts.
• formy-css-framework
  A CSS Framework for better form management.
• emastic
  Emastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

CSS Bookmarklets

• Design Bookmarklet
  Design is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
• ReCSS: Reload your CSS
  This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.
• XRAY
  A bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page.
• MRI
  MRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors.
• CSSFly
  A tool for editing websites easily, directly and in real-time in your browser.
• 15 Must-Have Bookmarklets For Web Designers And Developers
  An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Tools For Generating CSS Layouts

• Construct Your CSS
  A visual layout editor based on Blueprint and jQuery. A video tutorial is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
• XHTML/CSS Markup Generator
  Markup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.

  

• Dynamic Layout Generator
  This tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically.
• iStylr – Online CSS Template Generator
  An advanced WYSIWIG online CSS-editor with syntax highlighting, drag’n'drop-functionality, template import/export, image manager, stylsheet sharing option and a visual DOM tree. A registration is required (OpenID-login is supported).

  

Blank CSS Layouts

• The Only CSS Layout You Need
  A collection of basic cross-browser layouts.
• Faux-Column CSS Layouts
  There are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• Fixed-Width CSS Layouts
  There are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.

  

• ___layouts
  The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.

CSS Layouts

• 100 Free High-Quality XHTML/CSS Templates
  In this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.
• 45 Excellent Free Web Templates

Would you like to see more similar posts?

Should SM publish more similar posts? (JavaScript, Ruby, PHP etc.)
( polls)

Related Posts

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn’t Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

(al)

by Steven Snell

If you haven’t taken a look at the (X)HTML/CSS templates that are available for free from a variety of sources, you may be surprised by the quality you can find. WordPress themes tend to get a lot of exposure and attention in the design community right now, but there is also a wide variety of high-quality (X)HTML/CSS templates that are free of charge.

In this post, we’ll showcase 100 free high-quality templates. Hopefully some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

You may want to take a look at other collections as well (some are from Smashing Magazine, some are not):

• Free Design Templates
• Free CSS Layouts and Templates
• 100 Excellent Free WordPress Themes
• 25 Sites to download Free Web Templates

100 Free High-Quality XHTML/CSS Templates

Package | Registration is necessary.

Consultant | Download Consultant

Environmental Brand | Download Environmental Brand

Internet Jobs | Download Internet Jobs

Internet Music | Download Internet Music

Greefies | Download Greefies

Squick Design | Download Squick Design

Harvest | Download Harvest

Blackberry | Download Blackberry

Flower Shop | Download Flower Shop

Lingerie Store | Download Lingerie Store

Web Application | Download Web Application

Internet Studio | Download Internet Studio

Puzzled | Download Puzzled

Journey of Love | Must register with Registration is necessary.

Strockes | Must register with Registration is necessary.

EC Mania | Must register with Registration is necessary.

Cluster | Must register with Registration is necessary to download.

Temper | Download Temper

Jet 30 | Download Jet 30

Green Web | Download Green Web

Flash Web | Download Flash Web

AppleWeb | Download Apple Web

Trial Impact | Download Trial Impact

Aquatic | Download Aquatic

Business Events | Download Business Events

Cool Web | Download Cool Web

Genious Web | Download Genious Web

Expert Vision | Download Expert Vision

Intercraft | Download Intercraft

Clean Design | Download Clean Design

Business Design | Download Business Design

Delicious Fruit | Download Delicious Fruit

MultiFlex 3 | Download MultiFlex 3

Simple Life | Download Simple Life

Street Style | Download Street Style

Miss Understood | Download Miss Understood

Street Life | Download Street Life

skuteczni | Download skuteczni

Clarity | Download Clarity

The Old Forest | Download The Old Forest

Typography Paramount | Download Typography Paramount

Subordinate | Download Subordinate

Nature’s Charm II | Download Nature’s Charm II

Zenlike | Download Zenlike

Clicker | Download Clicker

Biz Company | Download Biz Company

Attractive Business Temp | Download Attractive Business Template

Happy Template | Download Happy Template

Internet Encyclopedia | Download Internet Encyclopedia

Concept Nova | Download Concept Nova

Free CSS Full Site Template | Download Free CSS Full Site Template

Black Eyed Susan | Download Black Eyed Susan

Reference | Download Reference

Interlude | Download Interlude

Printing | Download Printing

Numerology | Download Numerology

Greeny Grass | Download Greeny Grass

Collaboration | Download Collaboration

Breakfast | Download Breakfast

News Flash | Download News Flash

Discovery | Download Discovery

Adios | Download Adios

Old Architecture | Download Old Architecture

Beauty Co. | Download Beauty Co.

Jewelry Shop | Download Jewelry Shop

Book Store | Download Book Store

Real Estate | Download Real Estate

Business Company Dark Blue | Download Business Company Dark Blue

Electronix | Download Electronix

Photo Gallery Green | Download Photo Gallery Green

Quartz Storage | Download Quartz Storage

Aero Solutions | Download Aero Solutions

Unnamed | Download Unnamed

Imagination | Download Imagination

Corporate | Download Corporate

Urban Artist | Download Urban Artist

VectorLover | Download VectorLover

Keep it Simple | Download Keep it Simple

FreshMedia | Download FreshMedia

EliteCircle | Download EliteCircle

Nature Theme | Download Nature Theme

Mint Idea | Download Mint Idea

Metplate | Download Metplate

Decent Photo Gallery | Download Decent Photo Gallery

Consulting Services | Download Consulting Services

Flare | Download Flare

Water Spill | Download Water Spill

Inverted Headline | Download Inverted Headline

Choice | Download Choice

Purple | Download Purple

Business Elegance | Download Business Elegance

Symisun | Download Symisun

Ad Agency | Download Ad Agency

GUITARhero | Download GUITARhero

Pixel Green | Download Pixel Green

Subdued | Download Subdued

The Big Leaf | Download the Big Leaf

GreenWay | Download GreenWay

BWDEC2007 | Download BWDEC2007

Other collections:

• Free Design Templates
• Free CSS Layouts and Templates
• 100 Excellent Free WordPress Themes
• 25 Sites to download Free Web Templates

About the Author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

Noupe is doing a good job cataloging content, such as their post on great JavaScript CSS menu libraries which features:

• Sexy Sliding Menu – Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a sliding menu using script.aculo.us
• FastFind Menu Script – This script allows for nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.
• Webber 2.0 Dock Menu – Great example of a dock type navigation.
• Phatfusion- Image Menu – Image menu using javascript, onClick event keeps selected item open and to close it again.
• Drag and Drop ordering in a TreePanel – This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files).
• Custom Menu Events This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI
• Context Menu Functionality This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI.
• LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles.
• Slashdot Menu- Dynamic DriveThis is a stylish collapsible menu modelled after the navigational menu found on Slashdot.
• Mootools menu with Accordeon and EffectsThis cool menu has a neat effect by hovering over the links, and opens a 2 level submenu with an accordeon.
• CSS Dock Menu If you are a big Mac fan, you will love this CSS dock menu that Nick La designed. It is using Jquery Javascript library and Fisheye component from Interface and some of their icons.
• jQuery Plugin: Sliding Menu A very simple sliding menu using the effects provided by the Interface plugin.
• Accessible expanding and collapsing menu

Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors:

We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the ).

PLAIN TEXT

HTML:

1.  
2.   </body><body>
3.      <!–[if IE 7]><div id=“body1″ class=“IE IE7 IE67″><![endif]–>
4.      <!–[if IE 6]><div id=“body1″ class=“IE IE6 IE56 IE67″><![endif]–>
5.      <!–[if IE 5]><div id=“body1″ class=“IE IE5 IE56″><![endif]–>
6.      <!–[if !IE]>–>
7.           <div id=“body1″ class=“W3C”>
8.      <!–<![endif]–>
9.                 /* THE REST OF YOUR HTML GOES HERE */
10.           </div>   
11.   </div></div></div></body> 
12.  

Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.

With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:

PLAIN TEXT

CSS:

1.  
2. #header { overflow: hidden; }
3. .IE #header { zoom: 1; }
4.  

Jeremy Keith has been doing a great job blogging An Event Apart, and his writeup of The Lessons of CSS Frameworks by Eric Meyer caught my eye.

Eric took a look at the most popular CSS frameworks (960, Blueprint, Content With Style, That Standards Guy, YAML, YUI, Elements, Tripoli, WYMStyle) and talks about choosing one…

Let’s get one question out of the way, the question “which one is right for you?” Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.

After using a framework on Google Code, I can definitely say that they add a lot, and can take some of the pain of out CSS.

Rss is still getting more important for many bloggers, as co-blogger Boris update our blog for RSS last May:

“Well, if it turns out that most of your readers don’t actually visit the site but just read your posts in their RSS reader than it might be time to start optimizing for that.”

Since the updates, subscribers on thenextweb have been increasing tremendously! (subscribe here if you haven’t done allready) Here at TheNextWeb office we have been trying out different programs to read the feeds of other sites, and today I found one on Techcrunch with a new time saving approach:

Open source program Apprise allows users to not only read, but also share news directly from your RSS reader. The project is developed by Christina Cantrell, an Adobe Employee and editor on WatchReport.

The reader is based on Adobe Air, users can simply add and aggregate feeds. Its not world changing, but I believe this is the first RSS reader that can share your articles this easy.

Key Features

1. AIM Integration. Just click on a story, and choose which of your buddies to send it to.
2. Twitter Integration. Post URLs to Twitter right from Apprise.
3. Drag and drop. Easily drag and drop (or copy and paste) articles to share them via email.
4. Realtime search across all feeds.

Sharing your RSS finds

How often do you copy and paste URLs from your news reader or browser into your IM or Twitter client in order to share stories with friends? Apprise created a simple way to share articles from your RSS feed. Simply add your twitter and AIM credentials in the preferences, and the icons will light up. Tap the button will send the article to it respective destination
.

Open Source

The free Apprise reader is opensource, so integration with other services can be expected if the project picks up! We are hoping for integration in more social websites like Wordpress, Tumblr and Stumbleupon.

Try it out on Apprisereader and add our feed: Thenextweb