"css" via neolao in Google Reader

Opera adds support for CSS3 Transitions and 2D Transforms

2009-12-22T19:33:06Z

Opera has today issued a pre-alpha release of Opera 10.5 offering increased support for CSS3 and HTML5 as well as vastly increased JavaScript performance and improvements to the browser’s user interface. Based on Opera’s Presto 2.5 rendering engine, Opera 10.5 adds CSS3 Transitions and 2D Transforms to the long list of CSS3 properties already supported by [...]

What You Need To Know About Behavioral CSS

2009-12-19T11:57:18Z

As we move forward with the Web and browsers become capable of rendering more advanced code, we gradually get closer to the goal of universal standards across all platforms and computers. Not only will we have to spend less time making sure our box model looks right in IE6, but we create an atmosphere ripe for innovation and free of hacks and heavy front-end scripting.

The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. If we collectively want to be able to have rounded corners, we make it happen. If we want to have multiple background images, we make it happen. If we want border images, we make that happen, too. So desire is not the issue. If it was, we would all still be using tables to lay out our pages and using heavy over-the-top code. We all know that anything can be done on the Web.

Made for the Web

CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3.

In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

CSS Transformations

CSS transformations are a W3C oddity. It is the first time I have sat down to read the full specifications on something and didn’t feel like I had a handle on the subject afterward. The specs are written with the level of technical jargon you would expect from the W3C, but it focuses on the graphic (as in graph drawing) element of transformations and matrices. Having not dealt with a matrix since freshman-year Calculus, I had to do a lot of good old-fashioned browser testing and guessing and checking for this section.

After going through every tutorial I could find and too many browser tests to count, I came out with some useful information on CSS transformations that I think we can all benefit from.

transform();

The transform property allows for the kind of functions also allowed by SVG. It can be applied to both inline and block-level elements. It allows us to twist, zoom in on and move elements, all with one line of CSS.

One of the biggest complaints about cutting-edge design is that the text is not selectable. This is no longer a problem when you use the transform property to manipulate text, because it is pure CSS and so any text within the element remains selectable. This is a huge advantage of CSS over using an image (or background image).

Some interesting and useful transform functions (that are supported):

rotate
Rotate allow you to turn an object by passing a degree value through the function.
scale
Scale is a zooming function and can make any element larger. It takes positive and negative values as well as decimals.
translate
Translate essentially repositions an element based on X and Y coordinates.

Let’s look at each of these in more detail.

Rotate

The transform property has many uses, one of which is to rotate. Rotation turns an object based on a degree value and can be applied to both inline and block-level elements, It makes for a pretty cool effect.

#nav {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

Please notice that in IE 8 (when not in standards mode) it’s required that you type “-ms-filter” instead of just “filter” in your CSS.

Support
Support for transform: rotate is surprisingly widespread. In the CSS snippet above, we directly target -webkit- and -moz- and rotate the #nav element by -90 degrees.

Pretty straightforward, right? The only problem is that the rotation is for a pretty important design element, and many designers will be reluctant to use it if Internet Explorer does not recognize it.

Luckily, IE has a filter for this: the image transform filter. It can take four rotation values: 0, 1, 2, and 3. You won’t get the same fine-grained control that comes with Webkit and Gecko, but your design will remain consistent across older browsers (even IE6).

Is it okay to use?
Yes, but make sure it is thoroughly tested.

Scale

Scaling does exactly what you think it would do: zoom in and out on an element. The scale function takes both width and height values, and those values can be positive, negative or decimals.

Positive values scale up the element, as you would expect, based on the width and height specified.

Negative values do not shrink the element, but rather reverse it (e.g. text is turned backwards) and then scaled accordingly. You can, however, use decimal values lower than 1 (e.g. .5) to shrink or zoom out of an element.

#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}

#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}

#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}

Support
The scale transformation is supported in Firefox, Safari and Chrome, but not any version of Internet Explorer (yet) as far as I could tell. Scaling an object is a fairly significant design choice, but it can be applied with progressive enhancement using :hover, which can add a little pop to your navigation especially.

#nav li a:hover{
/* This should make your navigation links zoom slightly on hover */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}

Is it okay to use?
From time to time, yes. But not with critical design elements.

Translate

The name “translate” is a little misleading. It is actually a method of positioning elements using X and Y values.

It looks much the same as the other kinds of transformation but adds an extra dimension to your website.

#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}

Support
Translate is currently supported in Firefox, Safari and Chrome when you use the vender extensions -moz- and -webkit-.

Is it okay to use?
Yes, but normal X/Y positioning is just as effective in many situations.

Chaining Transformations

Transformations are great individually, but if you want multiple transformations, the code can pile up pretty quickly, especially with the vendor extensions. Luckily, we have some built-in shortcuts:

#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}

These transformations can be chained together to make your CSS more efficient:

#nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}

The real power of these properties is in combining and chaining them. You can move, turn, zoom in on and manipulate any inline or block-level element without JavaScript. Once support for these properties becomes widespread, we’ll be able to build and design even richer and more lightweight interfaces and applications.

Transition

A basic transition refers to a CSS property that define and moves an element from its inactive state (e.g. dark-blue background) to its hover or active state (e.g. light-blue background).

Transitions can be coupled with transformations (and trigger events such as :hover or :focus) to create a kind of animation. Fading the background color, sliding a block and spinning an object can all be done with CSS transitions.

#nav a{
background-color:red;
}

#nav a:hover,
#nav a:focus{
background-color:blue;

/* tell the transition to apply to background-color (looks like a CSS variable, doesn't it? #foreshadowing)*/
-webkit-transition-property:background-color;

/* make it 2 seconds long */
-webkit-transition-duration:2s;
}

Support
As cool as the transition property is, support is mostly limited to WebKit browsers. -moz-transition already works in the latest nightly build of Firefox 3.7 (so it’s guaranteed for the future). So it’s safe to assume that it is right behind WebKit on this. So you may as well add -moz-transition to your CSS for future enhancements. And even a version without a vendor extension, just in case.

Is it okay to use?
For subtle enhancements, yes, but not for dramatic effects.

Animation

Animations are where the real action in CSS 3 is. You can combine all of the elements we’ve talked about above with animation properties like animation-duration, animation-name and animation-timing-function to create Flash-like animations with pure CSS.

#rotate {
margin: 0 auto;
width: 600px;
height: 400px;

/* Ensures we're in 3-D space */
-webkit-transform-style: preserve-3d;

/*
Make the whole set of rows use the x-axis spin animation
for a duration of 7 seconds, running infinitely and linearly.
*/

-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

/* Defining the animation to be called. */
@-webkit-keyframes x-spin {
   0%    { -webkit-transform: rotateX(0deg); }
   50%   { -webkit-transform: rotateX(180deg); }
   100%  { -webkit-transform: rotateX(360deg); }
}

All this fantastic CSS animation code and a live example can be found at CSS3.info demo. The demo is viewable in any browser, but the animation works only in the nightly build of WebKit. It looks just like the video above, but it’s worth installing WebKit to see it for yourself (it’s pretty awesome).

SupportThere is, unfortunately, only a limited support for CSS animations yet. 2D CSS animations work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira and other Webkit browsers. Safari 4 (Snow Leopard) supports 3D animations.

Conclusion

Right now, JavaScript bridges the gap until CSS 3 comes into full effect. Unfortunately, getting full browser support for these great properties will be a long journey. Until that day comes, we can take advantage of some serious progressive enhancement and rely on JavaScript to enhance our websites and applications. That’s not a bad thing; just how it is at the moment.

With the recent announcement of IE9, I wouldn’t be surprised if the IE team include some of these properties in the new version of the browser especially since talks for CSS3 integration have already begun (border-radius).

The future of the Web is bright, especially with these highly experimental properties such as animation. Although many of the properties are not usable for client or high-level production work, they sure are fun to play with! We can all look forward to the day when we have support across the board to build some really great lightweight applications.

References And Resources

