Css3 practical path (3): Color and background (backgroud)

ArticleDirectory

• Using rgba colors

1. Color and transparency

In css3, the color has been expanded a lot. For details, refer to the official website: www.w3.org/tr/2003/cr-css3-color-20030514. next, let's talk about the new digital definition of css3.

1.1 rgba

I believe that RGB is often used in color definition before,

RGB color mode (also translated as "Red, green, and blue", which is rarely used) is a color standard in the industry) the changes of the three color channels and their overlapping to obtain a variety of colors, RGB represents the colors of the red, green, and blue channels, this standard covers almost all colors that human vision can perceive and is one of the most widely used color systems.

Rgba adds a parameter to control Alpha transparency based on RGB. The preceding three parameters are R, G, and B. The value range of a positive integer is 0-255. The value range of the percentage value is 0.0%-100.0%. A value out of the range will be used as of its nearest value limit. Not all browsers support percentage values. Parameter A, with a value ranging from 0 ~ Between 1, cannot be negative.

For example: Background-color: rgba (192,192,192, 0.5), the color defined with rgba cannot use HEX value (# c0c0c0) Like RGB ).

1.2 HSL & HSLA

The HSL color model is a color standard in the industry. It is based on the colors (H), saturation (s), and brightness (l) the changes of the three color channels and Their superposition to obtain a variety of colors, HSL represents the color, saturation, brightness of the three channels.

Syntax: HSL (hue, saturation, lightness, alpha ).

Note: hue (color), value range: indicates red, 120 indicates green, and 240 indicates blue. Of course, other values can be used to determine the color of hue; the value of saturation (saturation) is in the form of percentage (0%: Gray, 100%: full color); the value of lightness (brightness) is also in the form of percentage (0%: Black, 100%: White ); the value of alpha (transparency) (0-1 ).

Instance: Background-color: HSL (75%, 75%, 0.3); background-color: HSLA );

1.3 opacity

Used to define the transparency of elements. The value range is (0-1). In fact, this feature has long been supported by the browser.

For example: opacity: 0.5, but earlier versions of IE8 and IE need to write filter: alpha (opacity = 50), using the unique filter of IE.

2. Background

Added the background in css3.Background-size,Background-origin,The three new features of background-clip are described as follows:

2.1 Background-size

Specifies the size of the background image,

Syntax: Background-size:Length|Percentage| Cover | contain;

Note:

Value	Description
Length	The width and height of the image are set using a number. The first value is the width, and the second value is the height. If only one value is set, the second value is set to auto.
Percentage	Use percentages to set the width and height of the image. The first value is the width and the second value is the height. If only one value is set, the second value is set to auto.
Cover	Stretch the image to fill a certain element with the size ratio of the image itself.
Contain	Scale down or stretch the image based on the size of the image, but an element can fully display the image.

Instance:

Image used

Background-image: URL ('images/smiley.gif '); background-repeat: No-Repeat; Background-size: 60px 30px;

Background-size: 60px 30px; Background-size: cover; Background-size: contain;

 

 

 

 

 

 

2.2 background-Origin

Specifies the region where the background is displayed.

Syntax: Background-origin: padding-box | border-box | content-box;

Note:

Value	Description
Padding-box	The background image is displayed in the padding area.
Border-box	The background image is displayed in the border area.
Content-box	The background image is displayed in the content area.

Instance:

. Bgor1 {width: 200px; Height: 100px; padding: 10px 20px; Border: 5px orange dotted; Background-image: URL ('images/smiley.gif '); background-repeat: no-Repeat; Background-position: Left top; Background-origin: Content-box ;}

The background-origin Property specifies what the background-position property shocould be relative.

2.3 background-clip

Specify the start area of the background canvas.

Syntax: Background-clip: border-box | padding-box | content-box;

Note:

Value	Description
Border-box	Crop the background from the border area
Padding-box	Crop the background from the padding Area
Content-box	Crop the background from the content area

Instance:

