SpeciFISHity: 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.

X-0-0: The number of ID selectors, represented by Sharks
0-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

Download the specificity chart and read the rest of the SpeciFISHity article here

Named, HSL and RGB Colors

CSS3 adds names colors from SVG and well as colors defined by Hue, Saturation and Lighness. Below is a table that lists all named colors along with their hexidecimal, RGB and HSL values.

Also, check out the CSS3 Color Converter

Named Color Hex RGB HSL
aliceblue #F0F8FF rgb(240,248,255) hsl(208, 100%, 97%)
antiquewhite #FAEBD7 rgb(250,235,215) hsl(34, 78%, 91%)
aqua / cyan #00FFFF rgb(0,255,255) hsl(180, 100%, 50%)
aquamarine #7FFFD4 rgb(127,255,212) hsl(160, 100%, 75%)
azure #F0FFFF rgb(240,255,255) hsl(180, 100%, 97%)
beige #F5F5DC rgb(245,245,220) hsl(60, 56%, 91%)
bisque #FFE4C4 rgb(255,228,196) hsl(33, 100%, 88%)
black #000000 rgb(0,0,0) hsl(0, 0%, 0%)
blanchedalmond #FFEBCD rgb(255,235,205) hsl(36, 100%, 90%)
blue #0000FF rgb(0,0,255) hsl(240, 100%, 50%)
blueviolet #8A2BE2 rgb(138,43,226) hsl(271, 76%, 53%)
brown #A52A2A rgb(165,42,42) hsl(0, 59%, 41%)
burlywood #DEB887 rgb(222,184,135) hsl(34, 57%, 70%)
cadetblue #5F9EA0 rgb(95,158,160) hsl(182, 25%, 50%)
chartreuse #7FFF00 rgb(127,255,0) hsl(90, 100%, 50%)
chocolate #D2691E rgb(210,105,30) hsl(25, 75%, 47%)
coral #FF7F50 rgb(255,127,80) hsl(16, 100%, 66%)
cornflowerblue #6495ED rgb(100,149,237) hsl(219, 79%, 66%)
cornsilk #FFF8DC rgb(255,248,220) hsl(48, 100%, 93%)
crimson #DC143C rgb(220,20,60) hsl(348, 83%, 58%)
cyan / aqua #00FFFF rgb(0,255,255) hsl(180, 100%, 50%)
darkblue #00008B rgb(0,0,139) hsl(240, 100%, 27%);
darkcyan #008B8B rgb(0,139,139) hsl(180, 100%, 27%)
darkgoldenrod #B8860B rgb(184,134,11) hsl(43, 89%, 38%)
darkgray / darkgrey #A9A9A9 rgb(169,169,169) hsl(0, 0%, 66%)
darkgreen #006400 rgb(0,100,0) hsl(120, 100%, 20%)
darkkhaki #BDB76B rgb(189,183,107) hsl(56, 38%, 58%)
darkmagenta #8B008B rgb(139,0,139) hsl(300, 100%, 27%)
darkolivegreen #556B2F rgb(85,107,47) hsl(82, 39%, 30%)
darkorange #FF8C00 rgb(255,140,0) hsl(33, 100%, 50%)
darkorchid #9932CC rgb(153,50,204) hsl(280, 61%, 50%)
darkred #8B0000 rgb(139,0,0) hsl(0, 100%, 27%)
darksalmon #E9967A rgb(233,150,122) hsl(15, 72%, 70%)
darkseagreen #8FBC8F rgb(143,188,143) hsl(120, 25%, 65%)
darkslateblue #483D8B rgb(72,61,139) hsl(248, 39%, 39%)
darkslategray / darkslategrey #2F4F4F rgb(47,79,79) hsl(180, 25%, 25%
darkturquoise #00CED1 rgb(0,206,209) hsl(181, 100%, 41%)
darkviolet #9400D3 rgb(148,0,211) hsl(282, 100%, 41%)
deeppink #FF1493 rgb(255,20,147) hsl(328, 100%, 54%)
deepskyblue #00BFFF rgb(0,191,255) hsl(195, 100%, 50%)
dimgray / dimgrey #696969 rgb(105,105,105) hsl(0, 0%, 41%)
dodgerblue #1E90FF rgb(30,144,255) hsl(210, 100%, 56%)
firebrick #B22222 rgb(178,34,34) hsl(0, 68%, 42%)
floralwhite #FFFAF0 rgb(255,250,240) hsl(40, 100%, 97%)
forestgreen #228B22 rgb(34,139,34) hsl(120, 61%, 34%)
fuchsia / magenta #FF00FF rgb(255,0,255) hsl(300, 100%, 50%)
gainsboro #DCDCDC rgb(220,220,220) hsl(0, 0%, 86%)
ghostwhite #F8F8FF rgb(248,248,255) hsl(240, 100%, 99%)
gold #FFD700 rgb(255,215,0) hsl(51, 100%, 50%)
goldenrod #DAA520 rgb(218,165,32) hsl(43, 74%, 49%)
gray / grey #808080 rgb(128,128,128) hsl(0, 0%, 50%)
green #008000 rgb(0,128,0) hsl(120, 100%, 25%)
greenyellow #ADFF2F rgb(173,255,47) hsl(84, 100%, 59%)
honeydew #F0FFF0 rgb(240,255,240) hsl(120, 100%, 97%)
hotpink #FF69B4 rgb(255,105,180) hsl(330, 100%, 71%)
indianred #CD5C5C rgb(205,92,92) hsl(0, 53%, 58%)
indigo #4B0082 rgb(75,0,130) hsl(275, 100%, 25%)
ivory #FFFFF0 rgb(255,255,240) hsl(60, 100%, 97%)
khaki #F0E68C rgb(240,230,140) hsl(54, 77%, 75%)
lavender #E6E6FA rgb(230,230,250) hsl(240, 67%, 94%)
lavenderblush #FFF0F5 rgb(255,240,245) hsl(340, 100%, 97%)
lawngreen #7CFC00 rgb(124,252,0) hsl(90, 100%, 49%)
lemonchiffon #FFFACD rgb(255,250,205) hsl(54, 100%, 90%)
lightblue #ADD8E6 rgb(173,216,230) hsl(195, 53%, 79%)
lightcoral #F08080 rgb(240,128,128) hsl(0, 79%, 72%)
lightcyan #E0FFFF rgb(224,255,255) hsl(180, 100%, 94%)
lightgoldenrodyellow #FAFAD2 rgb(250,250,210) hsl(60, 80%, 90%)
lightgray / lightgrey #D3D3D3 rgb(211,211,211) hsl(0, 0%, 83%)
lightgreen #90EE90 rgb(144,238,144) hsl(120, 73%, 75%)
lightpink #FFB6C1 rgb(255,182,193) hsl(351, 100%, 86%)
lightsalmon #FFA07A rgb(255,160,122) hsl(17, 100%, 74%)
lightseagreen #20B2AA rgb(32,178,170) hsl(177, 70%, 41%)
lightskyblue #87CEFA rgb(135,206,250) hsl(203, 92%, 75%)
lightslategray / lightslategrey #778899 rgb(119,136,153) hsl(210, 14%, 53%)
lightsteelblue #B0C4DE rgb(176,196,222) hsl(214, 41%, 78%)
lightyellow #FFFFE0 rgb(255,255,224) hsl(60, 100%, 94%)
lime #00FF00 rgb(0,255,0) hsl(120, 100%, 50%)
limegreen #32CD32 rgb(50,205,50) hsl(120, 61%, 50%)
linen #FAF0E6 rgb(250,240,230) hsl(30, 67%, 94%)
maroon #800000 rgb(128,0,0) hsl(0, 100%, 25%)
mediumaquamarine #66CDAA rgb(102,205,170) hsl(160, 51%, 60%)
mediumblue #0000CD rgb(0,0,205) hsl(240, 100%, 40%)
mediumorchid #BA55D3 rgb(186,85,211) hsl(288, 59%, 58%)
mediumpurple #9370DB rgb(147,112,219) hsl(260, 60%, 65%)
mediumseagreen #3CB371 rgb(60,179,113) hsl(147, 50%, 47%)
mediumslateblue #7B68EE rgb(123,104,238) hsl(249, 80%, 67%)
mediumspringgreen #00FA9A rgb(0,250,154) hsl(157, 100%, 49%)
mediumturquoise #48D1CC rgb(72,209,204) hsl(178, 60%, 55%)
mediumvioletred #C71585 rgb(199,21,133) hsl(322, 81%, 43%)
midnightblue #191970 rgb(25,25,112) hsl(240, 64%, 27%)
mintcream #F5FFFA rgb(245,255,250) hsl(150, 100%, 98%)
mistyrose #FFE4E1 rgb(255,228,225) hsl(6, 100%, 94%)
moccasin #FFE4B5 rgb(255,228,181) hsl(38, 100%, 85%)
navajowhite #FFDEAD rgb(255,222,173) hsl(36, 100%, 84%)
navy #000080 rgb(0,0,128) hsl(240, 100%, 25%)
oldlace #FDF5E6 rgb(253,245,230) hsl(39, 85%, 95%)
olive #808000 rgb(128,128,0) hsl(60, 100%, 25%)
olivedrab #6B8E23 rgb(107,142,35) hsl(80, 60%, 35%)
orange #FFA500 rgb(255,165,0) hsl(39, 100%, 50%
orangered #FF4500 rgb(255,69,0) hsl(16, 100%, 50%)
orchid #DA70D6 rgb(218,112,214) hsl(302, 59%, 65%)
palegoldenrod #EEE8AA rgb(238,232,170) hsl(55, 67%, 80%)
palegreen #98FB98 rgb(152,251,152) hsl(120, 93%, 79%)
paleturquoise #AFEEEE rgb(175,238,238) hsl(180, 65%, 81%)
palevioletred #DB7093 rgb(219,112,147) hsl(340, 60%, 65%)
papayawhip #FFEFD5 rgb(255,239,213) hsl(37, 100%, 92%)
peachpuff #FFDAB9 rgb(255,218,185) hsl(28, 100%, 86%)
peru #CD853F rgb(205,133,63) hsl(30, 59%, 53%)
pink #FFC0CB rgb(255,192,203) hsl(350, 100%, 88%)
plum #DDA0DD rgb(221,160,221) hsl(300, 47%, 75%)
powderblue #B0E0E6 rgb(176,224,230) hsl(187, 52%, 80%)
purple #800080 rgb(128,0,128) hsl(300, 100%, 25%)
red #FF0000 rgb(255,0,0) hsl(0, 100%, 50%)
rosybrown #BC8F8F rgb(188,143,143) hsl(0, 25%, 65%)
royalblue #4169E1 rgb(65,105,225) hsl(225, 73%, 57%)
saddlebrown #8B4513 rgb(139,69,19) hsl(25, 76%, 31%)
salmon #FA8072 rgb(250,128,114) hsl(6, 93%, 71%)
sandybrown #F4A460 rgb(244,164,96) hsl(28, 87%, 67%)
seagreen #2E8B57 rgb(46,139,87) hsl(146, 50%, 36%)
seashell #FFF5EE rgb(255,245,238) hsl(25, 100%, 97%)
sienna #A0522D rgb(160,82,45) hsl(19, 56%, 40%)
silver #C0C0C0 rgb(192,192,192) hsl(0, 0%, 75%)
skyblue #87CEEB rgb(135,206,235) hsl(197, 71%, 73%)
slateblue #6A5ACD rgb(106,90,205) hsl(248, 53%, 58%)
slategray / slategrey #708090 rgb(112,128,144) hsl(210, 13%, 50%)
snow #FFFAFA rgb(255,250,250) hsl(0, 100%, 99%)
springgreen #00FF7F rgb(0,255,127) hsl(150, 100%, 50%)
steelblue #4682B4 rgb(70,130,180) hsl(207, 44%, 49%)
tan #D2B48C rgb(210,180,140) hsl(34, 44%, 69%)
teal #008080 rgb(0,128,128) hsl(180, 100%, 25%)
thistle #D8BFD8 rgb(216,191,216) hsl(300, 24%, 80%)
tomato #FF6347 rgb(255,99,71) hsl(9, 100%, 64%)
turquoise #40E0D0 rgb(64,224,208) hsl(174, 72%, 56%)
violet #EE82EE rgb(238,130,238) hsl(300, 76%, 72%)
wheat #F5DEB3 rgb(245,222,179) hsl(39, 77%, 83%)
white #FFFFFF rgb(255,255,255) hsl(0, 100%, 100%)
whitesmoke #F5F5F5 rgb(245,245,245) hsl(0, 0%, 96%)
yellow #FFFF00 rgb(255,255,0) hsl(60, 100%, 50%)
yellowgreen #9ACD32 rgb(154,205,50 hsl(80, 61%, 50%);