A Crash Course in Advanced CSS3 Effects
Net Tuts put out a great screencast on a lot of cool CSS 3 effects.
Webkit Announces Support for CSS 3D Transforms
CSS3.info has a great demo of CSS 3 animations that are supported by the nightly build of WebKit.
Jonathan Snook on CSS Text Rotation
Jonathan Snook tackles this up-and-coming CSS3 property.
DEV Camp CSS3 Tricks
A slideshow presentation by Dan Kurtz.
W3C Spec on 2-D Transformations
A resource specifically about 2-D transformations.
W3C Spec on 3-D Transformations
A resource specifically about 3-D transformations.
W3C Spec on CSS3 Animations
The W3C working draft specifications for CSS animations.

We express sincere gratitude to Andy Clarke and Hugh Isaacs II for corrections to this article.

(al)

Don’t Use Black for Shadows

2009-12-18T14:29:48Z

That is, “don’t use black for shadows over colored backgrounds.” At every step of my design education I was taught this. For example, when adding a drop shadow as a layer style in Photoshop, don’t just pick a black or a gray but sample a color from the background, then dial it back in opacity until it looks good. This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Check out this shadow. If you were trying to recreate that, I don’t think black at any opacity level would get it just right.

Now that we have the (awesome) RGBa in our CSS toolbox, I’ve been hearing and seeing people use dialed back black (e.g. rgba(0,0,0,0.5) ) for backgrounds and shadows. This is being taught and encouraged with comments like “the shadow color will pick up the background color because of the opacity“. True, it will, but it will be mixed with black, not a deeper toned version of itself.

I’ve heard Dan Cederholm teach this at An Event Apart and in Bulletproof Web Design. Meagan Fischer also has a recent tutorial with black as the example shadow color. Dan and Meagan are better designers and smarter people than myself, so I’m not trying to get up in their grills. I think their point is that it’s smarter and more future-proof to use black, because black can sit on any background color equally well, whereas a toned shadow only works on that tone.

My point is, if you are going to change the background color, you are making changes to CSS. So while you are doing that, just change the shadow tone also. If you can’t control what the text/box shadow is going to be on top of then yes, use black. If you can, use a toned shadow.

View Demo

Or am I whack? Is using black basically the same thing as a “darker version of itself”? I just bring this up because I’ve been seeing this a lot lately and literally during school and at various jobs I’ve had were we always taught to tone shadows.

Ce que nous réserve CSS3 en 2010

2009-12-16T17:00:32Z

L'écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents. L'année 2010 verra certainement nos habitudes changées par les nouvelles possibilités offertes en CSS 3. D'ores et déjà de nombreuses utilisations concrètes voient le jour.

Vous pourrez constater l'état d'avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work.

Des coins arrondis

Du Web 2.0 avec style

La propriété border-radius arrondit les angles de n'importe quel élément HTML, sans avoir besoin d'images ni de JavaScript.

Using Rounded Corners with CSS3 (EN)

Créer des coins arrondis en CSS et sans images

CSS: border-radius and -moz-border-radius (EN)

La gestion de l'opacité

La transparence enfin maîtrisée !

L'interprétation des images transparentes en PNG (24 bits) est une première délivrance pour les web-designers qui pourront mettre en œuvre plus de créativité. La nouvelle notation des couleurs et de la gestion intégrée de leur transparence (RGBa) va être une seconde avancée significative.

CSS3 : la transparence de couleur avec RGBa

CSS3 opacity : transparency of an element in css (EN)

Les arrière plans multiples

Elle n'est pas (plus) belle la vie ?

Grâce aux nouvelles valeurs multiples utilisables dans la propriété CSS background, il sera désormais possible d'appliquer plusieurs images d'arrière-plan sur le même élément, sans devoir en imbriquer plusieurs.

Arrière-plans avec CSS 3 Backgrounds

Le multi colonage

De la P.A.O. sur le Web ?

Les propriétés column-width et column-gap vont générer une mise en page sous forme de colonnes multiples, où le texte va s'écouler automatiquement d'une colonne à la suivante.

CSS3 Multiple Columns (EN)

Multi-column layout (EN)

Les ombrages

Nul besoin d'un surcroît d'images

La propriété box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML.

CSS3 box-shadow property (EN)

Les ombrages en CSS3

Des effets sur le texte

Les CSS3 concurrencent les styles Photoshop ?

Les ombrages en CSS3

Text-shadow, Photoshop like effects using CSS (EN)

Des boutons esthétiques

Arrondis, dégradés, animés.

L'association de plusieurs propriétés CSS3 permet de concevoir des boutons de lien d'une esthétique irréprochable sans utiliser d'images.

Super Awesome Buttons with CSS3 and RGBA (EN)

Les polices exotiques

Les polices web-safe ne sont plus seules.

@font-face permet d'incorporer des polices externes et variées.

Using @font-face (EN)

21 Awesome @font-face Embeddable Typefaces (EN)

Les dégradés

Un peu de douceur dans ce monde uni.

De nouvelles propriétés gradient permettent de réaliser et gérer des arrière-plans de teintes dégradées.

Arrière-plans avec CSS3 Backgrounds

Des animations

E pur si muove !

Grâce aux dernières évolutions du langage et au module Transitions, il est désormais possible de réaliser des transitions basiques.

Transitions CSS3

Les sélecteurs

La fin de la Divite et de la Classite chronique ?

