Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "what are CSS gradients, shadows and filters". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First acquaintance of CSS gradient

The CSS gradient is a special type of image type represented by gradient and consists of a gradual transition between two or more colors.

Three types of gradients:

Linear: created by the linear-gradient () function

Radial: created by the radial-gradient () function

Cones: created by conic-gradient () function

Ps: you can also create repeating gradients using the repeating-linear-gradient () and repeating-radial-gradient () functions.

Gradients can be used anywhere you use image, such as in the background.

II. CSS Linear gradient 2.1.Introducing Linear gradient

Description

To create a linear gradient, you only need to specify two colors, which are called color stops, specify at least two color stops, and you can set the start point and direction (or angle) as well as the gradient effect.

Grammar

Background-image: linear-gradient (direction), color1 (color value), color2 (color value),...); 2.2 Linear gradient applies 2.2.1 linear gradient-from top to bottom (default)

Code example

.box {width: 300px; height: 100px; background-image: linear-gradient (red, yellow);}

The effect is as follows

2.2.2 Linear gradient-from left to right

Code example

Background-image: linear-gradient (to right, red, yellow)

The effect is as follows

2.2.3 Linear gradient-diagonal

Code example

Background-image: linear-gradient (to bottom right, red, yellow)

The effect is as follows

2.2.4 Linear gradient-set Angl

Description

If you want to control the direction of the gradient more accurately, you can set a specific angle for the gradient.

When using angles, 0deg represents a gradient from bottom to top, 90deg represents a gradient from left to right, and such positive angles are clockwise. And a negative angle means counterclockwise.

Code example

Background-image: linear-gradient (180deg, red, yellow)

The effect is as follows

2.2.5 Linear gradient-use multiple color stops

Code example

Background-image: linear-gradient (red, yellow, green)

The effect is as follows

2.2.6 Linear gradient-repetitive linear gradient

Description

The repeating-linear-gradient () function is used for repeated linear gradients.

Code example

Background-image: repeating-linear-gradient (red, yellow 10px)

The effect is as follows

3. CSS Radial gradient 3.1 introduction to Radial gradient

Description

The radial gradient is similar to the linear gradient, except that the radial gradient radiates outward from the central point.

You can specify the location of the center point, and you can make them circular or oval.

Grammar

