CSS Learning Notes (11) New features of CSS3

In this article we will introduce some of the new features commonly used in CSS3

These include selectors, transitions, animations, elastic layouts, colors, shadows, reflections, gradients, fonts, transitions, and more

1, color

Before CSS3, colors could be expressed in one of three ways:

Keyword notation, for example black can be represented asblack, white can be expressed aswhite
In hexadecimal format, for example, black can be# 000000, white can be expressed as#FFFFFF
rgb()For example, black can be represented asRGB (0, 0), white can be expressed asRGB (255255255).

In CSS3, three new methods are added, respectively:

HSL () : H for hue (Hue), S for saturation (saturate), l for lightness (lightness)
- hue: The value ranges from 0 to 359. For example, in red, is0, green for120, blue for240
- saturate: percentage,100%Is the actual tone,0%For the grey
- lightness: percentage,50%Is the actual tone,0%As the black,100%Is white
Rgba () : R for red, G for green, B for blue, A for alpha
Hsla () : H for hue, S for saturate, L for lightness, and A for opacity (alpha)

2, shadow

We can add shadows to both block-level elements and text

(1) Block-level element shadow

We can use box-shadow to add shadows to block-level elements

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Copy the code

offset-x: Horizontal offset position, required
offset-y: Vertical offset position, required
blur-radius: Blur distance, optional, specify the degree of shadow blur
spread-radius: Shadow radius, optional, specifies the size of the shadow area
color: Shadow color, optional, black by default
inset: By default, the shadow is set to an external shadow. Using inset, you can set the shadow to an internal shadow

<! DOCTYPEhtml>
<html>
<head>
    <style>
        .moon {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: rgba(255.244.99.0.8);
            box-shadow: 5px 5px 5px 10px rgba(255.244.99.0.2);
        }
    </style>
</head>
<body>
    <div class="moon"></div>
</body>
</html>
Copy the code

(2) Text shadow

We can use the text-shadow attribute to add a shadow to the text

text-shadow: offset-x offset-y blur-radius color;
Copy the code

offset-x: Horizontal offset position, required
offset-y: Vertical offset position, required
blur-radius: Fuzzy distance, optional
color: Shadow color, optional, black by default

<! DOCTYPEhtml>
<html>
<head>
    <style>
        .shadow {
            font-size: xx-large;
            font-weight: bolder;
            color: black;
            background-color: white;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
    <div class="shadow">Hello world</div>
</body>
</html>
Copy the code

3, the gradient

There are two types of Gradient effects, Linear Gradient and Radial Gradient.

Linear Gradient: The gradient expands down, to the right, or diagonally
Radial gradient: The gradient starts in the center and spreads out

(1) Linear gradient

You can set the background-image property to Linear-gradient to add a linear gradient effect

background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code

Direction: Specifies the direction of the gradient. Optionally, some common values are listed below:
- to bottom: Gradient from top to bottom, default
- to rightThe gradient expands from left to right
- to bottom rightThe gradient expands from top left to bottom right
- <degree>: Angle between the horizontal line and the gradient line, calculated counterclockwise
color-stop1, color-stop2, … : Specifies the gradient color. Required

<! DOCTYPEhtml>
<html>
<head>
    <style>
        .rainbow {
            width: 800px;
            height: 100px;
            background-color: white; /* Linear-gradient does not apply */
            background-image: linear-gradient(to right, #FF0000.#FF7F00.#FFFF00.#00FF00.#00FFFF.#0000FF.#8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>
Copy the code

(2) Radial gradient

A linear gradient effect can be added by setting the background-image property to a radial-gradient value

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...) ;Copy the code

Shape: Specifies the shape. The value can be:
- ellipse: ellipse, default value
- circleRound:
Size: indicates where the gradient stops. Optional values are as follows:
- farthest-corner: Furthest Angle, default value
- closest-corner: recent Angle
- farthest-side: the farthest edge
- closest-side: recent side
Position: Indicates the position of the center point. This value is determined by two percentiles, representing the horizontal and vertical positions of the center point. The default value is 50%, 50%
color-stop1, color-stop2, … : Specifies the gradient color. Required

<! DOCTYPEhtml>
<html>
<head>
    <style>
        .rainbow {
            width: 500px;
            height: 500px;
            background-color: white; /* when the radial-gradient does not take effect */ is used
            background-image: radial-gradient(circle farthest-corner at 0% 100%.#FF0000.#FF7F00.#FFFF00.#00FF00.#00FFFF.#0000FF.#8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>
Copy the code

4, reflection

With the -webkit-box-reflect property we can achieve a mirror effect

- its - box - reflect:direction offset mask-box-image
Copy the code

Direction: reflection direction. The value can be:
- above: Reflection appears above the original object
- below: Reflection appears underneath the original object
- leftThe reflection appears to the left of the original object
- rightThe reflection appears to the right of the original object
Offset: The distance between the reflection and the original object
Mask: mask effect, image or gradient

<! doctypehtml>
<html>
<head>
    <style>
        .reflect {
            font-size: xx-large;
            font-weight: bolder;
            -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(255.255.255.0.2));
        }
    </style>
</head>
<body>
    <div class="reflect">Hello world</div>
</body>
</html>
Copy the code

5, fonts,

The @font-face rule is used to load fonts. It even lets us use font files on the server side, as an example:

@font-face
{
    /* font-family specifies the font name */
    font-family: myFont;
    /* the SRC attribute specifies the resource location */
    src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}
Copy the code

It can then be used directly in a file, as shown in the following example:

.use-my-font {
    font-family: myFont; /* Custom font name */
}
Copy the code

6, conversion,

Using the Transform property, we can transform elements, including translation, rotation, scaling, and skew

Translation, the parameters x, y, and z define the travel distance along the x, y, and z axes respectively

TranslateX (x,y,z), translateX(x), translateY(y), translateZ(z)
The parameters x, y, and z define the rotation vector along the x, y, and z axes respectively. Angle defines the rotation Angle clockwise

Rotate (Angle), rotate3D (x,y,z, Angle), rotateX(Angle), rotateY(Angle), rotateZ(Angle)
The parameters x, y, and z define the scaling factor along the x, y, and z axes, respectively

Scale (x,y), Scale3D (x,y,z), scaleX(x), scaleY(y), scaleZ(z)
Angle: the x-angle and y-angle parameters define the Angle between the Angle and the x and y axes respectively. This operation causes the shape to change

Skew (x-angle,y-angle), skewX(x-angle), skewY(y-angle)

<! doctypehtml>
<html>
<head>
    <style>
        .frame {
            width: 900px;
            height: 900px;
            min-width: 900px;
            min-height: 900px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .photo {
            margin: 0;
            padding: 0;
            width: 300px;
            height: 300px;
            float: left;
            overflow: hidden;
        }
        .photo:hover {
            cursor: pointer;
            transition: transform 0.4 s;
            transform: scale(1.2.1.2);
        }
    </style>
</head>
<body>
    <div class="frame">
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
        <div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
    </div>
</body>
</html>
Copy the code

CSS Learning Notes (11) New features of CSS3

1, color

2, shadow

3, the gradient

4, reflection

5, fonts,

6, conversion,

Related Posts

The first year of 2021!

How does the Internet work?

The principle of Sentry and the usage of custom report