Les nouveaux sélecteurs CSS3 vont faciliter le nommage des éléments particuliers (le second de la liste, les lignes impaires d'un tableau, ...).

CSS 3 selectors explained (EN)

Conclusion

CSS3, couplé à HTML5 (ou pas), va permettre de réaliser des effets réservés jusque-là à JavaScript ou aux découpes d'images contraignantes (ombrage, survol, arrondis...). Si on ajoute que jQuery et les autres frameworks commencent à s'imposer dans de nombreuses applications web (diaporama, interface cliente riche...), l'année 2010 sera mouvementée ! Bien entendu, il est important de rappeler que certains navigateurs n'ont pas encore implémenté l'ensemble de ces fonctionnalités.

Pour aller plus loin (en anglais)

Selectors Level 3

2009-12-15T17:46:00Z

I have the intense pleasure to let you know that the specification Selectors Level 3 just became officially a Proposed Recommendation !!! YAY !!!

Styling HTML Lists with CSS: Techniques and Resources

2009-12-11T11:27:15Z

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

Available List Options

Unordered Lists: <ul>

Unordered lists are the most commonly used lists. Here is an image showing what an unstyled unordered list looks like in different browsers:

As you can see above, the default settings for unordered lists are somewhat different across various browsers. Of course, nowadays it is rare to see a naked unordered list on any website. Also, a good CSS reset will normalize those differences, bringing the list down to bare text with no bullets and no margins or padding.

CSS properties that are specific to unordered lists include list-style-type, list-style-position, and list-style-image. These properties set the type of marker (or bullet), the position of the marker, and an image to replace the marker. These three properties can be combined using the shorthand list-style property.

The list-style-type property can be set to a number of different values, some of which are shown in the chart below:

Depending on the user’s browser and system, certain values for list-style-item may not appear correctly, often defaulting to decimal. Using an incrementing value for an unordered list is not recommended since that would take away the semantic value of the unordered list.

The list-style-position property specifies the position of the list marker, and can be set to either outside (the default) or inside. This property would also set the position of an image, if the list-style-image property is set.

The list-style-image property can be used to give the unordered list a custom look with unique “bullets”. Unfortunately, this method of adding a bullet to an unordered list is buggy in Internet Explorer, and is rarely used. A much better solution is to add a background image to the <li> elements on the list, adjusting the position of the background image accordingly, and setting it to no-repeat. This solution is explained through a series of steps at maxdesign.com, and works nicely in all browsers.

Ordered Lists: <ol>

Ordered lists are used when a list of items requires a visible incrementing value before each item. The value for the marker on an ordered list can be set to any of the values also available for an unordered list, as discussed above. In most cases, an ordered list would either have an incrementing marker on the list items, or no marker at all. So, it would be unlikely that you would change the marker from an incrementing one to a non-incrementing one on an ordered list, since that would remove the semantic value of the items.

Definition Lists: <dl>

Definition lists are used to mark up lists of items that have definitions. They consist of definition terms (<dt>) along with definitions (<dd>). The pairings for definition list items do not have to be exactly paired up. The following is perfectly valid in XHTML Strict:

<dl>
	<dt>calculator</dt>
	<dt>abacus</dt>
	<dd>A machine used for making numerical calculations.</dd>
</dl>

Thus, you could have more than one <dt> with a single <dd>, or even have multiple <dd> tags and only one <dt>.

The visual display of a definition list, by default, is virtually the same across all browsers, as shown in the image below:

Deprecated Lists: <menu> & <dir>

The <menu> and <dir> elements also, technically, qualify as “HTML lists”, but they are deprecated in XHTML, so I won’t discuss those in detail here.

Lists in HTML5

In HTML5, the unordered list has basically remained the same, although now it seems to be referred to simply as a “list”. The new <nav> element will be used to wrap a list that is used for navigation.

The <ol> element has slightly changed, gaining two new attributes: reversed, which is a Boolean that indicates if the list should be ascending or descending, and start, which is an integer that declares the starting point of the ordered list items.

Also, the <figure> and <details> elements have been added. Those new tags will have children that include <dt> and <dd> elements.

For further information on lists in HTML5, see the HTML5 Draft Standard.

Browser Differences

There are some notable differences across the most commonly-used browsers when certain styles are applied to ordered or unordered lists. Let’s take a look at some of these differences. Of course, this assumes there are no other styles associated with the elements, including those in a CSS reset.

Adding “display: block” to List Items

In Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari, adding display: block to the <li> elements in an ordered or unordered list will make the bullets or numbers disappear.

In IE6 and IE7 the bullets and numbers will still be visible, even with display: block applied to the list items.

Adding “float: left” to List Items

In Internet Explorer 6 and 7, adding float: left to the list items (with no other styles present) will align the list items horizontally and the list bullets (or list numbers) will disappear. In IE8 and all other browsers, the list items will align horizontally, but the list bullets (or list numbers) will still be visible.

Another factor to keep in mind when the list items are floated is that the list container (the <ul> element) will collapse when it contains only floated elements. This occurs the same way in all browsers. Adding overflow: hidden to the <ul> or <ol> element is one way to resolve this issue.

To achieve virtually the same effect as float: left in all browsers, the best solution is to use display: inline.

Ordered List Items That Have “Layout” in IE

In IE6 & IE7, if the list items in an ordered list have “Layout”, the numbers in the ordered list will not increment, and will all show as “1″, as shown in the image below:

The hasLayout property cannot be set directly, but it can be changed if an element is given an explicit width or height, or the element is floated or absolutely positioned, among other things. For a thorough discussion of the hasLayout property, see this article.

Padding & Margins in IE 6/7

In most browsers, in order to remove the bullets or numbers from a list and push the list flush to the left, the left padding needs to be set to zero. But this has no effect in IE6 and IE7. Instead, the left margin needs to be set to zero for this to be achieved in those browsers.

Achieving Consistent List-Styling in all Browsers

To avoid the issues that arise in the handling of list styles in the different browsers, the best method is to use a CSS reset. A CSS reset will set virtually all default browser settings to the bare minimum, and will allow you to work from a common ground in all browsers. There will still be differences after certain styles are applied, but they will not be as difficult to deal with after a reset is put in place.

Also, as mentioned earlier, it is best to completely avoid using the list-style-image property, and to instead set a background on the <li> elements. This will provide a cross-browser, easy-to-maintain solution for achieving custom bullets on an unordered list.

Showcase of Trends, Examples, & Tutorials

Now that we’ve reviewed the basics of HTML lists, as well as some browser inconsistencies, let’s look at a number of different examples and tutorials that display practical examples and uses for HTML lists.

Navigation Bars

By far the most common use for the unordered list is the navigation bar, whether vertical or horizontal. Ever since table-based layouts became obsolete, the unordered list has been widely implemented as a basis for navigation elements for a number of reasons, listed below.

An unordered list is a block-level element, and so does not need to be wrapped in an extra <div> to apply a background or other graphical enhancement
When styles are disabled, a styled list will degrade gracefully, ensuring the navigation items appear distinct from the rest of the page’s content
Although an unordered list might add more markup than just a plain list of <a> tags, having the extra <li> elements allows the navigation bar to be graphically flexible
Navigation divided into lists and/or sub-lists allows users with assistive technology (such as screen readers) to easily skip entire navigation sections

Pure CSS Fish Eye Menu
This vertical navigation menu that mimics the Apple “fisheye” effect on rollover is done with pure CSS and utilizes an unordered list to display the icons.

Sliding Doors Meets CSS Sprites
An HTML list can also provide the foundation for a tabbed navigation bar using the famous sliding doors technique, as demonstrated in this example.

LavaLamp for jQuery Lovers
A “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery.

Animated Navigation Bar Using jQuery
This tutorial on WebMunch uses list-based navigation to create an animated navigation bar powered by jQuery. The demo page displays four different variations of the animated effect.

Apple’s Navigation bar using only CSS
This tutorial describes how to recreate Apple’s navigation bar, based on a list, with some CSS3 enhancements that degrade gracefully in IE and older browsers. The final result also includes an animated hover effect that works in Safari.

Drop-Down Menus

Older drop-down menus, like Brainjar’s Revenge of the Menu Bar used <div> elements to divide sections of anchor tags, implementing JavaScript to show and hide menus. Later, drop-down menus were developed that were more semantic, and more dependent on CSS.

Suckerfish Dropdowns
The classic Suckerfish dropdowns by Patrick Griffiths and Dan Webb were one of the earliest drop-down (or fly-out) menus to be based on nested lists.

Professional Drop-Down
Stu Nicholls provides another list-based solution for drop-downs.

Animated Drop Down Menu with jQuery
This tutorial demonstrates how to create a simple, single animated drop-down menu based on an unordered list, with jQuery.

Create Dropdown Menus with CSS Only
This simple technique creates list-based drop-down menus without JavaScript.

JavaScript Dropdown Menu with Multi Levels
These multi-level, cross-browser, list-based drop-down menus include an animated slide and fade effect.

Photo Displays

HTML lists serve as an effective way to display a list of photos, for many of the same reasons that were mentioned above for navigation bars. Below are some examples of photo galleries and other photo-based widgets that are styled with HTML lists.

jCarousel
The jCarousel photo carousel jQuery plugin applies customizable jQuery functionality to an unordered list that can display the carousel in a number of different ways.

InnerFade with JQuery
This plugin allows an unordered list of images to serve as the basis for a fading image rotator that displays one image at a time. The screen grab below displays two of the images in mid-transition.

CSS Photo Gallery Template
This is a free photo gallery template that displays a caption on hover. This simple gallery uses an unordered list with floated list items.

Definition Lists for Image Gallery
This demonstration on Max Design shows how to transform a definition list into an image gallery.

Styling and Dividing Other Types of Content

In addition to displaying images, lists also come in handy for display of content in sometimes atypical fashion, as demonstrated by the examples below.

Multi-Column Lists
A few years back, A List Apart demonstrated how to convert a single unordered list into a multi-columned display, without the need to divide the items into multiple lists.

Style a List with One Pixel
Chris Coyier demonstrates a neat CSS trick — how to create a “depth-chart looking unordered list” using just a 1-pixel GIF.

Accessible HTML Forms using Definition Lists
Andrew Sellick steps through the styling of a lengthy form with the help of definition lists to group sets of text boxes, radio buttons, and checkboxes.

A Three Column CSS Layout Using Just an Unordered List
Rob Larsen of DrunkenFist.com demonstrates how to create a 3-column page layout using an unordered list in place of the usual <div> elements.

Animated Tabbed Content with jQuery
This tutorial on Gaya Design demonstrates how to create an animated tabbed content box with jQuery. The content is structured using unordered lists.

A Simple and Beautiful jQuery Accordion Tutorial
This is a simple tutorial that uses nested unordered lists as a basis for a jQuery animated accordion menu.

Code Highlighters

Many blogs and tutorial sites include JavaScript-driven code highlighters that convert <pre> elements into ordered lists, as shown in the screen capture below. One such code highlighter is Alex Gorbatchev’s SyntaxHighlighter

Blog Comments

Blog comments, including those on WordPress-driven sites, are structured with ordered lists, providing very flexible options for styling, and laying a foundation for nested comments. Nested, or “threaded” comments are now built into WordPress, as demonstrated below on Noupe.

Fancy Styles and Techniques with Lists

jQuery Sortable Lists With Drag Drop Handle
Will Linssen demonstrates, with jQuery, how to create an ordered or unordered list that allows the user to manually sort the list items.

Sexy Ordered Lists with CSS
Soh Tanaka shows users how to add some fancy styling to an ordered list.

Veerle’s Block Hover Effect on List Items
In the “Approved” section in the footer of her home page, Veerle Pieters implements a cross-browser block-hover effect on an unordered list. Each list item contains a number of separate elements, but the hover effect works on the entire list item, and even works in IE6. The same effect is discussed in tutorials on Smiley Cat and randsco.com.

A Definition List Bar Chart
The ever-creative Stu Nicholls shows us how to display a bar chart (with very old browser stats!) with a styled definition list.

jQuery Sequential List
This tutorial on Web Designer Wall will show you how to use jQuery to add sequential CSS classes to list items to create a graphical list.

Creating an Accessible Tag Cloud in PHP and CSS
This tutorial describes how to create an accessible, standards compliant tag cloud with simple code. The resulting HTML output is a simple unordered list.

Simple Scalable CSS Based Breadcrumbs
Veerle Pieters describes how to create a breadcrumb navigation section using an unordered list.

CSS Step Menu
A demonstration of a “step menu” that’s based on unordered lists.

Overlap That Menu!
A tutorial that describes how to create overlapping menu items using a styled unordered list.

CSS Stacked Bar Graphs
A fancy stacked bar graph in CSS that uses an unordered list and a definition list.

Nested Side Bar Menu
Using the same principle as drop-down menus, this demonstration shows a cross-browser vertical menu with fly-outs, based on nested unordered lists.

OMG Durham’s Tag Popularity Graph
OMG Durham’s website displays popular tags using a bar graph that is based on an unordered list.

Conclusion

A beautiful, CSS-styled, cross-browser HTML list has the power to resolve thousands of potential layout or design challenges. Although dozens more uses and techniques could be discussed in this article, the above material should be enough to give a thorough overview of HTML lists, demonstrating how powerful and flexible they are in the hands of an experienced coder.

Further Resources

Les ombrages en CSS3

2009-12-07T13:37:37Z

Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives.
Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire...

Box-shadow

La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML.

Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. Sans oublier la couleur, bien-entendu. La propriété s'applique sur la boîte de l'élément, et non sur sa bordure. L'ombrage n'affecte pas la taille de la boîte de l'élément.

En voici une illustration (Voir le résultat sur votre navigateur) :


img {
  box-shadow: 8px 8px 0 #aaa; 
}

Syntaxe

La première valeur indique le décalage horizontal vers la droite (ici 8px)
le deuxième correspond au décalage vertical vers le bas (ici 8px)
le chiffre suivant indique la force du dégradé (ici 0)
et enfin, la couleur (ici #aaa)

Compatibilité et utilisation concrète
A l'heure où ce tutoriel est écrit, seuls les navigateurs basés sur les moteurs Gecko (Mozilla Firefox 3.1+) et sur Webkit (Safari, Chrome) reconnaissent la propriété box-shadow. En pratique, la propriété doit être préfixée par -moz- pour Gecko ou -webkit- pour Webkit pour fonctionner sur ces navigateurs. box-shadow devient donc -moz-box-shadow et -webkit-box-shadow.
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner et anticiper une implémentation complète sur tous les navigateurs dans le futur.

Voici une illustration d'ombre portée dégradée (Voir le résultat sur votre navigateur) :


img {
  box-shadow: 8px 8px 12px #aaa;
}

Et voici enfin une variante sous forme de "halo" dégradé (Voir le résultat sur votre navigateur) :


img {
  box-shadow: 1px 1px 12px #555;
}

Adaptation pour Internet Explorer

Internet Explorer, version IE8 incluse, ne reconnaît pas la propriété box-shadow.

Cependant, comme pour la transparence de couleur, il existe une fonctionnalité de filtre propriétaire Microsoft qui permet d'obtenir un résultat similaire. Il s'agit du filtre Shadow (un cousin du filtre DropShadow), que nous allons employer sur ce navigateur.

Il suffit concrètement à appliquer ce filtre à l'élément en y indiquant une couleur, la direction (en degré) et la force du dégradé.

Voici ce que donne une ombre portée "classique" à l'aide du filtre Shadow sur Internet Explorer (Voir le résultat sur votre navigateur) :


img {
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
  zoom: 1;
}

Bien entendu, pour éviter de gêner les bons élèves, nous allons nous appliquer à administrer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.

Au final, les styles CSS devraient ressembler à ceci :


  <style type="text/css">   
    .ombrage {
    border: 5px solid #fff;
    -moz-box-shadow: 8px 8px 12px #aaa; 
    -webkit-box-shadow: 8px 8px 12px #aaa; 
    box-shadow: 8px 8px 12px #555; 
    } 
  &lt;/style&gt;
    
<!--[if lte IE 8]>
  <style type="text/css">
  .ombrage {
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
    zoom: 1;
  } 
  </style>
<![endif]-->

Après application de cette adaptation pour Internet Explorer, seul le navigateur Opera n'affichera pas d'ombre sur votre élément.

Outil WYSIWYG

Pour vous familiariser avec le concept de box-shadow et pouvoir jouer en direct avec cette propriété et ses effets, sachez qu'il existe un outil WYSIWYG publié chez Westciv.com

Text-shadow

text-shadow est une propriété CSS2 permettant de produire une ombre portée sur le texte de contenu sur lequel elle est appliquée.

Il est possible de spécifier les décalages de l'ombrage, la couleur et sa zone de flou. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. L'ombrage n'affecte pas la taille de la boîte de texte.

Voici une illustration de cette propriété text-shadow en action (Voir le résultat sur votre navigateur) :


h1 {
  text-shadow: 0px 0px 9px #777;
  color: #fff;
}

Compatibilité et syntaxe

A l'instar de box-shadow, cette propriété n'est pas reconnue par Internet Explorer (version 8 comprise). Par contre, Opera 9.5+ l'implémente correctement.

Notez également que puisqu'il s'agit d'une propriété CSS2 et non CSS3, il n'y a pas lieu de lui affecter un préfixe (-moz-, -webkit-, ...). La propriété demeure text-shadow quel que soit le navigateur.

Adaptation pour Internet Explorer

Là encore, nous allons devoir ruser en appliquant le filtre Shadow à nos éléments, de la même manière que nous l'avons fait précédemment pour adapter la propriété box-shadow.

Le résultat sur Internet Explorer est malheureusement moins excitant que sur les autres navigateurs (Voir le résultat sur votre navigateur) :

Au final, les styles CSS devraient ressembler à ceci :


.ombrage {
  text-shadow: 2px 2px 4px #999;
} 
</style>
<!--[if lte IE 8]>
<style type="text/css">
.ombrage {
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=4);
  zoom: 1;
} 
</style>
<![endif]-->

Outil WYSIWYG

Pour vous familiariser avec le concept de text-shadow il existe aussi un outil WYSIWYG publié chez Westciv.com

Border-colors

border-colors est une propriété uniquement reconnue par Mozilla Firefox 3.0+ et qui permet de déclarer plusieurs valeurs de couleurs à appliquer sur la bordure d'un élément.

En voici une illustration (Voir le résultat sur votre navigateur) :


.gradient {
      -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
      }

Puisque cette propriété n'est pas vraiment répandue, nous n'allons pas entrer dans les détails, mais sachez que vous pouvez l'étudier sur le site ZenElements.com.

Conclusion

Associées aux coins arrondis et aux transparences de couleurs, les propriétés d'ombrage sont encore sous-exploitées... Et pour cause : quelques navigateurs importants tels qu'Internet Explorer ou Opéra ne les implémentent pas encore.

Cela signifie qu'en production, il est nécessaire de prendre quelques précautions d'usage et de se poser des questions préalables : puis-je m'offrir une version dégradée ("graceful degradation") sur ces navigateurs à la traîne, voire tout simplement les ignorer ? Quel est mon public et ses attentes ? Combien de temps puis-je passer à bidouiller des équivalences sur IE ?... La réponse est uniquement entre vos mains.

La transparence de couleur avec RGBa en CSS3

2009-12-02T17:55:44Z

Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa.
Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML.

Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.

De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.

Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) :


