35 Days Articles
-
opacity in Firefox 3.5
This is a very short post, but it’s worth putting up because it shows how browser features go from a vendor-specific implementation to a fully supported standard. In Firefox 3.5 we no longer support the Mozilla-specific CSS property -moz-opacity. Developers wanting to set the opacity of an element should use the standard <a href="https://developer.mozilla.org/en/CSS/opacity">opacity</a> property […]
-
a short introduction to media queries in Firefox 3.5
This post is by Eric Shepherd, who leads Mozilla’s documentation project at the Mozilla Developer Center. In this day and age, it’s important for web content to support rendering on an increasingly wide variety of devices. Not only do users expect to use your content on their home computer, or read it printed on paper, […]
-
slick tables with css 3 selectors
This article and demo come to us courtesy of Ivan Enderlin, author of the HOA Framework and longtime web developer. This is the article that accompanies the demo below, showing the use of CSS3 selectors implemented in Firefox 3.5 for easy and stylish tables. See this demo step by step. Basic HTML Table First, we […]
-
taming long words with word-wrap
This post is from Les Orchard, who works on Mozilla’s web development team. Web browsers have a long history of sharing features between them. The word-wrap CSS property is a feature that originally came from Microsoft and is included in CSS3. Now available in Firefox 3.5, this CSS property allows the browser to arbitrarily break […]
-
add some ambiance to your videos
Note: this post was originally posted to the silverorange labs blog and was written by Mike Gauthier. Mike and other people at silverorange put this demo together for the 35 days project and we thank them. Also note that the demo below is extremely CPU-intensive. If you’re interested in the effect and you don’t have […]
-
css transforms: styling the web in two dimensions
One feature that Firefox 3.5 adds to its CSS implementation is transform functions. These let you manipulate elements in two dimensional space by rotating, skewing, scaling, and translating them to alter their appearance. I’ve put together a demo that shows how some of these functions work. There are four animating objects in this demo. Let’s […]
-
new CSS3 properties in Firefox 3.5 – nth-*
Firefox 3.5 supports several new CSS3 selectors. In this post we’ll talk about four of them: :nth-child, :nth-last-child, :nth-of-type and :nth-last-of-type. Each of these is called a Pseudo-class and can be used to apply styles to existing selectors. The best way to describe how this works is with some examples. :nth-child This pseudo-class lets you […]
-
using svg filters to display 3D data
This demo is from Hans Schmucker, who has made a large number of interesting demos using Firefox 3.5 features. Tomorrow we’ll also have another neat demo from him as well. Hans has used the CSS filter property and an SVG filter to do something really interesting – rendering a 3D perspective from Voxel data. Hans’ […]
-
elliptical borders in Firefox 3.5
Today’s demo comes from Lim Chee Aun, the creator of the Phoenity icons and themes, and web developer in Malaysia. The border-radius property is probably one of the most interesting parts of the CSS3 specification, where it allows you to create rounded corners on elements. For example: div { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; […]
-
new CSS3 properties in Firefox 3.5 – *-of-type
In today’s feature post we’ll talk briefly about three new CSS3 pseudo-classes: only-of-type, first-of-type and last-of-type. These are all very similar to the *-nth classes we covered in an earlier post. first-of-type and last-of-type These two pseudo-classes allow you to select the first and last item in a list of siblings within a particular element. […]