Colors, Backgrounds, and Gradients

Chapter 9

Figures

  1. Declared color versus default color
  2. Changing colors
  3. Border colors are taken from the content’s color
  4. Setting the border color for images
  5. Changing form element foregrounds
  6. Different colors for different elements
  7. Backgrounds and padding
  8. A reverse-text effect for H1 elements
  9. The results of a more complicated stylesheet
  10. Using background and border to two-tone an image
  11. The three box-oriented types of background clipping
  12. Clipping the background to text
  13. Applying a background image in CSS
  14. Applying background images to block and inline elements
  15. Adding link icons as background images
  16. What inherited backgrounds would do to layout
  17. The consequences of a missing background image
  18. Centering a single background image
  19. Placing the background image in the top-right corner of paragraphs
  20. Declaring only one percentage value means the vertical position evaluates to 50
  21. Various percentage positions
  22. Offsetting the background image using length measures
  23. Mixing percentages and length values
  24. Using negative length values to position the origin image
  25. Varying effects of negative percentage values
  26. Changing the offset edges for the origin image
  27. Inferred zero-length offsets
  28. The three types of background origins
  29. The three types of background origins, redux
  30. When origin and clipping diverge
  31. Tiling the background image vertically
  32. Tiling the background image horizontally
  33. Placing a single large background image
  34. Bordering elements with background images
  35. Centering the origin image and repeating it
  36. The difference between centering a repeat and starting it from the top left
  37. Tiling the background image with filler space
  38. Spaced-out tiling with different intervals
  39. Spacing along one axis but not the other
  40. Tiling the background image with scaling
  41. Rounded background images that are clipped
  42. Clipping due to mismatched clip and origin values
  43. Nailing the background in place
  44. The centering continues to hold
  45. Default-attach versus local-attach
  46. Perfect alignment of backgrounds
  47. The complexspiral distorted
  48. Resizing the origin image
  49. Distorting the origin image by resizing it
  50. Resizing the origin image with percentages
  51. Covering the background with the origin image
  52. Covering the background with the origin image, redux
  53. Containing the origin image within the background
  54. Repeating a contained origin image
  55. Covering, containing, positioning, and clipping
  56. Using shorthand
  57. Multiple background images
  58. Individually positioning background images
  59. Multiple background layers via shorthand
  60. The order of background layers
  61. Obscuring layers with repeated images
  62. Placing the same image in all four corners
  63. The progression of a simple gradient
  64. Simple linear gradients
  65. Fading to white versus fading to transparent
  66. The distribution of color stops along the gradient line
  67. Placing color stops every 25 pixels
  68. Gradient clipping when colors stops go too far
  69. Gradient clipping when color stops have negative positions
  70. Placing color stops every 10 percent
  71. Distributing color stops between explicitly placed stops
  72. The effect of coincident color stops
  73. Hard-stop stripes
  74. Handling color stops that are out of place
  75. Linear blending from one color stop to the next
  76. Black-to-gray with differing midpoint hints
  77. Comparing two linear gradients to one hinted transition
  78. The placement and sizing of the gradient line
  79. The calculation of color along the gradient line
  80. The extension of selected colors along the gradient line
  81. How gradients are constructed for various images
  82. A gradient with stops beyond the start and ending points
  83. A gradient headed toward the top right
  84. Examples of the side effects of a quadrant-directed gradient
  85. A simple radial gradient in multiple settings
  86. Simple radial gradients
  87. Percentage-sized elliptical gradients
  88. The effects of radial gradient sizing keywords
  89. Changing the center position of radial gradients
  90. Changing the center position of explicitly sized radial gradients
  91. Adding a color stop
  92. The gradient ray and some of the ellipses it spawns
  93. Setting the gradient ray’s ending point
  94. Color stops beyond the ending point
  95. Handling a negative color-stop position
  96. The effects of a zero-width ellipse
  97. Very, very tall ellipses
  98. Tiled radial gradient images
  99. It’s time to start the music…
  100. The two “fold” gradients
  101. Tiling gradient images with background-repeat
  102. A repeating gradient image with repeating-linear-gradient
  103. Dealing with hard resets in repeating-gradient images
  104. Repeated tiling of repeating-gradient images
  105. Repeating radial gradients
  106. A simple box shadow
  107. Box shadows are incomplete
  108. Various blurred and spread shadows
  109. Various inset shadows