div {
  background-color: rgba(0, 0, 255, 0.5);
}

Et voici une illustration du principe d'opacité (opacity) sur un élément (Voir le résultat (Opacity) sur votre navigateur) :


div {
  opacity: 0.5;
}

Principe de la notation RGBa

La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0). La dernière valeur indiquant le degré d'opacité entre 0 et 1.

Illustrons cette notation sur une structure HTML, l'objectif étant d'appliquer une transparence de 50% sur la couleur d'arrière-plan de l'élément <div>


<div>
  <h1>Joli titre</h1>
</div>

Voici les styles CSS permettant d'appliquer cette transparence :


div {
  background-color: rgba(0, 0, 255, 0.5); /* un arrière plan bleu à 50% de transparence */
}
div h1 {
  color: rgb(255, 200, 0); /* une couleur de texte jaune-orange */
}

Pour s'assurer qu'il y ait une alternative pour les mauvais élèves ou les navigateurs plus anciens, il est possible de commencer par déclarer une couleur de fond solide à l'aide de l'écriture classique RGB.

Les anciens navigateurs, pour la plupart, ne reconnaîtront pas la seconde valeur et se contenteront de la première déclaration :


div {
  background-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 255, 0.5);
}

Voir le résultat sur votre navigateur

Support de l'écriture RGBa

