'CSS3 실전 전투' 노트 - 그라데이션 디자인(1)

집

웹 프론트엔드

CSS 튜토리얼

'CSS3 실전 전투' 노트 - 그라데이션 디자인(1)_경험 교류

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:03 PM

css

이미지 그라디언트에 비해 CSS 기반 그라디언트의 가장 큰 장점은 수정이 쉽고 무단계 스케일링을 지원하여 전환이 더 자연스럽다는 것입니다. 현재 Webkit 및 Gecko 엔진 기반 브라우저에서만 CSS 그래디언트를 구현할 수 있으며, Presto 엔진 기반 Opera 브라우저는 당분간 Trident 기반 IE에서는 필터를 통해 그래디언트를 지원하지 않지만 권장되지 않습니다.

Webkit 엔진용 CSS 그래디언트 디자인(Safari 4 이상)

기본 구문:

-webkit-gradient(<type>,<point>[,<radius>]&#63;,<point>[,<radius>]&#63;[,<stop>]*)

매개변수 설명:

<type></type>: 선형 그래디언트(선형) 및 방사형 그래디언트(방사형)를 포함한 그래디언트 유형을 정의합니다.

<point></point> : 그라디언트 시작점과 끝점의 좌표, 즉 그라디언트가 적용되기 시작하는 x축, y축 좌표와 그라디언트가 끝나는 좌표를 정의합니다. 이 매개변수는 (0, 0) 또는 (왼쪽, 위쪽) 등과 같은 숫자 값, 백분율 및 키워드를 지원합니다. 키워드에는 위쪽, 아래쪽, 왼쪽 및 오른쪽이 포함됩니다.

<radius></radius>: 방사형 그래디언트를 정의할 때 방사형 그래디언트의 길이를 설정하는 데 사용됩니다. 이 매개변수는 숫자 값입니다.

<stop></stop>: 그라데이션 색상과 단계 크기를 정의합니다. 여기에는 세 가지 유형의 값이 포함됩니다. 즉, from(색상 값) 함수를 사용하여 정의된 시작 색상, to(색상 값) 함수를 사용하여 정의된 끝 색상, 색상 단계, color-stop(값, 색상 값)을 사용하여 정의됩니다. ). color-stop()에는 두 개의 매개변수 값이 포함됩니다. 첫 번째 매개변수 값은 숫자 값 또는 백분율 값이고 값 범위는 0~1.0(또는 0%~100%)이며 두 번째 매개변수 값은 색상 값을 나타냅니다.

선형 그래디언트의 기본 사용법:

/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

요약: color-stop() 함수에는 두 개의 매개변수 값이 포함되어 있습니다. 첫 번째 매개변수 값은 모서리 표시 위치를 지정하고 두 번째 매개변수는 색상 표시 색상을 지정합니다. 그라데이션에는 여러 색상 정지점이 포함될 수 있습니다. 위치 값은 0과 1 사이의 소수 또는 0과 100% 사이의 백분율로 색상 정지점의 위치 비율을 지정합니다.

방사형 그래디언트의 기본 사용법

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

효과 표시:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

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

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
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;

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

그라디언트 적용그라디언트 효과의 테두리 정의

코드:

<!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>

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

내용 채우기 효과 정의

코드:

<!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>

디스플레이 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류

목록 아이콘 정의

<!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>

데모 효과:
CSS3 실전 전투 노트 - 그라데이션 디자인(1)_경험 교류