반응형
css 그라데이션 표현과 응용
홈페이지를 만들기 위해선 필수코딩중 하나인 그라데이션을 이용해 표현해 보겠습니다. 테마를 이용한 워드프레스와 부트스트렙을 보면 전면 이미지라든가 슬라이드및 배너를 많이 보게 되는데 이런 이미지에 많이 쓰이는 것이 css로 그라데이션을 구현한 테마들을 많이 볼 수있습니다.
그래서 css를 이용하여 그라데이션을 구현하는 방법에 대해 알아보겠습니다.
CSS로 그라데이션 구현 방식은 background 속성에 linear-gradient 값을 이용해 색상을 지정 할 수 있습니다. 색상 설정은 두가지로 표현하면 됩니다.
|
1
2
3 |
body {
background : linear-gradient ( # 05FBFF , # 1E00FF );
} |
|
이렇게 구현 할 수 있습니다. 실제 예로 한번 표현해 보면 아래와 갔습니다.
기본예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
body {
background: linear-gradient(#05FBFF, #1D62F0 ) fixed;
}
div {
margin: 120px 0;
text-align: center;
}
p {
font-family: "Nanum Gothic", sans-serif;
line-height: 1.5;
margin-bottom: 25px;
color: #fff;
} |
|
|
1
2
3
4 |
<div>
<p>The right thing… what is it?<br>I wonder if you do the right thing…<br>
<strong>Does it really make everybody happy?</strong> <br />노력만 하기엔 너무도 부족하다!!</p>
</div> |
대각선그라데이션
각도를 변경 하려면 deg로 각도를 지정할 수 있습니다. 마이너스 값도 가능하며 비스듬한 대각선의 그라데이션을 만들 때 사용할 수도 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
body {
background: linear-gradient(-135deg, #E4A972, #9941D8) fixed;
}
div {
margin: 120px 0;
text-align: center;
}
p {
font-family: "Nanum Gothic", sans-serif;
line-height: 1.5;
margin-bottom: 25px;
color: #fff;
} |
|
원형 그라데이션
선형 그라데이션이 아닌 원형, 방사형 그라데이션도 가능합니다. 원형 그라데이션을 구현하려면 linear-gradient 대신 radial-gradient 를 사용합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
body {
background: radial-gradient(#F2B9A1, #EA6264) fixed;
}
div {
margin: 120px 0;
text-align: center;
}
p {
font-family: "Nanum Gothic", sans-serif;
line-height: 1.5;
margin-bottom: 25px;
color: #fff;
} |
|
이미지를 오버레이하기
이미지 위에 그라데이션 이미지를 오버레이 한다던가, 오버레이 이미지 배경에 마스킹된 이미지를 만든다 든가 하는 것은 물론 통 이미지로도 가능합니다. 그러나, css로도 간단히 만들 수 있습니다.
background 프로퍼티 값에 여러가지 이미지를 설정 할 수 있습니다. 이것을 이용하면 그라데이션 색상 rgba 에 알파 투명값을 조절하면, 투명도가 생겨 그라데이션 뒤의 이미지를 오버레이 할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
body {
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)) fixed, url(img.jpg) fixed;
background-size: cover;
}
div {
margin: 120px 0;
text-align: center;
}
p {
font-family: "Nanum Gothic", sans-serif;
line-height: 1.5;
margin-bottom: 25px;
color: #fff;
} |
|
반응형
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| style css의 하이퍼 링크 활용하기 (3) | 2022.06.17 |
|---|---|
| CSS 배경(컬러) color 및 image(이미지) 기울이기 (0) | 2017.11.03 |
| html icon 아이콘 적용하기 (0) | 2017.11.01 |
| html 주석(comment) (0) | 2017.10.11 |
| CSS 글꼴 Font 속성 (0) | 2017.09.27 |