En décembre 2008, Florent V., publie une page de test du support des couleurs RGBa. On peut y constater qu'à cette époque, assez peu de navigateurs implémentaient correctement ce système de notation.

Le site anglophone CSS Tricks a publié plus récemment un tableau récapitulatif du support de RGBa : on y observe qu'à l'heure actuelle la plupart des navigateurs prennent en charge cette valeur de transparence... à l'exception d'Internet Explorer, toutes versions, IE8 comprise.

Et pendant ce temps, sur IE...

Cette fonctionnalité n'étant pas reconnue par Internet Explorer, il est possible de concevoir la situation sous plusieurs angles :

On bidouille avec la propriété Opacity et le positionnement absolu pour s'adapter à toutes les versions d'IE (IE6, IE7, IE8);
On utilise une alternative à l'aide de PNG transparent pour IE7 et IE8, en faisant fi des années de bons et loyaux services d'IE6;
On détourne un filtre propriétaire Microsoft que l'on va appliquer uniquement sur IE;
On se fiche d'Internet Explorer, c'est vrai quoi !

Pour des raisons de déontologie, nous allons nous pencher plus avant sur l'avant-dernière alternative et allons la décortiquer en détail...

Le filtre Gradient pour IE

Cette astuce consiste à détourner un filtre propriétaire à Microsoft, le gradient filter (filter:progid:DXImageTransform.Microsoft.gradient pour les intimes), dont la fonction est de créer des dégradés de couleur d'arrière-plan sur Internet Explorer.

Ce filtre a pour avantage de prendre en compte la transparence de la couche Alpha dans ses valeurs. Il est donc possible de rendre le fond transparent en indiquant la même couleur pour le début et la fin du "dégradé".

La couleur est exprimée en hexadécimal, au format #AARRGGBB, où AA est la valeur hexadécimale de la transparence, RR la valeur de la couche rouge, GG la valeur de la couche verte et BB la valeur de la couche bleue.

Par exemple, les styles CSS suivants vont appliquer une couleur bleue (0000ff) d'une transparence de 20% au bloc:


div {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
}

A titre de pense-bête, voici une correspondance entre le pourcentage de transparence Alpha souhaité et la valeur correspondante en hexadécimal :

0% (transparent) -> #00 en hexadécimal
20% -> #33
50% -> #80
75% -> #C0
100% (opaque) -> #FF

Bien entendu, pour éviter de gêner les bons élèves, nous allons nous appliquer à administrer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.

Le code HTML/CSS pourrait ressembler à celui-ci :


<style type="text/css">
  .opacite {
    width: 50%;
    background-color: rgb(0, 0, 255); /* alternative solide */
    background-color: rgba(0, 0, 255, 0.2);
  }
</style>
<!--[if IE lte IE 8]>
  <style type="text/css">
    .opacite {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
      zoom: 1;
    } 
  </style>
<![endif]-->

Le résultat fonctionne sur Chrome, Safari 4, Opera 10, Firefox 3, IE6, IE7, IE8, etc. Vous pouvez le constater sur votre navigateur.

Conclusion, remerciements... et backlink mérité

Ce tutoriel est indirectement inspiré des articles de 24ways "Working with RGBa colors" et de CSS Tricks "RGBa browser support", que je remercie de distiller leurs connaissances.

Il est possible de visualiser le résultat final en production sur mon site personnel Polychromies où vous pourrez comparer le rendu entre les différents navigateurs et constater que les arrondis ne semblent pas être compatibles avec le filtre Gradient chez Internet Explorer, même avec la technique JavaScript de Roundies.

Pushing Your Buttons With Practical CSS3

2009-12-02T14:45:15Z

Pushing Your Buttons With Practical CSS3 (via @smashingmag) -

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.

Step 1: The Super-Awesome Button

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa.” Those buttons will be our first step to creating buttons that really click. We will briefly review the technique and then extend it, fixing the problems that we have encountered along the way.

Using Box-Shadow and RGBa

Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. As you can see below, we can use box-shadow to create a drop-shadow, but the shadow color doesn’t work on both dark and light backgrounds. To get around that, we used a color model that is available in new browsers: RGBa.

RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. In the buttons above, the gray shadow that we created for the white background is much too light against the dark background. However, using RGBa we can create a black shadow that is transparent. This allows the shadow to work against any kind of background:

button.awesome, .button.awesome {
	…
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	…
}

That solves our box-shadow problems. All that’s left is a dash of CSS properties and a simple PNG overlay to create a finished button that can be restyled with any color, on any background, and that will work just fine.

The Amazing Border-Radius

Creating objects with rounded edges has always been a mess on the Web; after all, every object on the Web is a rectangle. CSS3 makes our lives a little easier by implementing an incredibly easy way to round off objects without sliding doors or obnoxious background elements. With these buttons, we’re using a standard background color and a PNG overlay to give them depth. We are not using a background image to round the edges.

button.awesome, .button.awesome {
	…
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	…
}

Currently, Webkit (Safari, Chrome) and Firefox have slightly different implementations of border-radius. Webkit will round off functional elements (like images), while Firefox will not. However, both will very cleanly round off an object and mask the background image, color or both (as with our buttons).

If you get in close, you can see that the borders behave a little strangely at the pixel level, but for the most part border-radius is a great way to bring rounded edges into your design without the mess. Here’s the complete CSS for these buttons:

button.awesome, .button.awesome {
	…
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	…
}

Final Touches

We’ve created the standard buttons you can see above, but another great thing about buttons that don’t use images is that we can create any color we want and with some simple class names generate an entire repertoire of buttons that we can call on any time. This is great for creating a reusable set of buttons that can be adapted to your or your clients’ style guide. Check out the color codes that we are using:

.blue.awesome {
	background-color: #2daebf;
}

.red.awesome {
	background-color: #e33100;
}

.magenta.awesome {
	background-color: #a9014b;
}

.orange.awesome {
	background-color: #ff5c00;
}

.yellow.awesome {
	background-color: #ffb515;
}

These simple classes allow us to quickly call on the button we want to get the action we need users to take. We’ve used similar methods in the buttons we’ll walk through in the next few sections.

Our last step is sizing. Without a sliding-doors situation our button size is only limited by the size of our overlay image (and in future buttons, not even by that). We’ll use a few classes (small, medium and large) to create sizes that we can call in different situations.

The buttons in various sizes: an overview.

And that’s it! A scalable, easily configured set of buttons that works in all browsers (through graceful degradation) and will get you the impact you want. In the next few sections we’ll build on these buttons to show you how CSS3 can push these even further in some interesting directions.