. Bgor2 {width: 250px; Height: 100px; padding: 10px 20px; Border: 10px orange dotted; Background-color: # cccc00; Background-image: URL ('images/smiley.gif '); background-repeat: No-Repeat; Background-position: Left top; Background-clip: Content-box ;}

The background-clip property is supported ie9 +, Firefox 4 +, opera, and chrome.

3 gradient (gradients)

A gradient is a visual effect applied to a plane. It can be gradually converted from a color to another color. Therefore, you can create a gradient similar to a rainbow, which can be applied to any place where images can be used.

We generally use images for gradient effects on Web pages. This is a good method. You don't need to consider the compatibility of browsers when using images. But here I will use css3 to write gradient, currently, the WebKit core is available, and the Moz core fully supports gradient effects. The latest operabrowser (11.52) and IE core support CSS (filter) and linear (liner) gradient.

3.1 gradient syntaxes and descriptions for various browsers

First, let's talk about the core Web browser of WebKit,

Reference: http://www.webkit.org/blog/1424/css3-gradients/

Syntax:-WebKit-gradient (type, start_point, end_point,/stop ...)

-WebKit-gradient (type, inner_center, inner_radius, outer_center, outer_radius,/stop ...)

Note:

Value	Description
Type	Gradient Type, can be a linear gradient (linear) or radial gradient (radial), from which the other two gradient writing: -WebKit-linear-gradient and-WebKit-radial-gradient are generally used to this method.
Start_point	Starting Point of the gradient in the gradient image
End_point	The end point of the gradient in the gradient image.
Stop	The color-stop () method that specifies the specific color in the gradient process.
Inner_center	Inner center, radial gradient start ring
Inner_radius	Internal radius, radial gradient starting circle
Outer_center	Center of the external gradient ending circle
Outer_radius	Radius of the ending circle of the external gradient

WebKit core browsers also define new gradient rules:-WebKit-repeating-linear-gradient (),-WebKit-repeating-radial-gradient (), if you are interested, you can go to the above website to view the information.

Next let's talk about Moz core, Reference URL: https://developer.mozilla.org/en/Using_gradients

Linear Gradient Syntax:-moz-linear-gradient ([<point >||< angle>,]? <Stop>, <Stop> [, <Stop>] *)

Note: The starting point is similar to the background position. You can set the horizontal and vertical positions as percentages, or in pixels, or use left/center/right in the horizontal direction or top/center/bottom in the vertical direction. The position starts in the upper left corner. If you do not specify a horizontal or vertical position, the default value is center,

For example,-moz-linear-gradient (left 20deg, black, white ).

Radial Gradient Syntax:-moz-radial-gradient ([<BG-position >||< angle>,]? [<Shape >|| <size>,]? <Color-Stop>, <color-Stop> [, <color-Stop>] *);

(Similar to linear gradient, radial gradient allows you to specify the shape of a gradient (circular circle or elliptical ellipse) and the size (closest, closest, remote, and farthest, include or overwrite (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover )). For example:

 



-Moz-radial-gradient (45px 45px, ellipse farthest-corner, Aqua 0%, rgba (0, 0,255, 0) 100%, blue 95%)

 



Let's talk about how to define the gradient in Opera Browser. If you are interested, refer to the following website:

 



Http://dev.opera.com/articles/view/css3-linear-gradients/

 



Http://dev.opera.com/articles/view/css3-radial-gradients/

The syntax and description are similar to those defined in the preceding two browsers, which are not described here, for example:-o-linear-gradient (top left, rgba (100,100,100, 1), rgba (100,100,100, 0.5 )).

 



Finally, let's talk about how IE gradient is defined, in IE can use filter, Reference URL: http://msdn.microsoft.com/en-us/library/ms532997 (vs.85, loband). aspx,

 



Syntax:Filter: progid: DXImageTransform. Microsoft. gradient (sproperties)

Property	Description
Enabled	Set whether to perform gradient
Endcolor	Set the final color (not transparent) with the color name (red)
Endcolorstr	In character format (# Ff000000To# Ffffffff) Set the final color.
Gradienttype	Set the gradient direction (1: horizontal gradient, 0: vertical gradient. Default Value: 0)
Startcolor	Set the start color (opacity) with the color name (red)
Startcolorstr	In character format (# Ff000000To# Ffffffff) Set the start color.

For example: filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 1), you may notice that using the filter in IE cannot make radial gradient, and the color can only be set to start and end, it is not as flexible as WebKit and Moz settings. I believe that the next version of IE will be upgraded to the standard CSS format.
3.2 instance description

Describe linear instances first, which can be implemented in IE

. Linear {width: 130px; Height: 130px; Border: 1px solid green; padding: 10px; Background:-WebKit-linear-gradient (left, Red, White); Background: -Moz-linear-gradient (0deg, Red, # fff); filter: progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = white, gradienttype = 1); Background:-o-linear-gradient (red, white );}. linear2 {width: 130px; Height: 130px; Border: 1px solid # e4c700; padding: 10px; Background:-WebKit-linear-gradient (45deg, white, # 00c9ff 50%, purple 50%, white); Background:-moz-linear-gradient (45deg, white, # 00c9ff 50%, purple 50%, white); Background:-o-linear-gradient (45deg, white, # 00c9ff 50%, purple 50%, white); filter: progid: DXImageTransform. microsoft. gradient (gradienttype = 0, startcolorstr = '# ff0099cc', endcolorstr = '# define 87b4 ');}

 

 

 

 

 

 

The second line2 defines four colors in WebKit and Moz, with a gradient of 45 degrees.

The following is a radial instance. This is a ball. check it in WebKit and Moz:

 



. Radial {width: 200px; Height: 200px; border-radius: 50%; Background:-WebKit-radial-gradient (30% 30%, white, black); Background: -Moz-radial-gradient (30% 30%, white, black );}

<Div style = "Background: # d9d3b8"> <Div style = "Background:-WebKit-radial-gradient (white, white 30%, rgba (255,255,255, 0) 50% ); background:-moz-radial-gradient (white, white 30%, rgba (255,255,255, 0) 50%); padding: 10px 0px 10px 10px; "> 

Spotlight on: gradientsusing rgba colors

	



	Next let's talk about the unique repeated gradient in WebKit:


	


-WebKit-repeating-radial-gradient (top left, circle, # ccffcc, #33 CCCC 10%, #336699 20%);-o-repeating-linear-gradient (20deg, # ccffcc, #33 CCCC 20px );

	



	Next, let's talk about the specific background image gradient in Moz:


	


-Moz-linear-gradient (right, rgba (255,255,255, 0), rgba (255,255,255, 1), URL ('images/transparent.png ');

	



	



	



	



	Finally, display the crystal buttons in my first article in this series. With my further understanding of the gradient, I improved my experience to become a crystal button across all browsers (the latest.


	



	



	Display CSS:


	


Input.css 3btn {Background:-moz-linear-gradient (270deg, # d2ebf8, #0c8ab5); Background:-WebKit-linear-gradient (top, # d2ebf8, #0c8ab5 ); background:-o-linear-gradient (top, # d2ebf8, #0c8ab5); filter: progid: DXImageTransform. microsoft. gradient (gradienttype = 0, startcolorstr = '# route 99cc', endcolorstr = '# ff0087b4'); border-top: 1px solid # limit 38C; border-Right: 1px solid # 1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid # 1f2d4d; border-radius: 4px; box-Shadow: Inset 0 1px 10px 1px # 5c8bee, 0px 1px 0 # 1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111; color: # f0f0f0; Font: bold 20px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px 0 10px 0; text-align: center; text-Shadow: 0px-1px 1px # 1e2d4d; width: 150px; Background-clip: padding-box;} input.css 3btn: hover {box-Shadow: Inset 0 0px 20px 1px #87 adff, 0px 1px 0 # 1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111; cursor: pointer;} input.css 3btn: Active {box-Shadow: Inset 0 1px 10px 1px # 5c8bee, 0 1px 0 # 1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; margin-top: 1px ;}

	



	



	



	



	In fact, it is better to add some special text effects to the crystal button. The special text effects of css3 will be explained in the next chapter.