CSS3 Beginner Chapter _5

Background style

1. Background color
syntax : background-color:transparent | Color

{ Background-color:#CCCCCC;}

2. Gradient Color
Syntax : background:linear-gradient (direction, Color,color, ...) set the gradient, which is evenly distributed by default, to set a percentage after color
direction : to Buttom (default), to-top, to-right, to-left, to-bottom right,to top right

Background-image:linear-gradient (to left, Red 30%,blue);

3. Background image
syntax : background-image:none | URL (URL)

{ background-image:url (images/bg.gif);}

4. Background tiling method
syntax : background-repeat:repeat | No-repeat | Repeat-x | Repeat-y

{ background-repeat:repeat-x;}

5. Background positioning
syntax : background-position: Align Left alignment

{ background-position: Leftbottom;}  { background-position:30% 20px;}

6. Background origin
syntax : Background-origin:border-box | Padding-box | Content-box;
Description : Sets the original starting position of the element background picture. must ensure that the background is background-repeat for no-repeat
This property will not take effect.

Padding-box: Displays the background image starting from the padding area (including padding).
Border-box: Displays the background image starting from the border area (including border).
Content-box: Displays the background image starting from the content area.

7. Display area of the background
syntax : Background-clip:border-box | Padding-box | Content-box | Text
Description : Sets the area of the background image to be cropped outwards.

Text: The shape of the foreground content, such as text, is cropped out as a clipping region, so you can use the background as
Matte effects such as fill color.

8. Background dimensions
Grammar :background-size:<length> | <percentage> | Auto | Cover | Contain
Description : Set the size of the background picture

Auto: The true size of the background image.
Cover: The background image is more than scaled to a fully covered container, and the background image may be out of the container.
Contain: The background image is always wrapped when the background image is equal to the width or height of the container.
contained within the container.

9. Background style abbreviations
syntax : background: Background color background image background tiling way background positioning

{     background:#EDEDED url (images/bg.png) no-repeat 50% 30px;}

10. Multiple Backgrounds
syntax : background: [Background-color] | [Background-image] | [Background-position] [/background-size] | [Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin],...
Note : Use commas to separate the abbreviated values for each group of background, and if you have a size value, you need to follow position and separate it with "/", if you have more than one background picture, and the other property has only a single (for example, Background-repeat has only one). Indicates that the property value is applied to all background pictures. Background-color can only set one.

Background-repeat:repeat1,repeat2,..., Repeatn;
Backround-position:position1,position2,..., Positionn;
Background-size:size1,size2,..., Sizen;
Background-attachment:attachment1,attachment2,..., Attachmentn;
BACKGROUND-CLIP:CLIP1,CLIP2,..., CLIPN;
Background-origin:origin1,origin2,..., Originn;
Background-color:color; list Style

List Style

1. Bullets
syntax : List-style-type:disc | Circle | Square | decimal | Lower-roman | Upper-roman | Lower-alpha | Upper-alpha | none | Armenian | cjk-ideographic | Georgian | Lower-greek | Hebrew | Hiragana | Hiragana-iroha | Katakana | Katakana-iroha | Lower-latin | Upper-latin
description : Control list each item header icon

Disc: Solid Circle (CSS1)
Circle: Hollow Circle (CSS1)
Square: Solid block (CSS1)
Decimal: Arabic numerals (CSS1)
Lower-roman: Lowercase roman numerals (CSS1)
Upper-roman: Uppercase Roman Numerals (CSS1)
Lower-alpha: lowercase English alphabet (CSS1)
Upper-alpha: Uppercase English alphabet (CSS1)
None: Do not use bullets (CSS1)
Armenian: The traditional Armenian numerals (CSS2)
Cjk-ideographic: Plain ideographic numerals (CSS2)
Georgian: The traditional George Number (CSS2)
Lower-greek: Basic Greek Small Letter (CSS2)
Hebrew: The traditional Hebrew numerals (CSS2)
Hiragana: Japanese Hiragana characters (CSS2)
Hiragana-iroha: Japanese hiragana serial number (CSS2)
Katakana: Japanese Katakana characters (CSS2)
Katakana-iroha: Japanese Katakana Sequence Number (CSS2)
Lower-latin: lowercase latin alphabet (CSS2)
Upper-latin: Uppercase Latin alphabet (CSS2)

{ List-style-type:disc;} / * default * /

2. Custom Bullets
syntax : list-style-image:none | URL (URL)
description : Use a picture to define the head icon for each item in the list

{list-style-image:url (images/arrow.gif)}

Deform style

syntax : Transform: various functions
Description : Change the size of the element, transparency, rotation angle, twist degree and so on.

various functions :

Translate (): Specifies the 2D translation (2D translation) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0
Transform-origin: Any element has a center point, by default its center point is 50% of the element's x-axis and y-axis.
TranslateX (): Specifies the translation of the x-axis (horizontal direction) of the object
Translatey (): Specifies the translation of the y-axis (vertical direction) of the object
Rotate (): Specifies the 2D rotation (2D rotation) of the object, preceded by the definition of < ' transform-origin ' > property
Scale (): Specifies the object's 2D scales (2D scaling). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default is the value of the first parameter skew (): Specifies the object skew transformation (skew-cut skew). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0
Translate3d (): Specifies the 3D displacement of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting

Transition animations

1.transition-property (Transition properties):

Description: Sets the properties of the participating transitions in the object.

Div { transition-property:width,height,color;}

2. Transition-duration (time required for transition):
description : Used primarily to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new attribute, commonly known as duration.

Div { transition-duration: . 5s;}

3. Transition-timing-function (Animation-transition function):
description : Refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition.
value :
Ease: Default value, gradually slow (cubic-bezier (0.25,0.1,0.25,1))
Linear: Uniform transition effect (equals Cubic-bezier (0,0,1,1))
Ease-in: Accelerated transition effect (equals Cubic-bezier (0.42,0,1,1))
Ease-out: Transition effect of deceleration (equals Cubic-bezier (0,0,0.58,1))
Ease-in-out: Accelerates and slows down (equals cubic-bezier (0.42, 0, 0.58, 1.0))
Cubic-bezier (N,n,n,n): Defines its own value in the Cubic-bezier function. The possible values are numbers between 0 and 1. (Animation speed customization)

Div { transition-timing-function:ease-in;}

4. Transition-delay (Animation-transition delay time):
description : The Transition-delay property is very similar to the Transition-duration property, and the difference is that transition-duration is used to set the duration of the transition animation, Transition-delay is used primarily to specify the time at which an animation starts executing, that is, how long it takes to start executing after changing the attribute value of the element.

{     transition-delay:. 1s;}

5. Transition (Transition):
syntax : transition:[none | <transition-property> | | < transition-duration > | | <transition-timing-function> | | < transition-delay> [, *]
description : triggered by clicking the mouse, getting focus, being clicked or any changes to the element, and smoothing the CSS property values with an animated effect.

/* all represents all attributes */ Div {    transition: All . 5s ease-in. 1s;}

CSS3 Beginner Chapter _5