Colors, Backgrounds, and Gradients: Adding Individuality with CSS

Colors, Backgrounds, and Gradients: Adding Individuality with CSS

Language: English

Pages: 112

ISBN: 1491927658

Format: PDF / Kindle (mobi) / ePub


One advantage of using CSS3 is that you can apply colors and backgrounds to any element in a web document, create your own gradients, and even apply multiple backgrounds to the same element. This practical guide shows you many ways to use colors, backgrounds, and gradients to achieve some pretty awesome effects.

Short and sweet, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Colors, Backgrounds, and Gradients, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to bring life to your web pages now.

  • Define foreground colors for a border or element with the color property
  • Combine foreground and background colors to create interesting effects
  • Position and repeat one or more images in an element’s background
  • Fix an image to a screen’s viewing area, rather than to the element that contains it
  • Use color stops to define vertical, horizontal, and diagonal linear gradients
  • Create spotlight effects, circular shadows, and other effects with radial gradients

Designed for Use: Create Usable Interfaces for Applications and the Web

HTML, XHTML, and CSS: Comprehensive (6th Edition)

Build a Website for Free

Mastering Photoshop for Web Design

The Art of SEO: Mastering Search Engine Optimization (2nd Edition)

Creating a Website: The Missing Manual (3rd Edition)

 

 

 

 

 

 

 

 

 

 

you look closely, you’ll notice that there are background images in each of the four corners of the element. Furthermore, the images are spaced out so that they occur at regular intervals in both the horizontal and vertical directions. This is what space does: it determines how many repetitions it can fit along a given axis and then spaces them out at regular intervals so that the repetitions go from one edge of the background to another. This doesn’t guarantee a regular square grid, where the

background-position: center; background-size: 4em 4em;} You can mix things up if you like, and in the process squeeze or stretch the origin image: main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 400px 4em;} And as you might expect, if you allow the image to repeat, then all the repeated images will be the same size as the origin image. This and the previous example are both illustrated in Figure 1-47, which is the result of

positioning area; that is, the area defined by background-origin, and not by background-clip. Suppose you want an image that’s half as wide and half as tall as its background positioning area, as shown in Figure 1-48. Simple: main {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; background-size: 50% 50%;} Figure 1-48. Resizing the origin image with percentages And yes, you can mix lengths and percentages: main {background-image: url(yinyang.png);

declared. In order to better visualize the results of each keyword, see Figure 1-83, which depicts each keyword applied as both a circle and an ellipse. Figure 1-83. The effects of radial gradient sizing keywords These keywords cannot be mixed with lengths or percentages in elliptical radial gradients; thus, closest-side 25px is invalid and will be ignored. Something you might have noticed in Figure 1-83 is that the gradients didn’t start at the center of the image. That’s because they were

in CSS, so background-and-padding tricks may or may not be useful, depending on what you want to do and the state of browser support for the advanced border options. Remember that form inputs, nearly all of which are replaced elements, are treated as special, and often applying padding to them will not have the same results as applying padding to an image, let alone a nonreplaced element like a paragraph. Just as with most styling of form inputs, adding a background color should be rigorously

Download sample

Download