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

HTML+VUE paging to achieve cool IoT large screen function

Effect demo.html <html> <head> <me...

Tutorial on using hyperlink tags in XHTML

Hyperlink, also called "link". Hyperlin...

Detailed steps for Linux firewall configuration (based on yum warehouse configuration)

Preface This experiment prepares two virtual mach...

Detailed tutorial on how to deploy Springboot project using Nginx on the server (jar package)

1. Package the Java project into a jar package He...

Docker - Summary of 3 ways to modify container mount directories

Method 1: Modify the configuration file (need to ...

Detailed explanation of the use of React.cloneElement

Table of contents The role of cloneElement Usage ...

Vue implements a simple shopping cart example

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

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

Analyzing the practical record of using docker to build microservices with SpringBoot

What is it? Spring Boot is a sub-project of the S...

How to use regular expressions to automatically match wildcard domain names in nginx

Nginx uses regular expressions to automatically m...

innodb_flush_method value method (example explanation)

Several typical values ​​of innodb_flush_method f...

How to create your own Docker image and upload it to Dockerhub

1. First register your own dockerhub account, reg...

Detailed explanation of Nginx configuration required for front-end

Nginx (engine x) is a lightweight, high-performan...

How to customize at and cron scheduled tasks in Linux

There are two types of scheduled tasks in Linux s...

How to automatically deploy Linux system using PXE

Table of contents Background Configuring DHCP Edi...