See the live demo »

We’ve created a live demo page for these buttons; it’s in a playground, where we create small side projects and cool toys. We’ll be linking to the playground examples throughout this post and the rest of our series.

A note about compatibility: true to form, IE8 does not support border-radius. At ZURB, we’ve adopted a “graceful degradation” paradigm, so these corners will be square in IE. In our experience, the additional development cost for elements like this is not worth it, and we rely on these properties to cleanly degrade and not damage the layout or readability. These buttons are no exception: they are still as clickable in IE as anywhere else, just not quite as pretty.

Step 2: Radioactive Buttons

Now that we’ve gotten our feet wet with CSS3, let’s go in a different direction. For a recent client project, we wanted to create a stylized, attractive and eye-catching call to action for the home page. We came up with the idea of a radioactive button, a button that actually pulses on the page for more attention.

Kitschy? Maybe a little. But despite its impracticality, for some websites and clients, the “Wow” factor—that feeling the user gets when they arrive at a website and say, “Oooh, ahhh!”—can’t be ignored. Where we only used to have , thanks to some tricks we’ve already covered (and one we haven’t), we can move beyond that terrifically obnoxious blink tag and explore a whole new range of opportunities to animate using pure CSS.

Animation: No JavaScript Required

The secret to the radioactive button is in a new CSS3 property called animation (or, as it currently exists, -webkit-animation and -moz-animation). Our radioactive buttons are structurally and stylistically identical to the buttons in step 1, but with one important change. In lieu of a static drop-shadow, we’ve used the box-shadow property to create a glow around the button. With “glowing shadow” added, the next step is to use CSS3 animation to dim and brighten it.

Creating the Animation

The first step in our radioactive awesomeness is to create a timed event that modifies existing CSS properties. Check out this odd-looking property:

@-webkit-keyframes greenPulse
{
	from {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
	50% {
		background-color: #91bd09;
		-webkit-box-shadow: 0 0 18px #91bd09;
	}
	to {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
}

Here’s how the code works:

@-webkit-keyframes tells the browser that we’re defining an animation based on keyframes, or points in the animation to where properties will change. The browser then knows to smoothly transition between those frames.
greenPulse is the name of the animation. We need this to attach to objects later on.
from { … } defines the starting point of the animation; in our case, a certain background color for the button and a box-shadow color (particularly, one that disappears into the background).
50% { … } means that one change happens halfway through the animation.
to { … } defines the last frame of the animation. Note that animations always return to their from state—they don’t stop on the last frame. This means that a smooth animation needs to begin and end with the same properties and values.

All right, we’ve created the animation. It takes an object and over a set time changes the box-shadow color to green and then back to gray. Now, we just have to make it active by applying the animation to our buttons.

.green.button {
	…
	-webkit-animation-name: greenPulse
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	…
}

Pretty cool, isn’t it? -webkit-animation has many potential uses and, when combined with some very simple JavaScript (like onclick), you can create very rich effects and interaction without resorting to a JavaScript effects library.

See the live demo »

Check out the live demo of radioactive buttons in our playground. For maximum awesomeness, check it out in Safari 4; radioactive buttons use some Webkit-specific properties that aren’t implemented well in Chrome quite yet.

Nice, Simple, User-Friendly Buttons, Google-Style

Our last example was inspired by some recent changes made to one of the most trafficked pages on the Web: the Google search page. In addition to enlarging the search field and text size, Google also rolled out some new buttons for Webkit-based browsers (notably its own, Chrome).

These buttons incorporate everything that makes our buttons in this article great, with one cool trick: no images at all. Google has used a new property called -webkit-gradient to generate a gradient using only CSS.

Using CSS Gradients

Gradients in CSS are cool because they are a CSS function, much like url(), which means that we can use gradients anywhere images go, including in the background or in borders (don’t worry, we’ll get to border-image in a later post). Here’s how gradients work:

.g-button {
	…
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));
	…
}

Let’s break this down:

linear means this is a linear gradient, as opposed to radial. This changes the color across a single axis, rather than in concentric circles.
0% 0%, 0% 100% are coordinates. We’re saying that the gradient begins at 0% X, 0% Y and ends at 0% X, 100% Y: top-left corner to bottom-left corner. We could use top-left, bottom-left just as well.
from(rgb(255, 255, 255)) is the starting color for the gradient. If the syntax looks familiar, it should be: it’s very similar to the syntax for @-webkit-keyframes.
to(rgb(221, 221, 221)) is the ending color. While we have only used RGB here, you can see how gradients could get really interesting if we use RGBa and are able to control the opacity of points on the gradient.

The rest of the button is ordinary: padding, border-radius and all the fun things we’ve gone over so far. Gradients is the star here, though, and it has thousands of potential uses. Here, we’ve created (albeit in Google’s footsteps) rich, engaging buttons that are 100% CSS, no images required.

See the live demo »

You can see a live demo of these buttons in the playground, or simply visit the Google search home page in a Webkit browser.

Coming Up: Better, Stronger, Faster Design

This is the first of the articles that take advantages of the powerful new features coming in CSS 3. In the following posts, we’ll show you how CSS3 not only can make implementation faster and easier, but can help you really fly off the rails and push CSS to its breaking point while creating impressive visual effects.

Would you like to see more similar posts on Smashing Magazine in the future?(opinion)

You may be interested in the following related posts:

References and Resources

(al)

pointer-events for HTML in Firefox 3.6

2009-12-01T15:59:32Z

The pointer-events CSS property has long been available as part of SVG as a way to control if a mouse event should be sent to the element directly underneath the mouse or passed through to an element underneath it. In Firefox 3.6 we’ve extended the property to allow it to apply to normal HTML content as well.

For SVG you can set the pointer-events property to one of several values, but for HTML you can only set it to one of two values: auto or none.

.foo {
  pointer-events: none;
}

When pointer-events is set to none, pointer events are passed through the target element and are instead sent to the element that is underneath it.

.foo {
  pointer-events: auto;
}

When pointer-events is set to auto, pointer events are handled normally. That is, the element blocks the events from being passed down to a lower element.

Here’s a real world example from Paul Rouget. You will need a Firefox 3.6 beta to see it in action.

Click the pointer-events: none checkbox under the image to see it change.

He’s replicated the tag list that’s on the front page of twitter.com. (Note: you have to not be logged in to see the tag list.) If you go and look at it on twitter you’ll notice that it fades off on the right hand side. This is done with a transparent, faded image that sits on top of the underlying box. The tags underneath are clickable links but the image blocks events from being sent to the ones underneath the fade.

What Paul has done is show how you can use the pointer-events property to allow you to click on the underlying links even with a fade on top of it.

Make an Editable/Printable HTML Invoice

2009-12-01T13:56:48Z

I always like how in FreshBooks to edit invoices you literally just click and interact directly with a web page that looks like an invoice. I got to thinking it would be a kinda cool idea to create an editable HTML invoice of my own. This of course can’t do nearly all the awesome stuff FreshBooks can do, but it might be useful to some of you with extremely lightweight invoicing needs.

View Demo Download Files

A bunch of <textarea>s

You can pre-set values of textarea elements in HTML just by putting text in between the opening and closing tag. So all it takes to make editable elements on a web page is use textareas. There are a additional bonuses to using textareas. For one, they are real form elements, so you could theoretically wrap this thing in form tag, put a submit button on it, and write some PHP to process it and do other stuff with it. For another, browsers tend to save the values of form elements. So if you, say, accidentally refreshed the page while working on it, the values you changed so far would be fine.

Why the heck would you do this with HTML and not with regular desktop software that is built for this kind of thing?

Good point, voice in my head. Well for one thing, this requires zero software other than your browser. If you put this up on a secret place on your website, you could theoretically access it from any computer in the world with internet access and a printer and spit out an invoice.

It’s pretty trivial to print to PDF these days, so ultimately while you are printing it, you could alternatively save to PDF which gives you a real document for emailing or archiving or whatever. It’s just a little hard to edit after the fact.

Clean Prints

If you want to get a totally clean print of this thing, check out thise print options from Firefox:

Basically, turn off all the header/footer stuff and turn on the background color printing.