CSS Value Lengths, Times, Frequencies and Angles

Many of the property values are keywords unique to that property. But for some properties, the values can include length, frequency or time values or units. In this article we go over all the math type units that can be applied as property values in CSS.

CSS Length Values

In terms of lengths, there are both relative and absolute lengths. Here is a quick summary of all of the length value types

unit meaning
em relative to the font size of the parent element.
ex relative to the height of the lowercase ‘x’
gd used in East Asian typography, not relevant to us
rem relative to the root font size
vw relative to the viewport width: the viewport width is 100vw
vh relative to the viewport height: the viewport height is 100vh
vm relative to viewport width or height, whichever is smaller
ch relative to the size of the 0 (zero)
px relative the screen resolution not the viewport size, : generally 1point, or 1/72 or an inch.
in an inch
cm a centimeter
mm millimeter
pt point is 1/72 of an inch
pc pica, or 1/12 of a point
% relative to the parent element, it’s normally defined self or other element defined by the property.

The most common value types in CSS include pixels and percents.

Pixels can be considered both a relative and absolute. Pixels are a relative measurement because the measurement is based on the screen resolution of the monitor or screen, rather than the viewport size. However, pixels are also an absolute size because lengths given in pixels are immutable: they can only be increased via zoom features.

Images, such as jpeg photos and gifs have an absolute width and height, defined in pixels. Increasing or decreasing the size of these image types with CSS or via the width and height attributes of the image tag distort the image.

Angles, Times and Frequencies:

With some of the new CSS3, such as transforms and animations, length units do not suffice. We also need to learn and understand angles, times and frequencies. These measurements have been around and used in aural style sheets, but now with browser support for transitions, transforms and animations, angles and times have become relevant to the screen as well. The units of angles, times and frequencies are shown and described in greater detail below.

unit meaning
deg degrees
grad grads
rad radians
turn turns
ms milliseconds
s seconds
Hz Hertz
kHz kilohertz

Originally, all of the above units, frequencies and times, other than the new ‘turn’ unit, were introduced as aural values. The units used for aural style sheets are angles, specified in rad (radians), deg (degrees), or grad (gradians). Frequencies are specified in Hz (Hertz) or kHz (kilohertz).

Times are specified in ms (milliseconds), or s (seconds). The default unit for all of the length, angle, time and frequency values is zero, and all the values are interpreted as floats.

CSS Angle Measurement

Angle measurement types include degrees, grads, rads and turns.

Degrees

Degrees range from 0 to 360deg, with those two being equal. Positive degrees go clockwise, negative degrees go counter clock wise. For example, -90deg is one quarter of the way around counter clock-wise, turning it on its left side. 90deg will turn it clockwise 90 degrees.
The CSS for the the image below reads (in part):

 .image1, image5 { 
                        -webkit-transform: rotate(-5deg);
                        -ms-transform: rotate(-5deg); 
                       transform: rotate(-5deg);
              }
  .image2, image4 {
                        -webkit-transform: rotate(7deg);
                        -ms-transform: rotate(7deg);
                      transform: rotate(7deg);
              }

polaroids_sm.jpg

Grads

A grad, or gradian, is equivalent to 1⁄400 of a full circle. Similar to degrees, a positive grad value will go clockwise, a negative value goes counter clockwise 100grad will be at a 90% angle. (see figure 4.4)

Rads

A rad, or radian, is equal to 180/π degrees, or about 57.3 degrees. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. 1.570796326794897rad is the same value as 100grad and as 90deg.
angles.gif
90deg is the same as 100grad is the same as 1.508rad

Turns

Turns, are new in CSS3, and mean a rotation. One turn is equal to 360deg. For example, 2turn = 720deg. Note that turn is singular, and there is no space between the number and its unit..
rotate(900deg) is equivalent to rotate(2.5turn)

Times

Time units are much easier to explain than grads! There are two units of measurement: seconds (ms) and milliseconds (s). There are 1,000 milliseconds in a second. The format of a time value is a number followed by ‘s’ for seconds or ‘ms’ for milliseconds.
0.5s = 500ms

Frequencies

Frequency values are used with aural (or spoken) cascading style sheets. There are two value units: ‘Hz’, or Hertz and ‘kHz’ or kilohertz, 1,000Hz = 1kHz (case-insensitive). Frequencies can be used to change the pitch of a voice reading text. A low frequency is a bass sound, a high frequency is a treble. When CSS like the following snippet is used, a low-pitched voice, such

p.low { pitch: 105Hz; }
q.squeal {pitch: 135Hz;}

CSS3 Transform Property and the various transform functions

The transform property

Supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1, the transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. We manipulate an elements appearance using transform functions. The value of the transform property is a list of space-separated transform functions applied in the order provided. The transform functions include:

translate()

The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

  -webkit-transform: translate(15px, -15px); 
  -moz-transform: translate(15px, -15px);
  -o-transform: translate(15px, -15px); 
  transform: translate(15px, -15px);

 

translateX()

The translateX(x) function is similar to the translate() function above, but only the left/right value is specified

  -webkit-transform: translatex(15px);
  -moz-transform: translatex(15px);
  -o-transform: translatex(15px);
  transform: translatex(15px);

 

translateY()

The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified

  -webkit-transform: translatey(-15px); 
  -moz-transform: translatey(-15px); 
  -o-transform: translatey(-15px); 
  transform: translatey(-15px);

scale()

The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function

  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  transform: scale(1.5, 2);

scaleX()

The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1)

  -webkit-transform: scalex(0.5); 
  -moz-transform: scalex(0.5); 
  -o-transform: scalex(0.5); 
  transform: scalex(0.5);

scaleY()

The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

  -webkit-transform: scaley(2);
  -moz-transform: scaley(2);
  -o-transform: scaley(2);
  transform: scaley(2);

rotate()

