Gradient
2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.
gradient는 두 가지 종류가 있다.
Linear Gradient: goes down/up/left/right/diagonallyRadial Gradient: defined by their center
gradient는 CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저의 vendo prefix를 사용해야 하고, 브라우저에 따라 조금씩 문법이 상이하여 다루기가 수월하지 않다.
따라서 gradient를 직접 작성하는 것보다 작성 툴을 이용하는 것이 보편적이다.
Ultimate CSS Gradient Generator
아래는 gradient를 사용하는 예시이다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.dawn {
/* Old browsers */
background: #b3cae5;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(12%, #b3cae5), color-stop(46%, #dbdde4), color-stop(70%, #e4e3e4), color-stop(94%, #f7ddbb), color-stop(100%, #efcab2));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
/* W3C */
background: linear-gradient(135deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
}
</style>
</head>
<body>
<div class="dawn"></div>
</body>
</html>
참고문헌
더깊이