Declarations Archives

Examples on how to use certain CSS3 declarations.

On opacity and complexity

Excerpt: My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so: What would be the best way to do this? One would be to make an image sprite of the images two states:

Semantic code: put more in, get more out

Excerpt: IE7 is gaining market share and we can start to use more CSS3 selectors in our day to day code. Because of this, it's worth a quick reminder that the more semantic we make our (X)HTML, the easier to implement the selectors will be. For example, imagine the opportunities with the XFN microformat;

New text declarations in Webkit

Excerpt: The Webkit project have announced support for a new range of CSS declarations, to be used for putting strokes around text. This strikes me as a little strange for two reasons: First, I don't recall and cannot find any kind of public demand for this. Of all the future CSS declarations I'd like to

@font-face: fonts the way you want them

Excerpt: Update: Please see the note at the end of this article. A potentially useful feature of CSS3 is the @font-face rule, which allows the developer to specify a font for the page that may not already be on the client's system. Until now, most web sites have been developed with a small list of 'web sa

A brief introduction to Opacity and RGBA

Excerpt: The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent. div { background-color: rgb(255,0,0); opacity: 1; } Webkit, Gecko and Opera browsers all supp