Hey ya’ll, quick reminder here: I wrote a book! It’s called Digging Into WordPress and you can get it here.

css gradients in Firefox 3.6

2009-11-30T18:15:25Z

Firefox 3.6 includes many CSS improvements. In this post we’re going to show you how to use CSS gradients.

If you are running the latest beta of Firefox 3.6, you should check out our interactive demo and take a look at the corresponding code. Use the radio buttons to switch different style options on or off.

Backgrounds with CSS Gradients

Using CSS gradients in a background allows you to display smooth transitions between two or more specified colors without having to use images. This in turn reduces download time and bandwidth use, looks better while zooming, and lets you create a more flexible layout.

Firefox 3.6 supports two kinds of CSS gradients: linear (-moz-linear-gradient) and radial (-moz-radial-gradient).

Linear Gradients

To create a linear gradient, you’ll need to set a starting point and a direction (or angle) for the gradient and to define the color stops.

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Starting Point. The starting point works just like background position. You can set the horizontal and the vertical positions as a percentage, in pixels, or using left/center/right for horizontal, and top/center/bottom for vertical. Positions start from the top left corner. If you don’t specify the horizontal or the vertical position, it will default to center.

For example, here’s a linear gradient that starts at the center (horizontal) and top (vertical), and goes from blue to white:

  .linear_gradient_square {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: -moz-linear-gradient(top, blue, white);
  }

One that starts left (horizontal) and center (vertical):

    background: -moz-linear-gradient(left, blue, white);

And a gradient starting left (horizontal) and top (vertical):

    background: -moz-linear-gradient(left top, blue, white);

Angle. As you can see above, if you don’t specify an angle, it is defined automatically based on the start position. If you would like more control over the direction of the gradient, you can set the angle as well.

For example, the following gradients have the same starting point of left center, but the one on the right hand-side also has an angle of 20 degrees.

    background: -moz-linear-gradient(left 20deg, black, white);

When specifying the angle, remember that is it the angle between a horizontal line and the gradient line, going counter-clockwise. So using 0deg will generate a left to right horizontal gradient, while 90deg will create a vertical gradient from the bottom to the top.

    background: -moz-linear-gradient(<angle>, red, white);

Color Stops. In addition to start position and angle, you should specify color stops. Color stops are points along the gradient line that will have the specified color at the specified location (set as a percentage or length). The number of color stops is unlimited. If you use a percentage for the location, 0% represents the starting point, and 100% is the ending point, but values above and below those can be used to achieve the desired effect.

Here’s a simple example with three color stops. Because no point is specified for the first and last colors, they will default to 0% and 100%.

    background: -moz-linear-gradient(top, blue, white 80%, orange);

Colors will be evenly spaced if no position is specified.

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Transparency. Gradients also support transparency. This can be useful, for example, when stacking multiple backgrounds. Here’s a combination of two backgrounds: one image and one linear gradient from white to transparent white.

.multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}

Radial Gradients

The syntax for radial gradients is very similar to that of linear gradients:

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

In addition to the start position, the direction, and the colors, which you have already seen in linear gradients, radial gradients allow you to specify the gradient’s shape (circle or ellipse) and size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover).

Color stops. Just like with linear gradients, you should define color stops along the gradient line. The following circles have the same color stops, but the gradient on the left defaults to evenly spaced colors, while the one on the right has a specific position for each color.

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Shape. Here you can see the difference between the two possible shapes, a circle (on the left) and an ellipse (on the right), both with a bottom left starting point:

 .radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

Size. The different options for size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover) refer to the point used to define the size of the circle or ellipse.

Example: closest-side vs. farthest corner for an ellipse.
The following two ellipses have different sizes. The one on the left is set by the distance from the start point (center) to the closest-side, while the one on the right is determined by the distance from the start point to the farthest corner.

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side vs. farthest-side for a circle.
The size of the circle on the left is determined by the distance between the start point (the center) and the closest side, while the one on the right is the distance between the start point and the farthest side.

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
 background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

Example: contained circle.
Here you can see the default circle on the left, and the version of the same gradient but contained on the right.

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

Repeating Gradients

If you would like to repeat a gradient, you should use -moz-repeating-linear-gradient and -moz-repeating-radial-gradient.

In the examples below, four color stops are specified in each case, and are repeated indefinitely.

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

Demo

Check out our interactive demo of linear and radial gradients for more examples.

Note that the gradient syntax has changed between Firefox 3.6 beta 1 and beta 2, so if you used gradients with beta 1, you may need to update your code.

Adobe AIR 2 brings Advanced CSS3 Support to the Desktop

2009-11-17T15:47:00Z

Adobe today released a public beta of AIR 2, available for download from their Adobe Labs website, with the final release expected somewhere in the first half of 2010. Adobe AIR 2 offers a number of improvements and advantages over its predecessor, including advanced support for CSS3 & HTML5 thanks to an updated version of [...]

Le rythme vertical en CSS

2009-11-17T12:33:35Z

C’est au tour de Christophe Andrieu de prendre le clavier. Décidément, on n’est plus chez soi !

Même si sur le moment il ne m’avait pas frappé outre mesure, je repense assez fréquemment au coup de gueule de Gilles Vauvarin lors de sa conférence à Paris-web cette année : il était consterné que les intégrateurs ne respectent pas le rythme vertical de ses designs.

Ce fut l’occasion de me rappeler à quel point c’était super, le rythme vertical. Et à quel point j’en avais bavé à chaque fois que j’ai essayé de l’implémenter en CSS.

(C’est quoi le rythme vertical ? Allez lire cet excellent article de David sur le sujet)

Blueprint et les navigateurs sont dans un bateau

Remotivé par le sujet, j’attaque donc mon nouveau design avec Blueprint, framework CSS bien connu pour gérer intelligemment ce genre de problématiques délicates. On me l’a notamment conseillé pour éviter de me prendre la tête avec les calculs d’interlignages en em, qui donneraient des cauchemars à Pythagore en personne.

Hélas ! J’ai déchanté assez vite. Conserver un rythme vertical avec un vrai design (même minimaliste) est excessivement complexe, Blueprint ou pas Blueprint.

J’ai notamment buté sur les arrondis générés par les moteurs de rendu des navigateurs, qui ne sont apparemment pas calculés de la même manière.

Comme tout est défini en em, on se retrouve assez rapidement avec des styles générés assez exotiques : si mon line-height est de 1.5 et ma font-size de base de 11 px (12 px c’était trop facile), mon line-height généré va être de 1.5 × 11 = 16.5 px… et les demi-pixels, les navigateurs, en gros, n’aiment pas.

Ou du moins, ils ne l’interprètent pas tous de la même façon (ou alors j’ai vraiment raté un train). Ce qui oblige à une certaine gymnastique pour retomber sur des calculs de pixels générés entiers – qui eux sont interprétés de la même manière partout. Par exemple là, pour avoir un line-height généré de 17 px (mettons), je vais devoir mettre line-height:1.565… et encore, ça reste un arrondi.

Imaginez maintenant qu’on rajoute des bordures CSS, des images, bref toutes sortes de contenus et de styles qui décalent tout au fur et à mesure avec toujours plus d’arrondis.

Je ne vous fais pas de dessin, c’est un enfer !

Tout passer en pixels ?

Bref, j’ai été vite écœuré de cette mélasse d’em qu’on nous a pourtant appris à aimer dogmatiquement durant toutes ces années d’évangélisation aux bonnes pratiques.

D’où une question bien légitime : « mais pourquoi n’utilise-t-on pas tout simplement le pixel, unité native de notre medium ? ».

Évidemment, on sait qu’IE ne comprend pas grand-chose aux agrandissements de textes dès qu’on lui parle en pixels… et on entre alors dans des considérations plus philosophiques que techniques. Doit-on laisser IE sur le carreau ? N’est-il de toute manière pas intéressant de conserver des unités relatives pour les marges entre paragraphes (par exemple), afin de conserver nativement des proportions harmonieuses ?

Stéphane en parlait il y a deux ans de ça, les choses n’ont pas évolué depuis, et c’est bien dommage.

Bref, une piste à oublier, probablement.

