How To Create a Pure CSS Dropdown Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

via How To Create a Pure CSS Dropdown Menu.

Also here:  Another Simple CSS3 Dropdown Menu

CSS Zen Garden: The Beauty in CSS Design

There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.

via CSS Zen Garden: The Beauty in CSS Design.

From: 10 Years

Wow. It’s finally happened. The CSS Zen Garden is 10 years old today.

Proposition to change the prefixing policy

The web is meant to be a universal medium, agnostic in terms of device or UA. Of course, testing in several browsers is needed to iron out bugs. But when authors have to write for one browser, then port to a few other selected ones, something is wrong.

All in all, there is no simple right way for authors to use prefixes as they currently are.

via Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 ( from May 2012).


CSS vendor prefixes were designed to help web developers by giving them a way to target CSS to specific browsers and use proposed standards before they were finalized. The idea was to move the web forward without rushing the CSS standards process. Unfortunately, it hasn’t always worked out that way.

Chapter 4 The amazing em unit and other best practices

The foremost tool for writing scalable style sheets is the “em” unit, and it therefore goes on top of the list of guidelines that we will compile throughout this chapter: use ems to make scalable style sheets. Named after the letter “M”, the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (–) is known as “em-dash” since it historically has had the same width as the letter “M”. Its narrower cousin (-), often found in European texts is similarly referred to as “en-dash”.

The meaning of “em” has changed over the years. Not all fonts have the letter “M” in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font – not the width of the letter “M”.

In CSS, the em unit is a general unit for measuring lenghts, for example page margins and padding around elements. You can use it both horizontally and vertically, and this shocks traditional typographers who always have used em exclusively for horizontal measurements. By extending the em unit to also work vertically, it has become a very powerful unit – so powerful that you seldom have to use other length units.

via Chapter 4 The amazing em unit and other best practices.

HTML5 roundup: magazine-style Web layouts with CSS regions

The feature allows Web developers to specify that a single body of text should flow through certain regions of the page. For example, you could create several div elements in a specific arrangement and have the overflow text fill those consecutively. Another feature proposed by Adobe, called CSS Exclusions, makes it possible to have inline text automatically wrap and flow to conform with a specific shape.

via HTML5 roundup: magazine-style Web layouts with CSS regions.