- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 570字
- 2021-08-13 16:50:22
CSS3 overview
CSS3 is not part of the HTML5 specification, but it is an integral part of writing HTML5 applications. CSS3 is being developed in tandem with HTML5 and provides many new styles to make web pages look and function better than ever. Things that were once the realm of Photoshop, such as gradients and shadows, are now easily added via styling. Using these new graphics features will make your applications look modern and add character to your applications.
Some of the most exciting additions to CSS are the ability to add gradients and shadows to elements. Rounded corners, a feature that everyone wanted in their web pages, and which were once the realm of many HTML hacks, are now simple to add. It has never been easier to make web pages and applications look good without having to download extra images and code to support them.
You can see examples of all the following CSS3 styles in chapter2/css3-examples/css3-examples.html.
CSS3 colors
Before we get started with the new effects, let's discuss colors. CSS3 has new ways to define colors that allow you to set transparency and define colors in HSL format. Of course, you can still use the old standards of hex values, any of the CSS color names, and the rgb() specifier.
A new rgba() specifier has been added to allow the alpha, or opacity amount, to be set with a color. Just like rgb(), the first three parameters set red, green, and blue amounts, and are values ranging from 0 to 255. A fourth parameter, the alpha, is a floating point value from 0 to 1 where 0 is completely transparent and 1 is completely opaque. The following declares a red background color that is 50 percent transparent:
background-color: rgba(255, 0, 0, 0.5);
Although most browsers support rgba(), it's a good idea to specify a fallback for those that don't support it by defining a color in rgb() format preceding it, as shown here:
background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0, 0.5);
Here's an example of overlapping three elements all with an alpha value of 0.5 and having colors red, green, and blue (yes, you can draw circular elements, which we'll see in the next section):
In addition to RGB colors, CSS3 also supports HSL colors, which stands for Hue, Saturation, and Lightness. HSL is based on a color wheel that is full color at the edges and fades to gray in the center. Now extend the wheel into a cylinder that is black at the bottom, white at the top, and full color in the middle. That is the theory around HSL colors.
It is specified using hsl(h, s, l). Hue is a value from 0 to 360 that maps to the degrees on the color wheel. 0 is red, 120 is green, 240 is blue, and 360 is back around to red. Saturation is the percentage of color where 0% is completely gray and 100% full color. Lightness is the percent of lightness where 0% is black, 50% is full color, and 100% is white. You can specify it with or without an alpha value, the same as rgb(), as shown here:
hsl(240, 100%, 50%); hsla(240, 100%, 50%, 0.5);
Most people don't think of colors in HSL, but it's out there just in case you want to use it. If you want to play around with it, there is a nice HSL picker at http://hslpicker.com.