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

Sample code for implementing dynamic glowing special effects animation of circles using pure CSS3

This article mainly introduces the sample code of...

How to install MySQL database on Ubuntu

Ubuntu is a free and open source desktop PC opera...

MySQL Quick Data Comparison Techniques

In MySQL operation and maintenance, a R&D col...

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Related reading: MySQL8.0.20 installation tutoria...

Automatically install the Linux system based on cobbler

1. Install components yum install epel-rpm-macros...

How to use Navicat to export and import mysql database

MySql is a data source we use frequently. It is v...

element-ui Mark the coordinate points after uploading the picture

What is element-ui element-ui is a desktop compon...

How to set up Referer in Nginx to prevent image theft

If the server's images are hotlinked by other...

Detailed steps for adding hosts you need to monitor in zabbix

Add monitoring host Host 192.168.179.104 is added...

How to use regular expression query in MySql

Regular expressions are often used to search and ...

Two ways to build Docker images

Table of contents Update the image from an existi...

CSS3 sets a mask for the background image and solves the problem of mask style inheritance

In many cases, you need to process the background...

CSS achieves footer "bottom absorption" effect

We often encounter this problem: how to use CSS t...

Steps for Docker to build its own local image repository

1. Environment and preparation 1. Ubuntu 14.04 2....

Encapsulate the navigation bar component with Vue

Preface: Fully encapsulating a functional module ...