Detailed explanation of the code for implementing linear gradients with CSS3

Detailed explanation of the code for implementing linear gradients with CSS3

Preface

The gradient of the old version of the browser is implemented in the demonstration [IE9-];
Before IE9, gradients were all implemented through filters, and the general way of writing was like this;

.testDiv {
		width:400px;
		height:400px;
		border:1px solid #f00;
		/*
		How to write IE filters;
		gradientType : 1 represents horizontal direction, 0 represents vertical linear gradient;
		startColorstr is the starting color, endColorstr is the ending color;
		Colors support hexadecimal notation or English words. Of course, transparency is also supported [hexadecimal]

		#AAFF0000 [AA is transparency (00 is completely transparent, FF is completely opaque)], the last six digits are the standard hexadecimal color writing;
		 */
		
		/*IE6~7*/

	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    /*IE8*/
	    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    

	}

The effect is as follows: horizontal gradient and lighter color, transparent is set

Write the picture description here

This article mainly introduces the native implementation of gradient effects under CSS3!!! [Mainstream browsers and mobile browsers can be used arbitrarily]

CSS3 linear gradient compatibility

Write the picture description here

Standard syntax (contains two parameters, the first parameter can be an angle or English direction , the second is the gradient start, multiple color values ​​are allowed!)

gradient : ([direction or angle], starting value color)
The writing of firefox/chrome/ms/opera has been standardized, and the previous versions need to be prefixed
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [The four prefixes correspond to four parsing engines. I wrote them like that just to represent the browsers in the past. For example, Opera now uses Google's Blink engine.]

### Gradient angle (deg is the abbreviation of degree, which means angle)

From bottom to top: to top = 0deg || 360deg
Top to bottom: top bottom = 180deg || -180deg
From left to right: top left = -90deg || 270deg
From right to left: to right = 90deg || -270deg
From bottom right to top left: to top left = 315deg || -45deg
From bottom left to top right: to top right = -315deg || 45deg
From top right to bottom left: to bottom left = 225deg || -135deg
From top left to bottom right: to bootom right = 135deg || -225deg
Tips: It is recommended to use angles for standardization. Some Safari in English orientation may have different parsing than other browsers.

Rendering

Write the picture description here

Write the picture description here

Write the picture description here

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
    div {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
        line-height: 200px;
        float: left;
        margin: 10px;
    }
    /*
			My class names here are abbreviations:
			u :up,
			d: down,
			l:left,
			r:right,
			b:bottom,
			2: to;
			Positive angles are clockwise, negative ones are counterclockwise; the angle represents when it reaches a certain angle and starts to spread to other ranges;
			I was also confused when I first started, but I learned it after writing more.
			As of the time I wrote this article, the gradient standard specifications are more complete, and many of them do not require prefixes;
			In order to take into account the mobile terminal, webkit cannot be discarded */
    
    .u2d {
        background: -webkit-linear-gradient(180deg, #590BCC, #18CC6C);
        background: linear-gradient(180deg, #590BCC, #18CC6C);
    }
    
    .d2u {
        background: -webkit-linear-gradient(0deg, #590BCC, #18CC6C);
        background: linear-gradient(0deg, #590BCC, #18CC6C);
    }
    
    .l2r {
        background: -webkit-linear-gradient(90deg, #590BCC, #18CC6C);
        background: linear-gradient(90deg, #590BCC, #18CC6C);
    }
    
    .r2l {
        background: -webkit-linear-gradient(-90deg, #590BCC, #18CC6C);
        background: linear-gradient(-90deg, #590BCC, #18CC6C);
    }
    
    .rb2lu {
        background: -webkit-linear-gradient(-45deg, #590BCC, #18CC6C);
        background: linear-gradient(-45deg, #590BCC, #18CC6C);
    }
    
    .lb2ru {
        background: -webkit-linear-gradient(45deg, #590BCC, #18CC6C);
        background: linear-gradient(45deg, #590BCC, #18CC6C);
    }
    
    .ru2lb {
        background: -webkit-linear-gradient(-135deg, #590BCC, #18CC6C);
        background: linear-gradient(-135deg, #590BCC, #18CC6C);
    }
    
    .lu2rd {
        background: -webkit-linear-gradient(135deg, #590BCC, #18CC6C);
        background: linear-gradient(135deg, #590BCC, #18CC6C);
    }
    
    .mclg1 {
        background: -webkit-linear-gradient(135deg, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
        background: linear-gradient(135deg, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
    }
    
    .mclg2 {
        background: -webkit-linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
        background: linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
    }
    
    .mclg3 {
        background: webkit-linear-gradient(135deg, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
        background: linear-gradient(135deg, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
    }
    
    .mclg4 {
        background: -webkit-linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
        background: linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
    }
    </style>
</head>

<body>
    <div class="u2d">Top-down</div>
    <div class="d2u">Bottom-up</div>
    <div class="l2r">From left to right</div>
    <div class="r2l">From right to left</div>
    <div class="rb2lu">Lower right corner to upper left corner</div>
    <div class="lb2ru">Lower left to upper right</div>
    <div class="ru2lb">Upper right corner to lower left corner</div>
    <div class="lu2rd">Upper left corner to lower right corner</div>
    <div class="mclg1">Four color gradients</div>
    <div class="mclg2">Five color gradients</div>
    <div class="mclg3">Six color gradients</div>
    <div class="mclg4">Color with transparent gradient</div>
</body>

</html>

Summarize

With the emergence of CSS3, linear gradients no longer need to rely solely on PS to be realized... front-end partners can also create all kinds of cool gradient effects by themselves!!! Hahahahaha~~~

This is the end of this article about the detailed example code of how to implement linear gradient in CSS3. For more relevant CSS3 linear gradient content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Introduction to JavaScript built-in objects

>>:  Use DIV mask to solve the problem that directly checking the checkbox with the mouse is invalid

Recommend

Vue implements the function of calling the mobile phone camera and album

This article shares the specific code of Vue to a...

CocosCreator implements skill cooling effect

CocosCreator realizes skill CD effect There are s...

MYSQL implements sample code to prevent duplicate addition when adding shopping cart

Preface Recently, due to work reasons, I was work...

Detailed explanation of the definition and function of delimiter in MySQL

When you first learn MySQL, you may not understan...

JS implements random generation of verification code

This article example shares the specific code of ...

Graphical explanation of the underlying principle of JavaScript scope chain

Table of contents Preface Scope 1. What is scope?...

WHMCS V7.4.2 Graphical Installation Tutorial

1. Introduction WHMCS provides an all-in-one solu...

What are the file attributes of crw, brw, lrw, etc. in Linux?

What is a file? All files are actually a string o...

MySQL Optimization: InnoDB Optimization

Study plans are easily interrupted and difficult ...

Solution for Nginx installation without generating sbin directory

Error description: 1. After installing Nginx (1.1...

Markup Language - Anchor

Previous: Markup Language - Phrase Elements Origin...

Sample code for implementing mobile expansion and collapse effects with pure CSS3

This article introduces the sample code for imple...

How to add shortcut commands in Xshell

As a useful terminal emulator, Xshell is often us...

How to set up a deployment project under Linux system

1. Modify the firewall settings and open the corr...

Detailed explanation of vuex persistence in practical application of vue

Table of contents vuex persistence Summarize vuex...