The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

  -webkit-transform: rotate(15deg); 
  -moz-transform: rotate(15deg); 
  -o-transform: rotate(15deg); 
  transform: rotate(15deg)

skew()

The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

  -webkit-transform: skew(15deg,  4deg);
  -moz-transform: skew(15deg,  4deg);
  -o-transform: skew(15deg,  4deg);
  transform: skew(15deg,  4deg);

skewX()

The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0)

  -webkit-transform: skewx(15deg);
  -moz-transform: skewx(15deg);
  -o-transform: skewx(15deg);
  transform: skewx(15deg);

skewY()

The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

  -webkit-transform: skewy(-6deg); 
  -moz-transform: skewy(-6deg); 
  -o-transform: skewy(-6deg); 
  transform: skewy(-6deg);

Multiple transforms

The above show single transforms, but you can include more than one transform on an element. To include more than one transform, simply separate them the tranform functions with spaces.

  .enlargen:hover {
  	-webkit-transform: translate(-50%, -50%) scale(2) rotate(0); 
  	-moz-transform: translate(-50%, -50%) scale(2) rotate(0);
  	-o-transform: translate(-50%, -50%) scale(2) rotate(0);
  	transform: translate(-50%, -50%) scale(2) rotate(0);
  }

The above makes the element twice and tall and twice as wide. By translating the element 50% up and to the left, the bottom right corner should remain in the exact same location. The rotate(0) removes any possible rotation on the element.

This ‘enlargen’ class may be something you would want to add to an image gallery, hilighting an image that is hovered by making it four times larget (twice as wide and twice as tall) and remove any tilt that might have been interesting as a thumbnail but tacky in full size.

CSS3 Transform Property and the various transform functions

The transform property

Supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1, the transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. We manipulate an elements appearance using transform functions. The value of the transform property is a list of space-separated transform functions applied in the order provided. The transform functions include:

translate()

The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

  -webkit-transform: translate(15px, -15px); 
  -moz-transform: translate(15px, -15px);
  -o-transform: translate(15px, -15px); 
  transform: translate(15px, -15px);

 

translateX()

The translateX(x) function is similar to the translate() function above, but only the left/right value is specified

  -webkit-transform: translatex(15px);
  -moz-transform: translatex(15px);
  -o-transform: translatex(15px);
  transform: translatex(15px);

 

translateY()

The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified

  -webkit-transform: translatey(-15px); 
  -moz-transform: translatey(-15px); 
  -o-transform: translatey(-15px); 
  transform: translatey(-15px);

scale()

The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function

  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  transform: scale(1.5, 2);

scaleX()

The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1)

  -webkit-transform: scalex(0.5); 
  -moz-transform: scalex(0.5); 
  -o-transform: scalex(0.5); 
  transform: scalex(0.5);

scaleY()

The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

  -webkit-transform: scaley(2);
  -moz-transform: scaley(2);
  -o-transform: scaley(2);
  transform: scaley(2);

rotate()

The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

  -webkit-transform: rotate(15deg); 
  -moz-transform: rotate(15deg); 
  -o-transform: rotate(15deg); 
  transform: rotate(15deg)

skew()

The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

  -webkit-transform: skew(15deg,  4deg);
  -moz-transform: skew(15deg,  4deg);
  -o-transform: skew(15deg,  4deg);
  transform: skew(15deg,  4deg);

skewX()

The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0)

  -webkit-transform: skewx(15deg);
  -moz-transform: skewx(15deg);
  -o-transform: skewx(15deg);
  transform: skewx(15deg);

skewY()

The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

  -webkit-transform: skewy(-6deg); 
  -moz-transform: skewy(-6deg); 
  -o-transform: skewy(-6deg); 
  transform: skewy(-6deg);

Multiple transforms

The above show single transforms, but you can include more than one transform on an element. To include more than one transform, simply separate them the tranform functions with spaces.

  .enlargen:hover {
  	-webkit-transform: translate(-50%, -50%) scale(2) rotate(0); 
  	-moz-transform: translate(-50%, -50%) scale(2) rotate(0);
  	-o-transform: translate(-50%, -50%) scale(2) rotate(0);
  	transform: translate(-50%, -50%) scale(2) rotate(0);
  }

The above makes the element twice and tall and twice as wide. By translating the element 50% up and to the left, the bottom right corner should remain in the exact same location. The rotate(0) removes any possible rotation on the element.

This ‘enlargen’ class may be something you would want to add to an image gallery, hilighting an image that is hovered by making it four times larget (twice as wide and twice as tall) and remove any tilt that might have been interesting as a thumbnail but tacky in full size.

CSS3 only Native iPhone App. No images!

My challenge to myself today was to create the native look of an iPhone application using only CSS. No images. I did it. When developing for the iPhone, one only has to consider a single browser. This made the challenge somewhat easy.  The fun part was creating the page background, buttons and navigation bar without the use of image. Linear gradients came to the rescue.  Now that Safari 5 supports inset shadows, the buttons were a cinch.  Check it out (on iPhone or Safari 5 only)!

And, since I like to share, here are the important parts of the code:

#theNavBar{
        background-image: -webkit-gradient(linear, 0% 0%, 0% 50%, 
              from(rgba(176, 188, 205, 1)), to(rgba(129, 149, 175, 1)));
 	padding: 7px 10px;
	background-color: rgb(109, 132, 162);
	border-bottom-color:1px solid rgb(45, 54, 66);
	border-top:1px solid rgb(109, 132, 162);
	display: block;
	height: 31px;
	line-height: 30px;
	display: block;
	border-bottom: 1px solid #2C3542;
	border-top: 1px solid #CDD5DF;
}

