Webkit CSS Properties
# Linked to 12 May 2010, 04:19 in Links by Sam Brown
A comprehensive list of WebKit-specific CSS properties. (via Daring Fireball)
Center Multiple DIVs with CSS
# Linked to 11 May 2010, 01:43 in Tutorials by Sam Brown
At some point, you may have a situation where you want to center multiple elements (maybe
<div>elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just addmargin: autoand a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced.
Specifics on CSS Specificity
# Linked to 10 May 2010, 10:27 in Articles by Sam Brown
The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.
[Updated Article] : “I am updating it now to fix some inaccuracies in how this concept was presented.”
CSS Posters
# Linked to 6 May 2010, 14:23 in Links by Sam Brown
A showcase of CSS3 posters and text effects as well as my own personal experiment with CSS to create typographic posters from famous quotes.
CSS Vendor Prefixes Considered Important
# Linked to 5 May 2010, 08:01 in Articles by Sam Brown
Lately, there has been a lot of hate towards vendor prefixes. First, PPK wrote about them, and then a some other people did. The proposed solution to the ‘problem’ of vendor prefixes is to get rid of them in favor of one
betaprefix. Simply put: That won’t work.
Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!
# Linked to 4 May 2010, 07:10 in Other by Sam Brown
See the actual animation → or read about how it was done.
The CSS 3 Flexible Box Model
# Linked to 24 April 2010, 09:20 in Tutorials by Kevin Holesh
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
CSS3 Click Chart
# Linked to 23 April 2010, 01:00 in Tips by Sam Brown
A CSS3 Click Chart displaying descriptions, syntax, and live examples of 14 different CSS3 properties and techniques.
Creating a Realistic Looking Button with CSS3
# Linked to 18 April 2010, 12:17 in Tutorials by Levi Figueira
The whole idea is to use a combination of subtle effects to create a three dimensional object. Mike Rundle covers some of the ideas used here in his post about subtlety in interfaces. I’m hoping to expand a bit more on that. The idea is that:
- The button is set into the canvas.
- The texture of the button is different from the canvas and the surface is slightly raised.
- And the text of the button is pressed into it.
Pure CSS Icons
# Linked to 18 April 2010, 10:35 in Code by Sam Brown
Having marvelled at David Desandro’s Opera Logo made entirely in HTML and CSS, I wanted to try a similar experiment for myself. So with a large scoop of border-radius I set about trying to create various ‘common’ icons that could be used in your web apps.