current position:Home>Fancy front gradient

Fancy front gradient

2022-05-15 03:06:56Lu Rongtao

Gaudy gradients

css Background gradient can be carried out in , Generally speaking , We use the following two gradients

  • Linear gradient
  • Radial Gradient

Linear gradient

Let's look at the grammar first :

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

Explain it. :

  • The angle value specifies the direction of the gradient ( Or the angle ).

  • The starting point of the gradient line . It contains to And two keywords : The first indicates the horizontal position left or right, The second indicates the vertical position top or bottom. The order of keywords has no effect , And are optional .

  • By a <color> The value of , And followed by an optional end position ( It can be a percentage value or along the gradient axis <length>

So we have the following effect :

image-20211219010636510

​ This is a linear gradient from gold to pink from left to right

background-image: linear-gradient(to right, gold, pink)

Radial Gradient

Let's look at the grammar first :

radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse || [ <length> | <percentage> ]{
    2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

Or we can simplify it to the following :

radial-gradient(shape size position, color-stop[...,color-stop]);

Explain it. :

  • The center position of the radial gradient
  • Gradual shapes . circular ( The shape of the gradient is a regular circle with constant radius ) Or oval ( Axisymmetric ellipse ). The default is ellipse
  • The size of the gradient
  • Consists of a value , And followed by an optional end position ( It can be a percentage value or along the gradient axis

So we have the following effect :

image-20211219010733308

​ This is a radial gradient from red to black

background-image: radial-gradient(red,black)

Gradual fancy play

Of course, the gradient above is a very simple way to play , Now let's have a whole point of difficult ~

  • Color mutation

The gradient we are currently doing is a uniform gradient , If multiple colors have the same position , Then these colors will transition in an infinitesimal transition area , Visually , The color will change suddenly in this position , Instead of a smooth transition effect .

Just like this.

image-20211219191208247
 background-image: linear-gradient(to right,gold 50%, pink 50%, pink);
  • Multiple attributes of the background match

Gradients can be processed as background images , Since it's a background picture , Then you can stack and lay , So we got the following effect :

image-20211219190843925

This is the effect of two gradient overlays combined with the tiling of the background image

background-image:
				linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%), 
				linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% );
background-size: 50px 50px;

We can also use repeated linear gradients to overlay :

image-20211219233433396
background-image:
                repeating-linear-gradient(-45deg,
                    transparent,
                    transparent 25%,
                    tomato 0,
                    tomato 50%),
                repeating-linear-gradient(45deg,
                    transparent,
                    transparent 25%,
                    dodgerblue 0,
                    dodgerblue 50%), wheat;

background-size: 50px 50px;

Plus 100 million details ~ (background-blend-mode: multiply; Positive overlay effect )

That's it !Ta Da!

image-20211219233607300
  • Gradient text !

-webkit-background-clip:text This property can clip the background color into the text , Then let's do this first, then do this, and finally get a great gradient text !

image-20211219234816775
 color: transparent;
 background:
            repeating-linear-gradient(-45deg,
            transparent,
            transparent 25%,
            tomato 0,
            tomato 50%),
            repeating-linear-gradient(45deg,
            transparent,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%), wheat;
background-size: 50px 50px;
background-blend-mode: multiply;
-webkit-background-clip: text;
  • Gradient border

utilize border-image-source Property to place the gradient in the border , like this :

image-20211219235744687
border: 20px solid;
border-image-source: 
					repeating-linear-gradient(-45deg, 
						cyan 0, 
						cyan 15px,
						transparent 15px,
                        transparent 30px,
                        tomato 30px,
                        tomato 45px,
                        transparent 45px,
                        transparent 60px);

border-image-slice: 20;

* Get Qianfeng education learning video materials + Source notes , Enter the learning exchange group
Please add wechat below ( remarks CSDN recommend )

 Please add a picture description

copyright notice
author[Lu Rongtao],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205112355553505.html

Random recommended