그라디언트(gradient)
배경 색상이나 글자에 그라데이션을 넣을 수 있다.
배경에 적용할 경우 background-image속성을 이용하며 글자에 적용할 경우 color에 적용한다.
1. Linear-gradient(각도 to 방향, 생상중단점1 시작위치%, 색상중담점2, 시작위치%,......)
[방향 종류]
- to top : 아래에서 부터 위로 그라데이션을 적용함.
- to left : 오른쪽에서 시작해서 왼쪽으로 적용함.
- to right : 외쪽에서 시작해서 오른쪽으로 적용함.
- to buttom : 위에서 부터 아래로 그라데이션을 적용함.
2. radial-gradient(최종모양 크기 at 위치, 색상중담점1, 시작위치%, 색상중단점2 시작위치%,......)
[최종모양]
- ellipse : 타원
- circle : 정원
[크기]
- closet-side : 정원의 경우 그라디언트 가장 자리가 그라디언트 중심에서 가장 가까운 요소의
모서리와 만나고, 타원의 경우 그라디언트 중심에서 가장 가까운 요소의 수평축이나 수직축이랑 만남.
<!-- css -->
<style>
div{
width: 100%;
height: 200px;
background-image: linear-gradient( to top, #a8edea 0%, #fed6e3 100%);
/*
그라디언트는 배경으로 적용할 때 background-image속성을 사용한다.
line-gradient : 선형 그라디언트
90deg : 그라디언트 각도
#색상 % : 색상중단점, 해당 생상이 시작되는 위치를 %로 표현
색상을 여려 개를 넣고 싶다면 ','로 구분함.
*/
/*
background-image:
linear-gradient(
to top,
#a8edea 0%,
#fed6e3 100%); */
}
.round{
margin-top: 50px;
width: 500px;
height: 300px;
background-image: radial-gradient( circle, #a8edea 0%, #fed6e3 100%);
background-image: radial-gradient( ellipse, #a8edea 0%, lightgoldenrodyellow 10%, #fed6e3 100%);
}
</style>
</head>
<body>
<div></div>
<div class="round"></div>
</body>
웹디자인 스케치