Background-image: radial-gradient (shape (set shape, default is oval), size (farthest angle), position (center), color1 (color value), color2 (color value); 3.2Radial gradient applies 3.2.1 radial gradient-evenly spaced color stop (default)

Code example

.box {width: 300px; height: 100px; background-image: radial-gradient (red, yellow, green);}

The effect is as follows

3.2.2 Radial gradient-color codes with different spacing

Code example

Background-image: radial-gradient (red 10%, yellow 20%, green 50%)

The effect is as follows

3.2.3 Radial gradient-set Shap

Code example

/ * set to circular shape * / background-image: radial-gradient (circle, red 10%, yellow 20%, green 50%)

The effect is as follows

3.2.4 Radial gradient-sets the center of the gradient

Description

You can use keywords, percentages or absolute length, length, and percentage values to repeat to locate the center of the gradient (if there is only one), otherwise in order from left to right.

Code example

Background-image: radial-gradient (at 10% 30%, red 10%, yellow 20%, green 50%)

The effect is as follows

3.2.5 Radial gradient-repeat Radial gradient

Code example

Background-image: repeating-radial-gradient (black, black 5px, # fff 5px, # fff 10px)

The effect is as follows

4. CSS Cone gradient 4.1 introduction to Cone gradient

Description

A cone gradient is similar to a radial gradient, both of which are circular and use the center of the element as the source point of the color scale.

It is a gradient that rotates in a fan-shaped direction around the center point.

Grammar

Background-image: conic-gradient (from angle (indicates the starting angle, defaults from top to bottom) at position (sets the position of the center point of the cone), start-color (defines the start color), stop-color (defines the end color) 4.2 Application of the cone gradient 4.2.1 Cone gradient-clockwise rotation (default)

Code example

.box {width: 300px; height: 300px; background-image: conic-gradient (red,yellow);}

The effect is as follows

4.2.2 Cone gradient-sets the center point of the gradient

Code example

Background-image: conic-gradient (at 30% 20%, red,yellow)

The effect is as follows

4.2.3 Cone gradient-use multiple color stops

Code example

Background-image: conic-gradient (red, orange, yellow, green, teal, blue, purple)

The effect is as follows

4.2.4 Cone gradient-repeated Cone gradient

Code example

Background-image: repeating-conic-gradient (red 10%, yellow 20%)

The effect is as follows

Fifth, CSS gradient supplementary knowledge 5.1 to create solid lines

Description

To create a single hard line between different colors, that is, different colors are not different, you can set different positions to the same color.

Code example

Background: linear-gradient (to bottom left, red 50%, yellow 50%)

The effect is as follows

5.2 use transparency

Description

To add transparency, we use the rgba () function to define the color stop. The last argument in the rgba () function can be a value from 0 to 1, which defines the transparency of the color: 0 for full transparency and 1 for full color (no transparency).

You can also use the transparent parameter, which represents full transparency.

Code example

Background-image: linear-gradient (to right, transparent, red)

The effect is as follows

CSS Shadow 1. First acquaintance of CSS Shadow

The main function of CSS shadow is to make the text and elements in the page have a three-dimensional effect, which is highlighted.

Two shadow attributes:

Box-shadow: used to add shadows to elements

Text-shadow: used to shadow text

Ps: there is also a function of the filter filter drop-shadow () that can also add shadows, which is mainly used to add shadows to the non-transparent parts of a transparent image.

II. Box-shadow attribute 2.1.Introducing box-shadow attribute

Description

Lets you add shadow effects to the frame of an element, and you can set multiple shadow effects on the same element, separated by commas.

Grammar

Box-shadow: OffsetX (horizontal offset), OffsetY (vertical offset), Blur (blur radius), Spread (extended distance, shadow size), Color (shadow color), Position (shadow position, default is external (outset)); 2.2.1The application of box-shadow attribute 2.2.1 box-shadow attribute-basic use

Code example

.box {width: 300px; height: 300px; background-color: yellow; box-shadow: 10px 10px;}

The effect is as follows

2.2.2 box-shadow Properties-multiple Shadows and directional Shadows

Code example

Box-shadow:-5px 0 5px 0px # 000,0-5px 5px 0px # 000

The effect is as follows

2.2.3 box-shadow Properties-Analog Border

Code example

Box-shadow: 0px 0px 0px 10px # 000, 0px 0px 0px 20px red

The effect is as follows

2.2.4 box-shadow attribute-Inner Shadow

Code example

Box-shadow: 0px 0px 30px 10px red inset

The effect is as follows

3. Text-shadow attribute 3.1 introduces text-shadow attribute

Description

Add shadows to the text, or you can add multiple shadows, separated by commas.

Grammar

Text-shadow: OffsetX (horizontal offset), OffsetY (vertical offset), Blur (blur radius), Color (shadow color))

Be careful

Text-shadow has no extended distance property value, shadow position property value.

3.2Application of text-shadow attribute 3.2.1 text-shadow attribute-basic use

Code example

.box {width: 300px; height: 300px; background-color: yellow; text-shadow: 0px 0px 5px red;} hello world

The effect is as follows

The text-shadow attribute is basically the same as the box-shadow attribute, so there are no more examples.

CSS filter I. first acquaintance of CSS filter

I believe we are all familiar with the word filter. Students who love selfies and take pictures will certainly open the filter to modify the picture, so the CSS filter is the same, directly using the filter attribute to modify the image.

2. CSS filter method

Blur (): blur

Can be any unit of length, the value is 0 to display the original image, the larger the value, the more blurred

Brightness (): brightness

Percentage, can be replaced by 0: 1, a value of 0 shows all black, a value of 100% shows the original image

Contrast (): contrast

Percentage, can be replaced by 0: 1, a value of 0 shows all black, a value of 100% shows the original image

Drop-shadow (): shadow

/ * Code example * / .box1 {width: 300px; height: 300px; border: 3px solid red; box-shadow: 5px 5px 10px 0 black;} .box2 {width: 300px; height: 300px; border: 3px solid red; filter: drop-shadow (5px 5px 10px black);}

Similar to the box-shadow property

No inner shadow effect

Cannot be superimposed by shadow

Description

Code example

Grayscale (): Gray level

Percentage, can be replaced by 0: 1, a value of 0 shows the original image, and a value of 100% shows full gray

Hue-rotate (): hue rotation

Angle, a value of 0 shows the original image, and a value of 0~360deg weakens the color of the original image

Invert (): invert

Percentage, can be replaced by 0: 1, the value is 0 to display the original image, and the value is 100% to completely reverse the color of the original image

Opacity (): transparency

Percentage, can be replaced by 0: 1, a value of 0 shows transparency, a value of 100% shows the original image

Saturate (): saturation

Percentage, can be replaced by 0: 1, the value is 0 completely unsaturated, and the value is 100% to show the original image

Sepia (): Brown

Percentage, can be replaced by 0: 1, 0 to show the original image, 100% to show brown

3. Application of CSS filter 3.1 CSS filter-set the picture to gray

Code example

.box {filter: grayscale (1);}

The effect is as follows

That's all for "what are CSS gradients, shadows and filters?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.