Vers un mode de calcul normalisé pour tous les navigateurs ?

Revenons aux em : pourquoi les moteurs graphiques des navigateurs sont-ils infoutus de gérer les arrondis de décimales de pixels de la même manière ?

Y a-t-il des groupes de travail là-dessus ? Des ressources en ligne ? Est-ce que j’ai loupé quelque chose en route ?

Si vous avez des éléments de réponse je suis avide de les entendre…

Pour le moment, j’ai cette phrase de Stéphane qui me reste en travers de la gorge : « le rythme vertical pour moi, ne peut se tenir qu’avec des bricoles en JS : CSS n’est pas assez solide pour ça ».

Dites-moi que c’est faux !

Font Squirrel | Handpicked free fonts for graphic designers with commercial-use licenses.

2009-11-14T23:35:39Z

Bookmark this on Delicious - Saved by neolao to font design web - More about this bookmark

Survol des hyperliens

2009-11-14T19:08:23Z

Éric a récemment abordé le cas des boutons activés, je prends le relais et je m’interroge cette fois sur le survol des liens.

La convention veut que les liens soient identifiés par le soulignement de ceux-ci et je reste donc dans ce cas classique. Bien souvent ensuite (dans le but de signaler l’interaction) ce soulignement sera retiré au survol.

<style type="text/css">
    a:focus,
    a:hover
    {
        text-decoration:none;
    }
    a:active
    {
        outline:none;
    }
</style>

Remarquez au passage :

que je complète mon sélecteur pour le cas d’une navigation au clavier (j’y reviendrai plus tard) ;
la définition de l’état actif, trouvée via ce très bon billet sur la suppression de l’outline.

Je ne sais pas pour vous, mais j’ai tendance à trouver cette technique (pourtant répandue !) contre-intuitive. C’est comme si le lien « disparaissait » au survol, et que du coup il n’était plus possible (en apparence) de cliquer.

J’aurais tendance à préférer tout autre mise en forme au survol. Comme par exemple un changement de couleur. On pourrait même reprendre celle des liens visités tiens…

<style type="text/css">
    a
    {
        color:#1C6280;
        background-color:inherit;
    }
    a:hover,
    a:focus,
    a:visited
    {
        color:#1C6280;
        background-color:inherit;
    }
    a:active
    {
        outline:none;
    }
</style>

J’aimerais lire vos avis et vos arguments, je n’arrive pas à trancher cette question.

Question bonus : les sélecteurs enrichis pour les navigations au clavier, ça ne pose pas de souci ? Je pense notamment à une personne qui d’une part survol un lien à la souris, tant en tabulant sur un autre lien en parallèle : il se retrouve alors avec deux liens mis en évidence à la fois.

Bordure entre deux colonnes

2009-11-13T16:23:29Z

Petite astuce de rien du tout pour créer une bordure d’un ou plusieurs pixels entre deux colonnes.

C’est difficile à faire ?

Pas vraiment, mais ça se complique quand on souhaite que cette bordure soit toujours de la hauteur de la colonne le plus grande. Faut-il la placer sur le conteneur de gauche ou de droite ?

Solutions

On peut dans un premier temps penser à utiliser la techniques des colonnes factices et placer un background-image sous les colonnes, mais cela présente deux petits soucis :

la largeur des colonnes sera alors fixée ;
on fait appel à une image alors qu’un simple style CSS pourrait suffire.

Voici la méthode que j’utilise à la place :

<div style="overflow:hidden;height:1%;">
    <div style="float:left;width:200px;border-right:5px solid #000;">
        <p>
            Colonne A.
        </p>
    </div>
    <div style="float:left;width:200px;border-left:5px solid #000;margin-left:-5px;display:inline;">
        <p>
            Colonne B.
        </p>
    </div>
</div>

L’astuce consiste donc à placer deux bordures et à les faire se superposer ensuite via une marge négative de la largeur de la bordure. Simple, mais efficace.

Quickie CSS3 Tricks with Fallbacks

2009-11-06T11:45:39Z

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let’s look at a couple of quick, simple, cheezy examples.

Growing Links

Scaling an element is really fun any easy with CSS3. We don’t need CSS3 to do this, we could use relative positioning, offset the position, increase the width, height, and font size. But wow, that’s a heck of a lot of work when we can just apply a scale factor and be done with it. These links get their corners more rounded and a bit of a drop shadow applied on hover as well.

.grower {
    display: block;
    margin: 0 auto;
    width: 120px;
    padding: 2px 5px;
    border: 1px solid #2f2626;

    background: rgba(237,95,0,0.3);
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.grower:hover {
    background: rgba(237,95,0,1.0);
    border-color: rgba(237,95,0,1.0);

    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2); 

    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Blurred Edges

Using multiple shadows behind slightly transparent text can blurs the edges of text without the need of any images. A transition can fade the text out, track out the letters, and change the font size as well.

h3 {
    height: 100px;
    font: bold 80px Helvetica, Sans-Serif;

    color: black; /* fallback */
    color: rgba(0,0,0,0.2);

    text-shadow:
        0 0 2px rgba(0,0,0,0.2),
        0 0 4px rgba(0,0,0,0.2),
        0 0 6px rgba(0,0,0,0.2);
    -webkit-transition: all 0.2s linear;
}
h3:hover {
    color: rgba(28, 28, 28, 0.2);
    opacity: 0.8;
    letter-spacing: 15px;
    font-size: 70px;
}

Elliptical Rounding

The poster child for progressive enhancement is border-radius. But did you know you don’t have to create perfectly circular rounded corners? We’ll create an oval here and give ‘er a spin just for fun (WebKit only… Mozilla has syntax for transitions but isn’t doing them yet).

.oval {
    background: #fe4902;
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;

    /* Notice the slightly different syntax */
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px 50px;

    -webkit-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;  /* non functional just yet */
}
.oval:hover {
    -webkit-transform: rotate(720deg);
}

Multiple Backgrounds

If more widely supported, multiple backgrounds would be amazing timesavers. Alas, we can only use them for optional subtle enhancements now, where a fallback of nothing at all is acceptable.

body {
    background:
        url(../images/top-right.png) top right fixed no-repeat,
        url(../images/top-left.png) top left fixed no-repeat,
        url(../images/bot-left.png) bottom left fixed no-repeat,
        url(../images/bot-right.png) bottom right fixed no-repeat;
    background-color: #2f2626;
}

View Demo Download Files

Hey ya’ll, quick reminder here: I wrote a book! It’s called Digging Into WordPress and you can get it here.

two important api changes – CSS gradients and the media load event

2009-11-04T18:55:03Z

Robert O’Callahan has been posting updates in his weblog about changes that we’re going to be making that are web-facing. It’s worth summarizing two here for web developers.

Removing the media element ‘load’ event.

Yesterday I checked in a patch that removes support for the ‘load’ event on <video> and <audio> elements. We simply never fire it. Also, the networkState attribute is now never NETWORK_LOADED. When we’ve read to the end of the media resource, networkState changes to NETWORK_IDLE. We plan to ship this change for Firefox 3.6.

This API has been removed based on consensus from everyone who are doing HTML5 video implementations and there are lots of other options for events that Robert goes over in his post.

Changing our CSS Gradient Syntax

We landed support for a form of CSS gradients on trunk a while ago, but we got considerable feedback that our syntax — which was an incremental improvement of Webkit’s syntax, which basically exposes a standard gradient API in the most direct possible way — sucked. A bunch of people on www-style got talking and Tab Atkins produced a much better proposal. Since we haven’t shipped our syntax anywhere yet, dropping it and implementing Tab’s syntax instead was a no-brainer. So Zack Weinberg, David Baron and I did that (using a -moz prefix of course), and today it landed on trunk. It should land on the Firefox 3.6 branch shortly. It’s unfortunate to land something new like this after the last beta, but in this case, it seems like the right thing to do instead of shipping CSS gradient syntax that we know nobody wants.

We’ve never shipped the “bad” CSS gradient syntax in a final release, but it is in our first beta. We’ll be updating it before we make our final release of 3.6. Stay turned for the new syntax on hacks.

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

2009-11-04T17:00:58Z

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you [...]