Bert Bos | CSS tutorial – images
Image values (gradients)
Contains:
Importing images:
url(...)
image()
– fragments, fallbacks and solid colors
Color gradients
Fitting images to a box:
object-fit
,
object-position
,
image-orientation
Raster images with high or low resolution:
image-resolution
Five notations for the same gradient:
linear-gradient(yellow, blue); linear-gradient(to bottom, yellow, blue); linear-gradient(180deg, yellow, blue); linear-gradient(to top, blue, yellow); linear-gradient(to bottom, yellow 0%, blue 100%);
A gradient under 135°
Even if the gradient is used in a non-square box, the corners are yellow and blue.
linear-gradient(135deg, yellow, blue); linear-gradient(-45deg, blue, yellow);
A gradient throught three colors:
linear-gradient(yellow, blue 20%, #0f0);
Keywords instead of degrees: to ensure that the diagonal corresponds to the diagonal of the box.
linear-gradient(to top right, red, white, blue)
From the center to all edges
radial-gradient(yellow, green); radial-gradient(ellipse at center, yellow 0%, green 100%); radial-gradient(farthest-corner at 50% 50%, yellow, green);
From the center to the corners
radial-gradient(circle, yellow, green);
From the center to all edges, with three colors:
radial-gradient(red, yellow, green);
From bottom left to both opposite edges:
radial-gradient(farthest-side at left bottom, red, yellow 50px, green);
From an arbitrary point to the two nearest sides:
radial-gradient(closest-side at 20px 30px, red, yellow, green); radial-gradient(20px 30px at 20px 30px, red, yellow, green);
From an arbitrary point to the nearest side:
radial-gradient(closest-side circle at 20px 30px, red, yellow, green); radial-gradient(20px 20px at 20px 30px, red, yellow, green);
Repeating linear gradient:
repeating-linear-gradient(red, blue 20px, red 40px)
Repeating radial gradient:
repeating-radial-gradient(red, blue 20px, red 40px)
Repeating circular gradient:
repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)
As of 2013, the color gradients are already well supported by the major browsers, the other features not yet.