그레디언트
그레디언트
기본 문법
첫 시작(0%)과 끝(100%)의 퍼센트는 입력하지 않아도 적용 가능
body {
background: linear-gradient( 각도(또는 방향), 시작 색상, 끝 색상 );
/* 또는 */
background: linear-gradient( 각도(또는 방향), 시작 색상, 중간 색상, 끝 색상 );
/* 퍼센트 추가 */
background: linear-gradient( 각도(또는 방향), 시작 색상 30&, 중간 색상 60%, 끝 색상 );
}
선형 그레디언트
body {
background: linear-gradient(90deg, #0e0f12, #f7e763);
/*
90deg : to right
180deg : to bottom (시작색상 → 끝 색상)
0deg : to top (끝 색상 → 시작색상)
45deg : to top right
-45deg : to top left
*/
/* [색상을 선명하게 구문지어 주고 싶다면] */
background: linear-gradient(
45deg,
#ff3400 40%,
#45d5bf 40%,
#45d5bf 60%,
#3a2c76 60%,
#3a2c76
);
}
원형 그레디언트
원 모양의 값 (화면 폭에 따라 원의 모양, 크기가 달라짐)
circle
정원형ellipse
기본값(생략 가능)
farthest-side
기본값closest-side
정원형의 크기와 비슷하게 그라데이션이 나타남
body {
background: radial-gradient(#6c52da #3a2c76);
background: radial-gradient(
circle closest-side,
#6c52da 25%,
#45d5bf 25%,
#45d5bf 50%,
#3a2c76 50%
);
}
배경 패턴
body {
background: url("//goo.gl/B6SfbX");
background-size: 90px;
/* 사이즈를 설정해서 이미지의 크기를 조정하면 패턴 형태로 나타남 */
}
오버레이 그레디언트
멀티 배경 테크닉 활용, 마크업 순서에 따라 배경 위로 올라옴
body {
background:
/* linear-gradient(45deg, #45d5bf, #3a2c76) 투명도가 조정되지 않았기 때문에 아래의 이미지가 보이지 않음*/ linear-gradient(
45deg,
hsla(12, 100%, 50%, 0.2),
hsla(54, 90%, 68%, 0.2)
), url("//goo.gl/B6SfbX");
background-size: contain, 120px;
}
멀티 그레디언트
body {
background: linear-gradient(
217deg,
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0) 65.7%
), linear-gradient(127deg, rgba(0, 255, 0, 0.45), rgba(0, 255, 0, 0) 65.7%),
linear-gradient(336deg, rgba(0, 0, 255, 0.45), rgba(0, 0, 255, 0) 65.7%),
url("//goo.gl/B6SfbX");
background-size: 100%, 100%, 100%, 140px;
background:
/* 'circle at 50% 0'(x, y) 원이 뿌려져 나가는 위치 설정 가능 */ radial-gradient(
circle at 50% 0,
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0) 65.7%
), radial-gradient(
circle at 6.7% 75%,
rgba(0, 255, 0, 0.45),
rgba(0, 255, 0, 0) 65.7%
), radial-gradient(
circle at 93.3% 75%,
rgba(0, 0, 255, 0.45),
rgba(0, 0, 255, 0) 65.7%
), url("//goo.gl/B6SfbX");
background-size: 100%, 100%, 100%, 140px;
}
반복 그레디언트
body {
/* [선형 그레디언트] */
background: repeating-linear-gradient(
45deg,
#ff3400,
#ff3400 10px,
#45d5bf 10px,
#45d5bf 20px
);
/* [원형 그레디언트] */
background: repeating-radial-gradient(
circle at 50% 15%,
#ff3400,
#ff3400 10px,
#45d5bf 10px,
#45d5bf 20px
);
}
박스 그림자
기본 문법
header {
box-shadow: x y blur spread(사이즈) color;
/* 또는 */
box-shadow: x y blur color;
}
박스 그림자
박스 그림자의 x y를 0으로 설정하면 박스 사방으로 그림자가 나타나는 형태가 된다. 이를 이용해서 <border>
와 같이 이미지의 테두리를 설정해 줄 수 있다.
header {
/* 박스 그림자 ------ */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
/* 박스 그림자 설정 ------ */
box-shadow: 0 0 0 1px #3f3f3f;
/* 박스 둥근 테두리 설정 ------ */
/* 순서 : 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단 */
/* width값의 50% 즉, 절반 값을 사용한다. */
border-radius: 170px 0 0 170px;
}
header::after {
/* 박스 안쪽 그림자 ------ */
box-shadow: inset 0 -5px 15px 4px rgba(0, 0, 0, 0.35);
}
박스 안쪽 그림자를 설정 할 때는 가상요소를 사용해서 설정한다.
멀티 박스 그림자 설정
마치 이미지가 들어 올려지는 것 같은 효과를 줄 수 있다.

.album-card:hover {
transform: scale(1.05);
box-shadow:
0 25px 20px -20px rgba(0, 0, 0, 0.25),
0 3px 15px rgba(0, 0, 0, 0.5);
}
광택(glossy) 효과 설정

<ul class="album-list">
<li class="album-card has-gossy"></li>
</ul>
.album-card.has-glossy::before {
background: linear-gradient(
148deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.15) 47%,
rgba(255, 255, 255, 0.3) 47%,
rgba(255, 255, 255, 0.3) 47.1%,
transparent 47.1%
);
}
참고
Last updated
Was this helpful?