"CSS3 Practical Combat" Notes--Gradient Design (1)_Experience Exchange

compared with image gradients, the biggest advantage of css-based gradients is that they are easy to modify and support stepless scaling, making the transition more natural. currently, only browsers based on webkit and gecko engines can implement css gradients. the opera browser based on the presto engine does not support gradients for the time being. although ie based on trident can achieve it through filters, it is not recommended.

css gradient design for webkit engine (safari 4 and above)

basic syntax:

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

parameter description:

<type></type>: define the gradient type, including linear gradient (linear) and radial gradient (radial).

<point></point>: define the coordinates of the starting point and end point of the gradient, that is, the x-axis and y-axis coordinates where the gradient starts to be applied, and the coordinates where the gradient ends. this parameter supports numerical values, percentages and keywords, such as (0, 0) or (left, top), etc. keywords include top, bottom, left and right.

<radius></radius>: when defining a radial gradient, it is used to set the length of the radial gradient. this parameter is a numerical value.

<stop></stop>: define gradient color and step size. it includes three types of values, namely the starting color, defined using the from (color value) function; the ending color, defined using the to (color value) function: the color step, defined using color-stop (value, color value). color-stop() contains two parameter values. the first parameter value is a numerical value or percentage value, the value range is 0~1.0 (or 0%~100%), and the second parameter value represents any color value.

basic usage of linear gradient:

<strong><code class=" hljs lasso">/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</code>

demo effect:

<strong><code class=" hljs lasso">/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</code>

demo effect:

<strong><code class=" hljs lasso">/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</code>

demo effect:

<strong><code class=" hljs lasso">/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</code>

demo effect:

summary: the color-stop() function contains two parameter values. the first parameter value specifies the corner mark position, and the second parameter specifies the color mark color. a gradient can contain multiple color stops. the position value is a decimal between 0 and 1, or a percentage between 0 and 100%, specifying the position proportion of the color stop.

basic usage of radial gradient

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/</code></strong><code class=" hljs lasso">
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</code>

effect display:

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</code>

demo effect:

<strong><code class=" hljs lasso">/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*</code></strong><code class=" hljs lasso">/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</code>

demonstration effect:

<strong><code class=" hljs lasso">/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</code>

demo effect:

<strong><code class=" hljs lasso">/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</code>

demo effect:

<strong><code class=" hljs lasso">/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</code>

demo effect:

<strong><code class=" hljs lasso">/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00c), to(rgba(1,159,98,0)), color-stop(98%, #0cf));</code>

demo effect:

<strong><code class=" hljs lasso">/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
</code></strong><code class=" hljs lasso">background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#a7d30c), to(rgba(1,159,98,0)), color-stop(90%, #019f62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;</code>

demo effect:

gradient applicationdefine the border of the gradient effect

code:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
 border-width: 20px;
 width: 400px;
 height: 200px;
 margin: 20px;
 -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

demo effect:

define fill content effects

code:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
 width:400px;
 height:200px;
 border:10px solid #a7d30c;
 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
 float:left;
}
.div1::before {
 width:400px;
 height:200px;
 border:10px solid #019f62;
 content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#a7d30c), to(rgba(1, 159, 98, 0)), color-stop(90%, #019f62));
 display: block;
}
</style>
</head>

<body>
<div class="div1">透视框</div>
</body>
</html>

display effect:

define list icon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
 list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>

<body>
<ul>
 <li>新闻列表项1</li>
 <li>新闻列表项2</li>
 <li>新闻列表项3</li>
 <li>新闻列表项4</li> 
</ul>
</body>
</html>

demo effect: