This chapter describes the functions you can use with supported CSS properties.
Specifies an intermediary color value for a gradient.
color-stop(stop, color) |
stopThe point in the gradient that should have the specified color value. Represented as a percentage or a decimal value between 0 and 1.
colorThe color of the gradient at the stop.
For more information, see “-webkit-gradient.”
Available in Safari 4.0 and later.
A convenience function for the “color-stop” function that specifies the first color stop in a gradient.
from(color) |
colorThe color of the gradient at the stop.
Equivalent to calling color-stop() with a stop value of 0%.
Available in Safari 4.0 and later.
A convenience function for the “color-stop” function that specifies the last color stop in a gradient.
to(color) |
colorThe color of the gradient at the stop.
Equivalent to calling color-stop() with a stop value of 100%.
Available in Safari 4.0 and later.
Specifies a canvas for drawing programmatically with Javascript.
-webkit-canvas(canvas) |
canvasThe name of the canvas.
The -webkit-canvas() function can be used in any place an image URL is used.
Canvases specified with the -webkit-canvas() function can be accessed in Javascript with the method getCSSCanvasContext(), which returns a CanvasRenderingContext object. The identifier passed to getCSSCanvasContext() should be the same as the value for canvas.
Specifying a new width or height for the canvas in subsequent calls to getCSSCanvasContext() clears the canvas buffer.
Available in Safari 4.0 and later.
Generates a gradient image.
-webkit-gradient(type, start_point, end_point, / stop...) |
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...) |
typeThe type of gradient. Can be linear or radial.
start_pointThe point in the image at which the linear gradient begins.
end_pointThe point in the image at which the linear gradient ends.
stopA color-stop() function indicating the desired color for the gradient at a particular point in its progression.
inner_centerThe center point of the inner, starting circle in a radial gradient.
inner_radiusThe radius of the inner, starting circle in a radial gradient.
outer_centerThe center point of the outer, ending circle in a radial gradient.
outer_radiusThe radius of the outer, ending circle in a radial gradient.
left topThe point corresponding to the top left corner of the image.
left bottomThe point corresponding to the bottom left corner of the image.
right topThe point corresponding to the top right corner of the image.
right bottomThe point corresponding to the bottom right corner of the image.
-webkit-gradient() can be used in any place an image URL is used.
A linear gradient determines its color by interpolating between values specified by the color-stop() functions provided. Each color-stop() function specifies a percentage or a decimal between 0 and 1 and a color, indicating that the gradient should have the specified color value at the specified fraction of the gradient’s length. The shorthand functions from() and to() are supported as special-case color-stop() functions. The following example creates a linear gradient that shifts from yellow to orange in its first half and from orange to red in its second half, moving from the top left of the image to the bottom right of the image:
-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)); |
A radial gradient specifies its start and end with two (typically concentric) circles, each identified by a center point and radius. The color value at a point between the circumference of the inner circle and the circumference of the outer circle is determined by interpolating between color-stop() functions. The color value inside the inner circle is the color value of the first color-stop() function.
Available in Safari 4.0 and later.
Specifies a cubic Bézier curve.
cubic-bezier(P1x,P1y,P2x,P2y)
P1x, P1yFirst point in the Bézier curve.
P2x, P2ySecond point in the Bézier curve.
A cubic Bézier curve is defined by four control points, P0 through P3. P0 and P3 are always set to (0,0) and (1,1). This function is used to set the values for the points in between, points P1 and P2. Each point is specified by both an x and y value.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a 2D transformation in the form of a transformation matrix of six values.
matrix(m11, m12, m21, m22, tX, tY)
Elements of a 2 x 2 matrix in column-major order.
1,1 | 2,1 |
1,2 | 2,2 |
The x and y translation elements.
Passing matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a 3D transformation as a 4 x 4 matrix.
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)
Defines a 4 x 4 homogeneous matrix of 16 values in column-major order (0,0; 0,1; 0,2; ...).
0,0 | 1,0 | 2,0 | 3,0 |
0,1 | 1,1 | 2,1 | 3,1 |
0,2 | 1,2 | 2,2 | 3,2 |
0,3 | 1,3 | 2,3 | 3,3 |
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a perspective projection matrix.
perspective(depth)
The distance, in pixels, of the z=0 plane from the viewer.
This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position.
The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer’s position and a point at a distance of infinity from the viewer).
Lower values for this property give a more flattened pyramid and therefore a more pronounced perspective effect. A value of 1000 pixels gives a moderate amount of foreshortening, and a value of 200 pixels gives an extreme amount.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a 2D rotation around the origin of the element.
rotate(angle)
The rotation angle. The angle may be specified using deg, rad or grad units.
The rotation operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]. The origin of the element is specified using the -webkit-transform-origin property.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a clockwise 3D rotation.
rotate3d(x, y, z, angle)
The [x,y,z] direction vector for the rotation.
If the direction vector is not of unit length, it will be normalized. If the direction vector cannot be normalized, such as [0, 0, 0], the rotation will not be applied.
The rotation angle. The angle may be specified using deg, rad or grad units.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a clockwise rotation by the given angle about the x-axis.
rotateX(angle)
The rotation angle. The angle may be specified using deg, rad or grad units.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a clockwise rotation by the given angle about the y-axis.
rotateY(angle)
The rotation angle. The angle may be specified using deg, rad or grad units.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a clockwise rotation by the given angle about the z-axis.
rotateZ(angle)
The angle of the rotation. The angle may be specified using deg, rad or grad units.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a 2D scale operation.
scale(scaleX [, scaleY])
The scaling factor to apply in the x direction.
The scaling factor to apply in the y direction. If not specified, defaults to scaleX.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a 3D scale operation.
scale3d(scaleX, scaleY, scaleZ)
The scaling factor to apply in the x direction.
The scaling factor to apply in the y direction.
The scaling factor to apply in the z direction.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Scales in the x direction.
scaleX(sx)
The scaling factor to apply to the x direction.
This function specifies a scale operation using the [sx, 1, 1] scaling vector.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Scales in the y direction.
scaleY(sy)
The scaling factor to apply to the y direction.
This function specifies a scale operation using the [1,sy,1] scaling vector.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Scales in the z direction.
scaleZ(sz)
The scaling factor to apply to the z direction.
This function specifies a scale operation using the [1,1,sz] scaling vector.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a skew transformation along the x and y axes by given angles.
skew(angleX [, angleY])
The angle of the skew along the x-axis. The angle may be specified using deg, rad or grad units.
The angle of the skew along the y-axis. The angle may be specified using deg, rad or grad units. If not specified, defaults to 0.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a skew transformation along the x-axis by the given angle.
skewX(angle)
The angle of the skew. The angle may be specified using deg, rad or grad units.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a skew transformation along the x-axis by the given angle.
skewY(angle)
The angle of the skew. The angle may be specified using deg, rad or grad units.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a 2D translation vector.
translate(deltaX [, deltaY])
The number of units to translate along the x-axis. This value may be a percentage or a length.
The number of units to translate along the y-axis. If not specified, the y translation defaults to 0. This value may be a percentage or a length.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a 3D translation vector.
translate3d(deltaX, deltaY, deltaZ)
The number of units to translate along the x-axis. This value may be a percentage or a length.
The number of units to translate along the y-axis. This value may be a percentage or a length.
The number of units to translate along the z-axis. This value may be a percentage or a length.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Specifies a translation in the x direction.
translateX(deltaX)
The number of units to translate along the x-axis. This value may be a percentage or a length.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a translation in the y direction.
translateY(deltaY)
The number of units to translate along the y-axis. This value may be a percentage or a length.
Available in Safari 3.1 and later. Available in iPhone OS 2.0 and later.
Specifies a translation in the z direction.
translateZ(deltaZ)
The number of units to translate along the z-axis. This value may be a percentage or a length.
Available in Safari 4.0.3 and later running on Mac OS X v10.6 and later. Available in iPhone OS 2.0 and later.
Last updated: 2010-05-07