#theBodyBackgroundImage {
      background-color:#C5CCD4;
      background-image: -webkit-gradient(linear, left top, right top, 
          from(#C5CCD4), 
          to(#CBD2D8), 
          color-stop(0.6, #C5CCD4), 
          color-stop(0.6, #CBD2D8));
     -webkit-background-size:7px 7px;
     background-repeat: repeat;
}

The page on it’s own is here, but is only decent on iPhone or Safari 5 and chrome.
The github version supports more browsers

Hack for CSS3 Supporting Browsers

Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup.

selector:nth-of-type(1n)

To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector.

  h3:nth-of-type(1n)  {
      color: #FFFFFF;
      background-color: #FFFFFF;
      text-shadow:  
           3px 3px 3px rgba(0, 0, 0, 0.4);
}

In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. You definitely don’t want to feed that to browsers that don’t support text-shadow: white text on white backgroud *IS* illegible.

:nth-of-type(1n) basically means “every”. So, it’s the same as not including it in terms of what selectors will be matched. Do note that you are adding a pseudo-class, so you are adding specificity. This pseudo-class is not understood by browsers that don’t support CSS3 selectors which is the same as those that don’t understand CSS3 properties and CSS3 property values.

For example, I have a row of images with captions going across a page. To make it more interesting, I made the pictures look like Polaroids. It looks fine plain, but why not add some fun CSS3.

/* understood by all browser */
.slides li {
	line-height:1.4;
	float:left; 
	width: 188px;
}
.slides img {
        display:block;
}
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-moz-transform:rotate(-5deg);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-transform:rotate(-5deg);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	transform:rotate(-5deg);
	background:none repeat scroll 0 0 #FFFFFF;
	color:#333333;
	display:inline;
	float:left;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
	text-align:center;
	text-decoration:none;
	width:auto;
}
.slides li:nth-of-type(even){
    -moz-transform:rotate(7deg);
	-webkit-transform:rotate(7deg);
	transform:rotate(7deg);
}
.slides li:nth-of-type(3n){
    -moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

The images look fine in IE, but look cool in FF3.6

Do make sure that the new CSS3 property is generally supported before using this hack. This is a general filter for generally supported CSS3. It works for multiple background images, text-shadow, border radius, and other well supported CSS3 properties and values. Don’t use this for CSS3 transitions, columns and animations until those are better supported in modern browsers. I have grids of browser support for all sorts of CSS3 properties, so take a look at those before relying on this filter.

Border Properties, Values & Browser Support

NOTE: Last major update: May 28, 2011

While Safari, Firefox, Chrome and Opera all support versions of border images, they only support the shorthand version of that propery. At the time of this writing, they do not support the individual properties of border-image-repeat, border-image-slice, border-image-width, border-image-source, etc. In addition, they do not all support the same property and values the same way.

 

Note: The properties link to the W3C specifications. The ‘details’ links point to descriptions further down the page where everything is explained in more depth.

default IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-color (details) CSS2
transparent   Χ
rgb(r, g, b)   Δ Δ
#RGB (#fff)
#RRGGBB (#ffffff)  
named colors   Δ Δ
rgba(r, g, b, a) CSS3 Χ Χ Χ
hsl(h, s%, l%) CSS3 Χ Χ Χ
hsla(h, s%, l%, a) CSS3 Χ Χ Χ
inherit Δ Δ
currentColor default Δ Δ Δ
-moz-border-SIDE-colors (details) spec-less           -moz-      
border-style (details)  
dashed  
dotted  
double  
groove   Δ Δ
hidden   Χ Χ
inset   Δ Δ
none
outset   Δ Δ
ridge Δ Δ
solid
border-width (details) Δ Δ
thin
medium  
thick  
length  
border (shorthand)   Δ Δ
border-collapse (details)   Δ Δ
collapse
separate
inherit Χ Χ
border-spacing (details) Χ Χ
length   Χ Χ
inherit   Χ Χ
New in CSS3 default IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-image-source (details) CSS3 Χ Χ Χ Χ Χ Χ Χ Χ Χ
url(imagesource) Χ Χ Χ Χ Χ        
none default Χ Χ Χ Χ Χ        
border-image-slice (details)   Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ        
fill   Χ Χ Χ Χ Χ        
border-image-width (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4}   Χ Χ Χ Χ Χ       Χ
auto   Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image-outset (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image-repeat (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
stretch   Χ Χ Χ Χ Χ        
repeat   Χ Χ Χ Χ Χ        
round   Χ Χ Χ Χ Χ        
space   Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image (details)   Χ Χ Χ Χ Χ -moz- -webkit- -webkit- -o-
see individual properties   Χ Χ Χ Χ Χ
border-radius (details)   Χ Χ Χ    
length{1}   Χ Χ Χ    
length{2,4}   Χ Χ Χ     Χ Χ
length{1} / length{1} (elliptical)   Χ Χ Χ     Χ Χ
length{2,4} / length{2,4} (elliptical)   Χ Χ Χ     Χ Χ
border-top-left-radius (longhand)   Χ Χ Χ    
length{1} (round)   Χ Χ Χ    
length{1} length{1} (elliptical)   Χ Χ Χ    
percentage values for length   Χ Χ Χ     Χ Χ Χ
box-decoration-break (details)   Χ Χ Χ Χ Χ Χ Χ Χ
clone   Χ Χ Χ Χ Χ Χ Χ Χ
slice   Χ Χ Χ Χ Χ Χ Χ Χ
box-shadow (details)   Χ Χ Χ -webkit-
length{1,4}   Χ Χ Χ
inset length{1,4}   Χ Χ Χ
none   Χ Χ Χ
length{1,4}, length {1,4}   Χ Χ Χ    

The individual properties, values and browser support and quirks in Detail

border-color

The border-color property allows you to define the color of the border on elements upon which you are set a border. All browsers that support borders, in general, support border color. The default value is the same color as the text color, or ‘currentColor’. Even though not all browsers support the ‘currentColor’ keyterm, all browsers will render the currentColor if declared, except in IE8. IE8 will inherit the browser color instead of rendering the currentColor, which is only an issue if you are overriding a different border color that you defined with less or equal specificity in the cascade. Some browsers support multiple border colors via the border-colors property. See the next section.

Property Values for border-color

transparent | rgb(r, g, b) | #RGB (#fff) | #RRGGBB (#ffffff) |
colorName (green) | rgba(r, g, b, a) | hsl(h, s%, l%) |
hsla(h, s%, l%, a) | inherit | currentColor

Browser support for border-color

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-color
transparent Χ
rgb(r, g, b) Δ Δ
#RGB (#fff)
#RRGGBB (#ffffff)
named colors Δ Δ
rgba(r, g, b, a) Χ Χ Χ
hsl(h, s%, l%) Χ Χ Χ
hsla(h, s%, l%, a) Χ Χ Χ
inherit Δ Δ
currentColor Δ Δ Δ

Browser quirks in rendering border-color

  • IE6 does not understand the keyterm ‘transparent
  • IE6 and IE7 understand RGB, but render colors when value is mixed % and number (when it shouldn’t). While IE6 and IE7 do understand rgb(), they support mixing of percent and integer values, which is against specifications, but really shouldn’t be an issue. test page
  • IE6, IE7 and IE8 do not understand rgba, hsl or hsla.
  • IE6, IE7 and IE8 do not understand the keyterm currentColor. They all correctly use the current color as the default if no border-color is declared, but they don’t actually understand the keyterm. IE8 ignores the call completely. IE6 and IE7 inherit.
  • IE6 and IE7 do not understand ‘hidden‘ as a border-style, and inherits.
  • IE6 does ok with all named colors except for silver.
  • Neither IE6 nor IE7 understand named colors with the color ‘grey’. It has to be written in American English, with an A -> ‘gray’. test page

DOM

document.getElementById("myID").style.borderColor

-moz-border-(side)-colors

The border-(side)-colors properties are NOT in the w3C specifications, and only work in Mozilla. see -moz-border-top-colors

When an element has a border that is larger than 1px, each line of pixels uses the next color specified in this property, from the outside in, eliminating the need for nested boxes. Each pixel of border needs to have a specified color. If not, it defaults to the innermost color specified.

Does not work on dotted and dashed styles or collapsed table borders. At this time, each side must be declared individually.

border: 8px solid #ccc;
-moz-border-bottom-colors: #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-top-colors:    #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-left-colors:   #000  #666 #777 #888 #999 #aaa #bbb #000;
-moz-border-right-colors:  #000  #666 #777 #888 #999 #aaa #bbb #000;

In Firefox 1.0+, the above code snipped as grey shaded borders on the right and left, and happy pride colors on the top and bottom.

This property is not part of the w3c css specifications. And, in fact, is not needed. The same effect can be done with text-shadow or outline, except that neither text-shadow nor outline effect the box model. The other option is border image with a gradient.

Browser support for the non-standard border colors properties

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-top-colors                
border-right-colors                
border-bottom-colors                
border-left-colors                

border-style

The border-style property allows you to define the style of the border on elements upon which you set a border. All browsers support the border-style property, but some browsers don’t understand and / or misrender some of the values. The default value is ‘none’.

Property Values for border-style

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid

Browser support for border-style

IE6 IE7 IE8 FF Safari Chrome Opera
border-style
dashed
dotted
double
groove Δ Δ
hidden Χ Χ
inset Δ Δ
none
outset Δ Δ
ridge Δ Δ
solid

Browser quirks in rendering border-style

  • The Webkit browsers ignore color when rendering the groove, inset, outset and ridge values. The spec is a little ambivalent about whether this is correct or not, but since all other browser engines don’t ignore border color, and it makes no sense to me that color is ignored, webkit fails!
  • IE6 and IE7 do not understand ‘hidden’, and inherits.
  • Note the inset and outset are supposed to be rendered as ridge and groove if border is set to collapse. I did not test these!

TIP:

if you need to use Groove, Inset, Outset or Ridge, realize that these border types will appear different depending on the browser. Opt for declaring different colors for different borders to create the same effect instead.

DOM

document.getElementById("myID").style.borderStyle

border-width

The border-width property allows you to define the width of the border on elements upon which you set a border. All browsers that support borders support border-width. The default value is ‘medium’, which is about 3px wide. You can use the key terms thin, medium or thick, or any of the CSS lengths: em, px, etc.

Property Values for border-width

thin | medium | thick | lenght (% | em | px | ex | mm ...)

Browser support for border-width

IE6 IE7 IE8 FF Safari Chrome Opera
border-width Δ Δ
thin
medium
thick
length

Browser quirks in rendering border-width

  • While all browsers support all the values, IE6 and IE7 get the box model wrong. Otherwise, they do get the values correct.

TIP:

Need to create a triangle? You can create a triangle by using borders. To create the grey triangle you see below you can use the following code:

div::after {
	content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 10px solid #FF0000;
    }

DOM

document.getElementById("myID").style.borderWidth

border

The border shorthand property is shorthand for both

border-width
border-color
border-style 

and

border-top:
border-right:
border-bottom:
border-left:

The border property allows you to define the width, color and style of the border of all four sides of your element in one simple declaration. All browsers that support borders support the border shorthand property, with the caveats of the three individual properties expanded upon above.

The order of the three values does not matter. The only required value is the style. The other two are optional.

Property Values for border

 border-style && border-width && border-color

Browser support for border

IE6 IE7 IE8 FF Safari Chrome Opera
border Δ Δ
border-top
border-right
border-bottom
border-left

Browser quirks in rendering border

  • The only required property is the style of the border. However, if color and width are not declared, they should default to the default value of medium width and currentColor. IE6 and IE7 inherit from less specific declarations instead of resetting. That might not make sense, so let me expalin:
    .mySelector{
          border: 1px solid #FF0000;
          border: dotted;
      }

    The above should render a border as if it was written

    border: medium dotted currentColor /* expected appearance */

    but instead, in IE6 and IE7 only, renders as

    border: 1px dotted #FF0000; /* IE6 and IE7 rendering values *

DOM

document.getElementById("myID").style.border

border-collapse

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML. Supported in all browsers, the value of collapse collapses table borders into a single border when possible, ignoring border-spacing and empty-cells properties. The value of separate, which is the default, leads to detached table borders, where border-spacing and empty-cells properties are headed. If there is spacing, there will be white space between the borders of adjacent table cells. When set to inherit, the value of the border-collapse property is supposed to be inherited from the declaration on the parent element.

Note that at the time of this writing, border-collapse is not listed in the CSS3 documentation. It *IS* part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-collapse

collapse | separate | inherit

Browser support for border-collapse

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-collapse Δ Δ
collapse
separate
inherit Χ Χ

Browser quirks in rendering border-collapse

  • IE6 and IE7 doesn’t understand inherit: instead of inheriting from the parent, it inherits from less specific values set for the property in the cascade if any are present. If no value has been declared with less specificity, defaults to separate.

  • If set to collapse, the inset and outset border-styles are supposed to be rendered as ridge and groove respectively.

DOM

document.getElementById("myID").style.borderCollapse

border-spacing

The border-spacing only has any effect if the border-collapse property is NOT set to collapse. The border-spacing property sets the distance between the borders of adjacent cells — which is why border-collapse: separate is a default prerequisit. Supported in all browsers.

Note that at the time of this writing, border-spacing is not listed in the CSS3 documentation. It IS part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-spacing

length (px, em, %, etc) | inherit

Browser support for border-spacing

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-spacing Χ Χ
length Χ Χ
inherit Χ Χ

Browser quirks in rendering border-spacing

  • IE6 and IE7 doesn’t understand border-spacing.

DOM

document.getElementById("myID").style.borderSpacing

Finally! We finally get to CSS3 Properties. w00t!

border-radius

The border-radius property is actually shorthand for border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius in that order. But, save bytes, and confusion, by using the shorthand.

 

For rounded corners (versus elliptical), declare between one to four values. For elliptical corners, when using the shorthand, separate the vertical radius declarations from the horizontal radius with a slash.

 

Add "-moz-" in front of the property name for Firefox 3.6 and earlier (and -webkit for safari 4 and earlier). All other browsers that support border-radius now do so without a prefix.

Percentage values: The CSS3 spec states that percentages refer to corresponding dimension of the border box. Percentages for the horizontal radius refer to the width of the box and percentages for the vertical radius refer to the height of the box.

Safari 5 doesn’t understand percentage as a length for border radius. This is fixed in the nightly builds. But, it means if you include a % value, the entire declaration will be ignored. Opera does something really funky. It understands % lengths, but handles it really odd: seemingly relative to the window or the worlds largest monitor when floated: i can’t tell. Not floated, it’s still a little off

 

Property Values for border-radius

length{1,4} |  length{1,4}/length{1,4}

Browser support for border-radius

IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 Safari 4 Safari 5 Chrome Opera
border-radius Χ Χ Χ -moz- -webkit-
length{1} Χ Χ Χ
length{2,4} Χ Χ Χ Χ
length{1} / length{1} (elliptical) Χ Χ Χ Χ
length{2,4} / length{2,4} (elliptical) Χ Χ Χ Χ
border-top-left-radius (longhand) Χ Χ Χ
length{1} (round) Χ Χ Χ
length{1} length{1} (elliptical) Χ Χ Χ
percentage values for length Χ Χ Χ Χ   Χ Χ Χ

Browser quirks in rendering border-radius

  • IE6, IE7 and IE8 don’t understand any version of border-radius, and never will.

  • Safari 5 does NOT understand percentages for radii values. This has been fixed in the webkit nightlies, and should be resolved in Safari 6
  • Opera get’s the curve slightly wrong, and completely off when floated.

 


/* Long hand way */
   border-top-left-radius: 15px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 20px;

/* Longhand elliptical */
   border-top-left-radius: 15px 5px ;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px 15px;
   border-bottom-left-radius: 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px;
  

There’s a border radius generator that only handles one value per corner

Elliptical (versus Rounded) Corners.

When using shorthand for elliptical corners, separate the vertical from the horizontal radii with a slash. When using shorthand, no slash is used.

-moz-border-radius: 10px / 40px;  
border-radius: 10px / 40px;

When declaring different radii for different corners, the order of the corners is topleft, topright, bottomright, bottomleft, when 4 values are given. Similar to TRBL of borders, if you only declare two values, then the first is for topleft/bottomright, and the second value is for topright/bottomleft. But webkit only understands 1 value for shorthand. Safari/WebKit doesn’t support the slash (/) notation. If two values are specified, an elliptical border is drawn on all 4 cornersIn this example, where as Moz and Opera correction create an odd shape with evenly rounded corners (see the image if you’re not in a browser that renders correctly), in webkit browsers all four corners will be the same.

-moz-border-radius: 15px 30px; 
border-radius: 15px 30px; 

The syntax for creating a single elliptical corner is the same for all browsers: no slash. Also note that the syntax for Mozilla 3.6 and earlier differed from the rest.

-moz-border-radius-topleft: 15px 30px; 
border-top-left-radius: 15px 30px;

Webkit does not understand percentages as border radius values.
Firefox 3.6 understands %, but uses percent of width to make rounded corners instead of proportional percentages (based on width *AND* height).
Opera can be screwy.

-moz-border-radius: 10%; 
border-radius: 10%;

DOM

document.getElementById("myID").style.borderTopLeftRadius
document.getElementById("myID").style.borderTopRightRadius
document.getElementById("myID").style.borderBottomRightRadius
document.getElementById("myID").style.borderBottomLeftRadius

box-decoration-break

The border-decoration-break property determines how the border appears should there be a break in content flow on an element that has a border applied. Breaks include a box that has a border broken by a page break (print), column break (using the CSS3 column properites), or, for inline elements, at a line break. This property determines if a border should be inserted on both sides of the break (before and after), or the break should not open and close the border, in effect, leaving it open. The value ‘clone’ will add border-style and/or border-image with padding if there is a break, as if it was the normal end of the box, creating mini-boxes. The value ‘slice’ will not add padding or border at the break, basically slicing the border as you would a cake.

The box-decoration-break property specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding. For backgrounds it defines how the background positioning area is derived from these multiple boxes and how the element’s background is drawn within them. The default is slice.

Property Values for box-decoration-break

clone | slice

Browser support for box-decoration-break

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
box-decoration-breakt (details) Χ Χ Χ Χ Χ Χ Χ  
clone Χ Χ Χ Χ Χ Χ Χ  
slice                

Opera is the first browser to support box-decoration-break value of ‘clone’ The reason the ‘slice’ value is listed as working in the grid is because slice is the default. So, even without understanding ‘box-decoration-break’ or ‘slice’, that is what happens by default.

box-shadow

The box-shadow property enables you to add drop shadows or inset shadows on elements. One or more box-shadows can be attached to a box, by which you can create some pretty cool effects. Shadows are drawn just outside the border, or just inside in the case of inset. In terms of the box-model, shadows are similar to ‘outline’, and do not influence the layout: they may overlap with other boxes.

Property Values for box-shadow

none | inset || [ length(left) length(top) length(blur) ? length(spread) ? || color ]{1,n}

What the box-shadow property values mean

box-shadow: 3px 3px 3px 3px rgba(0,0,0, 0.4);

The first length value is the left offset of the shadow. A negative value will put the shadow on the left, positive to the right.

The second length value is the top offset. A negative value will put the shadow above the bo, a positive value will place the shadow below the box.

The third length value is a blur radius. Negative values are not allowed. If it is 0, the shadow is solid. The larger the value, blurrier the shadow will be.

The fourth length value is the spread.

The last value is the color. Always include the color. The default value of the color (the value of color if the color is omitted) is still being debated. While to me it makes sense that the default value should be currentColor, the working group is currently considering a black shadow. I strongly disagree. I *HIGHLY* recommend using RGBA if your blur radius is greater than 0, as the effect is much prettier if you start from a slightly transparent version of your color, especially if you are using black, than if you start with an opaque version of grey or other color..

box-shadow:       2px  -5px  4px 1px rgba(255, 255, 48, 0.5),
                  5px -10px  6px 3px rgba(255, 224, 48, 0.5),
                  7px -15px 11px 5px rgba(240, 128,  0, 0.4),
                  12px -25px 18px 7px rgba(200,   0,  0, 0.3),
                  inset 2px  -2px  5px     rgba(255, 255,  0, 0.5),
                  inset 5px  -5px 25px 5px rgba(255,   0,  0, 0.8);

In this meteor example, (it’s in an iframe due to WordPress liking to eat my code) the fourth value is the spread radius: the shadow grows in all directions by the radius value given. Negative values shrink the shadow. This is a multiple box shadow example, that works well in Firefox and Opera. Webkit should get it working soon, but they aren’t there yet:

The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it) . I generally use inset for shadows on textareas and other user input element.

Browser support for box-shadow

IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 Safari Chrome Opera
box-shadow (details) Χ Χ Χ -moz- -webkit-
length{1,4} Χ Χ Χ
inset length{1,4} Χ Χ Χ
none Χ Χ Χ
length{1,4}, length {1,4} Χ Χ Χ

Browser quirks in rendering box-shadow

  • IE6 and IE7 doesn’t understand box-shadow, and never will.

  • Mozilla 3.6 and Safari require browser specific prefixes
  • Webkit can die on inset shadows. Yes, it understands inset shadows, but it uses a lot of CPU and can freeze up your browser. This issue is resolved in webkit nightly, so should be good in Safari 6

DOM

document.getElementById("myID").style.boxShadow

Border-Image Properties & Values

At first the idea of ‘border-image’ scared the crap out of me. Were people going to start putting images around all their elements and start creating layouts reminiscent of the hideiousness that was the 1996 web? Then i realized the utitlity of border images in creating buttons. Then it occurred to me that with background linear gradients, there was no need for border-images. However, border images are better supported than linear gradients, and I haven’t written about linear gradients yet (coming, soon hopefully). So, let’s dive in!

Unlike all the other shorthand properties, where I first explain the components and then explain the shorthand, for the new to CSS3 Border-Image properties we’re going to start with the short hand, since the shorthand is fairly well supported outside of the IEs, but the individual properties… not supported at all.

border-image

Unlike the individual properties of other shorthand properties, browsers that support the shorthand property are not yet supporting the properties that make up the shorthand as individual properties. Do, however, read up on the individual properties so that you may better understand how to write the short hand property.

Note that if an element has both a border-image and a border declared, the border-image property supercedes the regular border declaration.

‘none’ is a value for border-image-source, not the border-image shorthand, in the specifications. Using ‘none’ as the value, will mean that no background image will be rendered as, by default, all the values (source, slice, width, outset and repeat) that are not explicitly set in the shorthand border-image call are set to their individual defaults, and we’re setting source to its default of ‘none’. I am including ‘none’ in the support table just in case you read no further.

The border image property is both short for:


border-top-image:
border-right-image:
border-bottom-image:
border-left-image:
border-corner-image:
border-top-left-image:
border-top-right-image:
border-bottom-left-image:
border-bottom-right-image:

and short for


border-image-source: 
border-image-slice: 
border-image-width: 
border-image-outset:
border-image-repeat:

The border-image is defined by ‘border-image-source’. The image is sliced into 9 sections with the ‘border-image-slice’ values. Those 9 section are then scaled, positioned, and tiled into their corresponding border image regions in four steps by :

Value of border-image

border-image-source || border-image-slice {1,4} [ / 'border-image-width'? [ / 'border-image-outset' ]? ]? || 'border-image-repeat' 

Syntax of border-image shorthand



border-image: url() slice{1,4} /width_px{1,4} repeat{1,2}
-moz-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch;
-webkit-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch

Browser support for border-image

IE6 IE7 IE8 FF Safari Chrome Opera
border-image Χ Χ Χ -moz- -webkit- -webkit- -o-
source slice width outset repeat Χ Χ Χ
none              

Browser quirks in rendering border-image

  • IE6, IE7, IE8 and IE9 do not support border image and never will
  • Mozilla and webkit browsers require the -moz- and -webkit- prefixes respectively.
  • While Mozilla, Webkit and Opera support the shorthand border-image property, they do not support the individual property declarations that make up the shorthand.
  • Opera is finicky: while omitted values should be at their default value, if you omit a value in Opera, the entire declaration fails.

border-image-source

Similar to background-image property, the value of the border-image-source is the relative or absolute path to the image file on the server, or none. No browser supports this stand alone value. If you want to override the border background image on an element, you have to use the shorthand border-image property, and redeclare all values in the shorthand. Note that unlike the CSS3 background-image property, there can only be one background image declared for an elements border. If both

Property Values for border-image-source

url(imagesource) | none

Browser support for border-image-source

  IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-source Χ Χ Χ Χ Χ Χ Χ Χ
url(imagesource) Χ Χ Χ Χ
none Χ Χ Χ Χ

Browser quirks in rendering border-image-source

  • No browsers support this property as a standalone.
  • As part of the shorthand, it is supported in all non-IE browsers.
  • User the -webkit- prefix for Safari and Chrome. Use the -moz- prefix for Mozilla. No prefix is required for Opera.

border-image-slice

The ‘border-image-slice’ property values represent inward offsets from the top, right, bottom, and left (TRouBLe) edges respectively of the image. In effect, the browser divides the one border image and the elements border into nine regions: four corners, four edges and a middle.

Use the border-image-slice properties to define what parts of your image are going to be in the corners, and what parts make up the rest.

The border image can also be used as the background image: use the ‘fill’ keyword to do this. Without the ‘fill’, the center part of the image part will be made as transparent. If fill is used, the border-image sits on-top of the background image, in effect hiding it if there are no transparent pixels. No browser supports the fill keyterm, but all seem to do it by default. The default value is 100%.

Property Values for border-image-slice

length{1,4} && fill

Browser Support for border-image-slice

IE6 IE7 IE8 FF Safari Chrome Opera
border-image-slice Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ
fill Χ Χ Χ Χ Χ Χ Χ

Do not declare ‘fill’ as it will kill the rest of the rendering. However, it seems to be the default, so it ‘works’, it just doesn’t work.

border-image-width

The border-image-width is the width of the border in terms of the box model. The element has the width and height as determined by the content and CSS declarations. Adding any value other than 0 (or the 1 default) increases the height and width of the element by the value declared. If percentages are used, the percentage is relative to the image width and height, not the element’s width and height. The default is 1. I have not tested all value types, just the general property as part of the shorthand.

Note that if you do not declare a border-image-width, but do declare a regular border-width, the CSS2.1 border-width will be inherited.

Property Values for border-image-width

length{1,4} | auto

Browser support for border-image-width

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-width Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ
auto Χ Χ Χ Χ Χ Χ Χ Χ

Browser quirks in rendering border-image-width

  • Like the other longhand border-image properties, there is no browser support for the individual border-image-width property.
  • Opera does not support the border-image-width property even as part of the shorthand. Makes the whole declaration fail.
  • No browser supports the value of ‘auto’. including ‘auto’ makes the entire declaration fail.

border-image-outset

The values of the border-image-outset property specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. Numbers represent multiples of the corresponding border-width. I have no clue how this is supposed to actually render, but it is not supported anywhere. If included, the entire declaration fails. The default is 0.

Property Values for border-image-outset

length{1,4}

Browser support for border-image-outset

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-outset (details) Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ Χ Χ Χ

border-image-repeat

By default, the border image is repeated. There is NO way to not fill up the element with the border image. What we have is different options on how to fill up the area. . The ‘stretch’ value will not tile the image, but rather stretch it to fill the area provided. Stretch is the default. The ‘repeat’ value will tile the image to fill the area. This is to fill the area BETWEEN the corners. The ’round’ value is similar to repeat, but if it does not fill the area with a whole number of tiles, the image will be stretched so that it does. When using either of these values, make sure that your slicing width cuts your tile so that it retiles nicely.
The ‘space’ value doesn’t seem to be supported. Similar to repeat, except
if the repeated image does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Property Values for border-image-repeat

stretch | repeat | round | space

Browser support for border-image-repeat

IE6 IE7 IE8 FF Safari Chrome Opera
border-image-repeat (details) Χ Χ Χ Χ Χ Χ Χ
stretch Χ Χ Χ
repeat Χ Χ Χ
round Χ Χ Χ
space Χ Χ Χ Χ Χ Χ Χ

Notes

  • While webkit doesn’t fail on the round property, it uses ‘repeat’ instead

CSS3 Implementable Features

There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation. Mostly, there are links to my sandboxing of those features.

If it’s not successfully embedded, you can see it here css3 implementable features

Content covered in the PPT presentaion

I do not have a podcast, but here is a summary of what was presented in case you missed it, or incase the flash above isn’t enough

CSS3: Si se puede

CSS2.1

has been around since 1999, but only fully supported in IE8. We obviously didn’t wait to implement CSS2 until all the browsers fully supported it. CSS3, while not yet finalized, has a lot of features that are supported in many browsers. Like CSS 2.1, there is no reason not to use these features just because not all browsers support all the features equally: if that were our logic, we would still be on CSS1.

Your site does not need to be identical in all browsers

In developing with CSS3 think about graceful degradation. Not all browsers need to implement your site identically. Yes, your site should look good in all browsers, but no, if your body is a few pixels different in one browser to the next, who cares? You’re the only one who is going to be looking at your website in multiple browsers at the same time. 99.99% of the site user base (that number is pulled out of my ass) have one favorite browser on their desktop, and that’s what they’ll use to look at your site.

Twitter uses rounded corners for non IE browsers only

Example: Twitter uses native rounded corners for supporting browsers.

IE does not support rounded corners. Twitter believes that rounded corners make their site look nicer, but lack of them doesn’t break the site. So, the experience is a little different in the IE’s than in modern browsers. But if I hadn’t shown you this example, you may never have known!

Twitter would have had a difficult time creating rounded corners with images since the background color of the right hand nav bar on twitter is user selectable. They could have created rounded corners on the left and square angles on the right, but likely going all square for IE looked better.

For the rest of the examples, I’ll be explaining how to make CSS3 work in IE. I just want to spread the gospel that it doesn’t have to look identical anyway.

Features that are implementable and discussed below:

  • CSS3 Selectors
  • Text Shadow (2.0).
  • Box Shadow (prefixed)
  • Rounded Corners (prefixed).
  • @font-face
  • Alpha Transparency.
  • Opacity.
  • Rotation.

Features that are implementable, but not discussed in this talk

  • Multi-column layout
  • Video (HTML5)
  • Animations
  • Transitions
  • Border-image
  • Multiple background images
  • Linear Gradients

CSS3 Selectors

If you look at the grid of CSS3 Selectors and Browser Support, you’ll note that, at this point, only the three IEs don’t understand CSS3 selectors. That doesn’t mean you can’t use them.

To see all the selectors, and what you can and cant use, check out CSS3 Selectors and Browser Support

Alpha Tranparency

color: rgba(0,0,0,0.4);
color: hsla(300, 100%, 50%, 0.4);

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, stading for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation. Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of grey from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between.

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). the syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alphavalue from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

Opacity

Opacity likely doesn’t have the impact you intended. The element made less that fully opaque is not the only element impacted. All the element with a z-index higher than the one made opaque inherit the same level of transparency. Generally, you’ll want to use alpha transparency on a background rather than opacity.

  .halfthere {
       opacity: 0.4;
       filter: alpha(opacity=0.4)
   }

Opacity Example

Rounded Corners

.rounded {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
   }

The order is topleft, topright, bottomright, bottomleft.

Safari has some issues with rounded corners.

IE6, IE7 and IE8 don’t support native CSS rounded corners, and never will. For those browsers, if I really don’t want my page to look different in the IEs than in modern browsers, I add the rounded corners with a little bit of JavaScript and CSS magic, and a single background image:

$('.rounded').append('<b class="tr"></b><b class="tl"></b><b class="br"></b> <b class="bl"></b>');

Text Shadow

.shadowed {
  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  }

In the above, the order of values is

leftOffset rightOffset blur Color

If you’re going to use text shadow, which is not supported in IE, this is a good time to use the Hack for CSS3 Supporting Browsers. As I mention in that article, you don’t want to end up with white text on white background.

Rotation

Transforms are supported in all browsers, just with different syntax.

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Note that for IE, the values are 1=90, 2=180, 3=270. Check out my

sandbox, or just look at the header of this blog.

I’ve been told that IE supports more than just the 90degree angles, but haven’t tested yet. The syntax is:

     filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17); /* for IE6 and IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17)"; /* for IE8 */

and make sure that the element hasLayout.

Gradients

I didn’t actually go over gradients in my presentation, but linear gradients are  supported in one way or another in all browsers except opera, so you can use them. Radial gradients …. not yet.

background-image: -moz-linear-gradient(top, #56abf3, #ffffff, #ffffff, #ffffff); /* FF3.6+ */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #56abf3),color-stop(25%, #ffffff));

IE has

Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FF56abf3, endColorstr=#FFFFFFFF)

There are two types of Gradients – 0 gives a gradient running from top to bottom. 1 from left to right.
startColorstr —  The start color of the gradient. The first 2 characters in the 8 digit HEX color number are the Alpha values ( 00 being transparent,  FF is opaque). Default is blue
endColorstr= —   The color of the bottom or right  end of the gradient, depending on what GradientType you use. The default color is black  #FF000000 if omitted.

There are no colorstops in IE as far as i can tell

CSS Background Properties: possible values, default values, browser support and DOM

Everything you could possibly want to know about CSS Background Properties: Interpreting the w3c specifications with browser support and links to examples and test cases.

Last Major Update: May 26, 2011

There are 8 attributes controlling background images. The CSS3 background properties are very well supported in modern browsers, but a few values are not. Also, there are some properties and values that have not yet made it into the specifications, but are already supported in all browsers except Firefox.. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-clip
  • background-origin
  • background-size
  • background-inline-policy – (not in the specifications)
  • shorthand: background, which includes the above attributes that are in the specifications.
  • Each property has a list of possible values. Many developers use the “background:” shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their intention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have “inherited” as a value option. See below for more information on the background shorthand.

    default IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 FF 5 Safari Chrome Opera
    background-attachement CSS2.1 Χ Χ
    fixed   Χ Χ
    scroll default
    inherit
    local CSS3 Χ Χ Χ Χ 5
    background-color CSS2.1 Δ Δ Δ
    transparent default Δ
    rgb(r, g, b)  
    #fff
    #ffffff
    rgba(r, g, b, a) CSS3 Χ Χ Χ
    hsla() CSS3 Χ Χ Χ
    140+ named colors
    CSS3                      
    background-image  
    none default     1 1 1 1
    url  
    url, url CSS3 Χ Χ Χ 3.6
    background-position  
    left/top default
    right/bottom
    center default when only one declaration
    inherit
    center
    px
    %
    multiple 
    CSS3 Χ Χ Χ 3.6
    4 Values
    CSS3 Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
    background-position-x not in the spec Χ Χ Χ Χ
    background-position-y not in the spec Χ Χ Χ Χ
    background-repeat  
    inherit
    no-repeat
    repeat
    repeat-x / repeat-y
    multiple images Χ Χ Χ
    space Χ Χ Χ Χ Χ Χ
    round Χ Χ Χ Χ Χ Χ
    x / y values separate Χ Χ Χ Χ Χ Χ
    background-clip CSS3 Χ Χ Χ Δ -webkit-
    border-box Χ Χ Χ Δ
    padding-box Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-origin CSS3 Χ Χ Χ Δ
    border-box Χ Χ Δ
    padding-box default Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-size CSS3 Χ Χ Χ -moz-
    auto default -moz-
    contain Χ Χ Χ -moz-
    cover Χ Χ Χ -moz-
    (length) Χ Χ Χ -moz-

    background-attachment

    The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a “fixed” background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only browser that fails to support it correctly.

    Property Values for background-attachment

    background-attachment: fixed | scroll  | local;
    

    Browser support for background-attachment

    Internet
    Explorer 6
    Internet
    Explorer 7
    Internet
    Explorer 8
    Internet Explorer 9 Firefox Opera Chrome Safari
    fixed behaves as “scroll” behaves as “scroll” works, but the placement of the image is off.
    scroll behaves as “local” behaves as “local”
    local Works because it inherits scroll, which erroneously renders as local. Works because it inherits scroll, which erroneously renders as local. 10.5 5

    background-attachment:fixed;

    In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.

    Note: background-attachment: local is a new value added in CSS3. “Local” is basically how “scroll” has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll.” Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ’scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.

    Mobile Note: Mobile webkit does support fixed, but it doesn’t behave as you might expect. Smart phones show websites thru a viewport, displaying just a portion of the webpage. As you scroll, you are moving the viewport, not the actual page. So, the fixed background image is doing what it should, but it doesn’t look like you would expect.

    Bugs:

    • IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
    • IE6 and IE7 mistakingly renders fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.

    DOM

    document.getElementById("myID").style.backgroundAttachment

    background-color

    The background-color property sets the background color of the element. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif, transparent PNG, or gradient with transparency,, the declared background color will show thru the transparent pixels.

    All browsers support background colors.

    The default value is “transparent”. In using RGB instead of Hex values, you can either use integer range 0 – 255 or percent values of 0-100%. If you go over (for example, 300 or 110%), the browsers will reduce the value to the maximum allowable value (either 255 or 100%).

    Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration. If you misspell a named color, the browser will ignore the declaration.

    CSS3 provided us with new colors. Any valid value for color is valid for the value of background-color. For example, you can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page

    Property Values for background-color

    background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456 | magenta;

    Browser support for background-attachment

    IE6 IE 7 IE 8 IE 9 IE10 FireFox Safari Chrome Opera
    transparent
    rgb(r, g, b) Renders with mixed values Renders with mixed values
    #fff
    #ffffff
    rgba(r, g, b, a) ignores the entire call ignores the entire call ignores the entire call  
    hsl(h, s, l) ignores the entire call ignores the entire call ignores the entire call  
    hsla(h, s, l, a) ignores the entire call ignores the entire call ignores the entire call  
    named colors didn’t test      

    Note:

    • Do not using mixed values (percents and integers) in RGB. This is against the specifications, and will fail in all modern browsers.
    • IE6 and IE7 get “partially compliant” for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications. test page
    • Do not use RGBA without browser targeting: color will fail in non-supporting browsers.
    • Bug: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.
    • Named colors have been expanded to include many new colors. Check out my list of named, hsl, hex and rgb colors.

      DOM

      document.getElementById("myID").style.backgroundColor
      

    background-image

    The background-image property allows us to define none, one or more background images for an element. This property only declares what image or gradient, if any, should be used. Other properties on this page can be used to define the position, movement, size, etc., or your declared images.

    In CSS3, an element can have multiple background images or layers. Separate each layer/image background image with a comma. When more than one image/layer/gradient is defined, the last image is drawn below all other layers and the first one is drawn on top, with each layer displayed in front to back order in between.

    Note that background images are not limited to jpegs, gifs and pngs. Browsers support data URIS, and (almost) all supporting gradients and some are supporting inline SVG.

    Property Values for background-image

    background-image: inherit | none | url(relative to CSS) | [gradients];
    background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

    Browser support for background-image

    IE 6 IE 7 IE 8 IE 9 IE 10 FireFox Safari Chrome

    Opera

    inherit if url doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit      
    none      
    url needs to have adequate size to work IE7 zoom function does not increase the size of background images IE7 zoom function does not increase the size of background images      
    url, url 3.6     10.5
    gradient -ms- -moz- -webkit- -webkit

    -o-

    background-image browser bugs

    IE6 has several bugs with background images that are worth noting.

    1. The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
    2. The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
    3. For background images on links, IE6 fetches the image from the server for every “hover”, causing flickering.
    4. IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
    5. If the background-image of a link is a transparent PNG, the link will not work in IE6.
    6. Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.

    IE7 and IE8 has bugs too:

    1. The IE7 zoom function does not increase the size of background images.
    2. Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.

    Gradients

    Browsers are beginning to support gradients as background image values. See my CSS Gradients Library and Library of World Flags in CSS Gradients as examples. The syntax differs in Safari 5 (and slightly in FF 3.6) from the standard, and all browsers that support gradients support gradients only as a prefixed value.

    I’ll be posting a tutorial on gradients shortly, so am not including details here.

    SVG as Background image

    There are two ways to include SVG as background images. Either point to an svg file as you would to any jpg file: Old Example of SVG as bgimage

    or you can include the SVG directly in the background image call.

    background-image: 
     url("data:image/svg+xml;utf8,
       <svg xmlns='http://www.w3.org/2000/svg'>
       <linearGradient id='gradient'>
       <stop offset='1%' stop-color='#F00'/>
       <stop offset='90%' stop-color='#C33'/>
       </linearGradient>
       <rect fill='url(#gradient)' x='0' y='0' 
       		width='100%' height='100%'/>
       </svg>"); }

    Note that spacing was added for legibility. All spacing must be removed for SVG to work. example of svg as background URI

    DOM

    document.getElementById("myID").style.backgroundImage
    

    background-position

    In CSS2.1 background position takes two: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is “top left”, well, actually, “0 0″.

    NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.

    Property Values for background-position

    background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;
    background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */

    In CSS3 we can have up to 4 values for a single image’s background-position!!!

    If only one value is specified, the second value is assumed to be ‘center’. For example, background-position: bottom; will position the image centered at the bottom of the element. When using lengths instead of keyterms, the value refers to the horizontal positioning, so background-position: -20px; will position the background image centered veritally, with 20px of the background image being cut off the left hand side of the element.

    If two values are given and they’re not both keywords, the first value represents the horizontal position and the second represents the vertical position as an offselt from the top left corner of the element (background origin determines is its the top left corner of the outside of the border, inside of the border or inside the padding.

    New to CSS3, we can include three or four values for background-position, enabling us to position a background image relative to the bottom right of the element.

    Let’s start by explaining the four value property value, since the 3-value value is insanely confusing. The default of background-position is to offset your background image from the top left corner. Use four values to set your own offset corner. the syntax with an example:

    background-position: [bottom | center  | left | right ][length][bottom | center  | left | right ][length];
    background-position: bottom 40px right 20px;

    Pick one side, then list the offset from that edge, then include a perpendicular side and the offset from that second edge.In our example, the background image will be positioned 40px from the bottom and 20px from the right toward the bottom right of our element.

     

    If three values are given, 2 values must be keyterms and the missing offset is assumed to be zero. Currently only Opera supports 3 and 4 value background position. And, if you get any part of the syntax wrong (like try to offset from center which is not allowed), the entire declaration will be ignored. Because the 3-value syntax is confusing and prone to error, I recommend defining the 4 value whenever offsetting from any corner other than the top left corner. JS Fiddle Example

    Browser support for background-position

    IE 6 IE7 IE 8 IE 9 !E 10 Firefox Opera Chrome Safari iPhone
    left/top
    right/bottom
    center
    inherit
    center
    px
    %
    mulitple     since 3.6 10.5
    4-value offset 11

    Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

    • For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
    • For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
    • For 50%, the middle of the image will be placed in the center of the element.

    Any other percentage value is a bit more confusing:

    A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

    Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).

    DOM

    document.getElementById("myID").style.backgroundPosition
    

    Background-position-x

    Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are different in the following table, since green means the browser follows the W3C specifications and red means it fails, and these values are not in the specifications.. This property was added by MS for IE5.5, made it into the CSS3 specifications for a while, but was removed in 2009. Test case

     

    Property Values for background-position-x

    background-position-x: center | inherit | left | right | px/em | %;

    Browser support for background-position-x

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported

    DOM

    document.getElementById("myID").style.backgroundPositionX
    

    background-position-y

    Property Values for background-position-y

    background-position: bottom | center | inherit | top | 10px | 2em | 50%;

    Browser support for background-position-y

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported

    DOM

    document.getElementById("myID").style.backgroundPositionY
    

    Background-repeat

    The backround-repeat property specifies whether the background image is repeated or tiled. And, if so, how that image is tiled. The default value is repeat, which repeats the image along both the x and y axis. Since this is generally NOT the effect I go for, i include background-repeat: no-repeat in my CSS reset.

    There are two new values for background-repeat: space and round. Space means the image is repeated as many times as can fully fit, separated by white space if repeating does not create an exact fit. Round means the image is repeated as often as will fit. If it doesn’t fit a whole number of times, the background images are rescaled so they do.

    You can also declare different values for the x and y axis. While this new feature is in the specifications, it is not supported yet in Firefox.

     

    Property Values for background-repeat

    background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
    IE 6 IE 7 IE 8 IE 9 IE 10 Firefox Chrome Safari Opera
    inherit
    no-repeat
    repeat
    repeat-x / repeat-y
    multiple comma separated values
    space
    round
    separate x/y values

    DOM

    document.getElementById("myID").style.backgroundRepeat
    

    background-clip

    With possible values of border-box | padding-box, the background-clip property determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is “border”, which is the effective default of all current browsers. Firefox 3 supports -moz-background-clip. Safari’s implementation is -webkit-background-clip.
    Supporting browsers also support content-box, which is not in the CSS3 specifications at this time. Border box is the default. Webkit uses both -webkit-border and -webkit-border-box. Firefox uses -moz-background-clip, and does not include the term ‘box’ in the value. The syntax may change.

    Property Values for background-clip

    background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
    -moz-background-clip: border;
    -webkit-background-clip: border-box;

    Browser support for background-clip

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6 Firefox 4 Chrome Safari 4/5 Opera
    border-box     -moz-: border   -webkit- -webkit-
    padding-box     -moz-: padding   -webkit- -webkit-
    content-box         -webkit- -webkit-

    Notes:

    IE 7 (in yellow) behaves like background-clip:padding if overflow property is set to hidden, auto or scroll.

    FF 3.6 is both prefixed, and supports values of border and padding (not border-box | padding-box)

    Safari 4 is both prefixed, and supports values of border, padding and content (not border-box | padding-box | content-box)

    DOM

    document.getElementById("myID").style.backgroundClip
    

    background-origin

    The background-origin property determines how the ‘background-position’ is calculated. Takes one or two parameters: border-box | padding-box | content-box. With a value of ‘padding-box’, the position is relative to the padding edge (‘0 0′ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner). ‘Border-box’ means the position is relative to the border edge, and ‘content-box’ means relative to the content edge.

    Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is -webkit-background-origin. Mozilla is supporting -moz-background-origin. Has no impact when background attachement is set to fixed.

    Unlike clip, the value of content-box is in the proposed specifications.

    Note that the spec has changed. Mozilla and webkit have support, but use the original value terms of border | padding | content instead of the currect proposed specifications border-box | padding-box | content-box.

    Property Values for background-origin

    background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box  | content-box] ]* ;
    -moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
    -webkit-background-origin: border-box, padding-box, border-box;

    Browser support for background-origin

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6
    -moz-
    Firefox 4 Safari 3
    -webkit-
    Safari 4 Safari 5 Chrome Opera
    border-box     border   border -webkit-      
    padding-box     padding   padding -webkit-      
    content-box     content   content -webkit-      

    Sandbox: Background-clip in action

    DOM

    document.getElementById("myID").style.backgroundOrigin
    

    background-size

    Supported by Opera, Safari and Chrome, and Firefox , the background-size property specifies the size of the background images. The ‘contain’ values scales the image, while preserving its aspect ratio (if any), which may leave uncovered space. The ‘cover’ scales the image so that it covers the whole area, completely covering the element, but perhaps not showing part of the image if the element and the image did not have the same aspect ratio.
    see background-size specifications at the W3C

    Note that you still need to use the -moz- prefix if you’re supporting FF3.6 and the -webkit- prefix if for some unexplainable reason you’re still supporting Safari 4.

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox 3.6 Firefox 4 Chrome Safari Opera
    auto -moz-
    contain -moz-
    cover -moz-
    (length) -moz-

    DOM

    document.getElementById("myID").style.backgroundSize
    

    The background shorthand.

    The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. Before CSS3, the values could be in any order, but were generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand.

    If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values listed below:

     

    	background-color: transparent;
    	background-position: 0% 0%;
    	background-size: auto auto;
    	background-repeat: repeat repeat;
    	background-clip: border-box;
    	background-origin: padding-box;
    	background-attachment: scroll;
    	background-image: none

    If you are declaring several background images using the shorthand property, the background color, if declared, should be declared as part of the shorthand of the final image only.

    Since they have the same value syntaz, if one <box> value is declared, then both the ‘background-origin’ and ‘background-clip’ are set to that value. If two values are present, then the first sets ‘background-origin’ and the second defines the ‘background-clip’ property.

    Property Values and order for the background shorthand

    background: background-image | background-position / background-size | background-repeat  | background-attachment | backgroun-origin | background-clip | background-color 
    background: url(myImg.jpg) bottom 20px right 20px / 200px 100px no-repeat fixed red;
    background: url(myImg.gif) 0 0 /  200px 100px no-repeat fixed border-box padding-box blue;  /*in action*/

    Default Values for background when values aren’t explicitly declared

    Property IE 6 IE 7 IE 8 IE 9 Firefox Safari Chrome Opera
    background-color transparent transparent transparent transparent transparent transparent transparent transparent
    background-image none none none none none none none none
    background-attachment “local” “local” scroll scroll scroll scroll scroll scroll
    background-position 0 0 0 0 0 0 0 0
    background-repeat repeat repeat repeat repeat repeat repeat repeat repeat
    background-size       auto auto auto auto auto
    background-clip       border-box border-box border-box border-box border-box
    background-origin       padding-box padding-box padding-box padding-box padding-box

    DOM

    document.getElementById("myID").style.background
    

    background-inline-policy

    Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.