transform-function
The <transform-function> CSS data type denotes a function to apply to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point. Coordinates for 2D graphics There are several coordinates model used when describing transformation. Cartesian coordinates In Cartesian coordinates each point of the Euclidian space is described using two values, the abscissa and the ordinate. Each linear function is described using a 2x2 matrix like: Applying the transformation consists in doing, for each point, the matrix multiplication between both: It is possible to apply several transformation in a raw: With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling or skewing. Coordinates for 3D graphics Functions defining transformations matrix() Gecko (Firefox) accepts a <length> value for and . Syntax Values [a b c d tx ty]
Object Oriented CSS · stubbornella/oocss Wiki
CSS drop-shadows without images
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
CSS Specificity
Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity. Download the PDF Legend: X-0-0: The number of ID selectors, represented by Sharks0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish 0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob*: The universal selector has no value +, >, ~: combinators, although they allow for more specific targeting of elements, they do not increase specificity values:not(x): The negation selector has no value, but the argument passed increases specificity CSS SpeciFISHity You can download the PDF of fishy CSS specificity here Specificity determines which CSS property declaration is applied when two or more declarations apply to the same element with competing property declarations. With CSS3 Selectors, order is even more important, as is understanding specificity: !
A Comprehensive Guide to CSS Resets
This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset
