CSS3 Common Properties

CSS is a standard that we use to control the style and layout of Web pages.

CSS3 is the latest CSS standard.

CSS3 is split into "modules", and the old specifications have been broken down into smaller chunks, with new properties added.

Some of the more important CSS3 modules: selectors, box models, backgrounds and borders, text effects, 2d/3d transformations, animations, and more.

CSS3 border:

Using CSS3, you can create rounded borders, add shaded frames, and act as a boundary image without using a screen design program, such as Photoshop software.

CSS3 fillet : Border-radius Properties--create rounded corners of border lines

Example:

The type of the value can be either a pixel or a percentage.

CSS3 box Shadow : Box-shadow Property--Create Shadow

Example:

A value of 3 indicates the distance to the left, the distance from the upper side, the shadow color

A value of 4 indicates the distance to the left, the top of the distance, the imaginary pixel, the shadow color

A value of 5 indicates the distance to the left, the upper side of the distance, the imaginary pixel, the shadow color, whether it is displayed internally and inverts the color

CSS3 boundary picture : Border-image Property--Allows you to use a picture as a border

Example:

Border-image properties are not compatible in browsers such as IE and QQ

CSS3 background:

background image size : Background-size Property--can specify the size of the background image

Example:

Two values, representing width, height, respectively. Available pixels and percentages.

background image positioning : Background-origin Properties--Specify whether the background is positioned according to the border or based on the text

Example:

Border-box: Positioning by border

Content-box: Positioning according to text

Multiple background images : Background-image Properties--You can specify a number of different image overlays to appear, preferably using vector graphics.

Example:

Use commas to separate the reference images.

CSS3 Text effects:

text Shadow : Text-shadow Property--You can apply a shadow effect to text

Example:

Four values: The left side of the distance, the upper side of the distance, the degree of blur, and the shadow color

text Wrap: Word-wrap Property--allows text to be forced to wrap text, which means that the word is split

Example:

Value: Break-word: Allows you to break the word to the next line.

CSS3 Conversion:

With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.

Transformations are an effect that changes the shape, size, and position of an element.

We can use 2D or 3D transformations to transform our elements.

The transform attribute--transformation, transformation

Built-in method: Rotate ()--rotation, parentheses internal write rotation angle, default clockwise rotation

Negative values are allowed and the elements are rotated counterclockwise

Example:

Built-in method: Translate ()-moves from the current position with X, y values in parentheses

Allow negative values to move in the opposite direction

Example:

Built-in Method: Scale ()--Changes the original size, in multiples of the width, height of the multiple

Example:

Built-in method: Skew ()--torsion in horizontal and vertical direction, horizontal twist angle in brackets, vertical twist angle

Example:

3D Conversion: Transform Properties--transformation, transformation

Built-in method: Rotatex ()--vertical rollover along the horizontal x-axis, and the degree of rotation in parentheses

Example:

Built-in method: Rotatey ()--horizontal rollover along the vertical y-axis, and the degree of rotation in parentheses

Example:

The difference between the 3D conversion and the conversion: 2D conversion is only the plane, the text can be seen and not in turn

The 3D conversion is equivalent to the specular effect, and the rollover is carried out before and after space (involving the z-axis).

Example:

CSS3 Transition: Transition Properties--specifically addressing changes in color, length, width, position, etc.

With CSS3, we can add transitions to a style when the current element is changed from one style to another without using flash and JavaScript.

We only used a transition attribute to write the time, in seconds, that the transition takes to transition from one style to another. If the duration is not specified, the default is 0, that is, there is no transition time.

When using this transition effect, we used a hyperlink-like L (link), V (visited), H (hover), a (active) style control.

This transition time can be defined as background changes, position changes, and the length of time it takes to change styles such as 2D transformations, 3D conversions, and location changes seen above.

Example:

Mainly use hover and active:

Hover: The style used when we point to the mouse

Active: The style used when the mouse clicks down

It is not only possible to automatically use the transition time when the mouse is pointing, but we can use JS to modify a part of the style.
Example:

Through the above comparison, it can be seen that the transition effect is more easily received, does not appear to be too abrupt style changes.

Of course, our style attribute transitions can separately handle width, height, color, 2D, 3D transformations to set the transition time. Students who like to write separately can refer to the tutorials in W3school.

CSS3 Animations:

With CSS3, we are able to create animations that can replace animated pictures, Flash animations, and JavaScript animations in many Web pages.

To create CSS3 animations, you need to follow the @keyframes rules.

@keyframes rules are used to create animations. When you specify a CSS style in @keyframes, you can create an animated effect that changes from the current style to the new style.

Note: IE requires 10 and above.

You will need to bind to a selector after you create the animation, otherwise you will not have any animation effects.

Use animation for animation bundling. Two values: The name of the animation, the length of time.

The length of time must be specified, otherwise the default is 0. This means that there is no animation effect.

Example:

Animation is the effect of gradually changing an element from one style to another.

You can change any number of styles and any number of times.

We generally use 0%~100% to specify the timing of the animation. Or use the keyword from...to ..., the effect is equivalent to 0%~100%.

0% is the beginning of the animation, and 100% is the completion of the animation.

To get the best browser support, we'll always use percentages to animate the rules

Example:

Only one style change has been made in the example above. Next we look at a number of changes.

Multiple changes only need to be written in curly braces after each percent sign.

Example:

In the example above, our animations can only be stopped once and immediately. We want this animated effect to execute continuously, just by adding a infinite value to the animation name and duration of our binding selector to execute indefinitely.

Note: infinite--Unlimited.

Example:

As we can see in the previous example, the div runs at a slow, middle, and end slow pace. This is the effect of the default ease property, and if you want to make all the same speed, we can write the linear after the binding selector.

Note: The ease--starts slowly by default and slows down slowly at the end.

linear--always runs at the same speed by default.

Example:

In all of the above infinite animation examples, we can see that the animation is being executed in the order we wrote it, could we set it to alternate execution? The answer is yes.

Write a alternate after the bundle selector's animated name, duration, and infinite number of times.

Note: alternate--alternate execution (can also be a positive and negative execution)

Example:

These are some of the CSS3 style attributes that we commonly use, and of course many others, such as the less commonly used to arrange text as multiple columns in a newspaper.

CSS3 Common Properties