728x90
300x250
지원하지 않는 브라우저도 고려해서 단색도 넣어준다
1 2 3 4 5 6 7 | #footer { background: #a93952; background: -webkit-linear-gradient( top, #a93952, #df4148, #ea8350, #f8d681, #117fa1); /* 초기 모던 브라우저 */ background: -moz-linear-gradient( bottom, #a93952, #df4148, #ea8350, #f8d681, #117fa1); /* 초기 모던 브라우저 */ background: -o-linear-gradient( bottom, #a93952, #df4148, #ea8350, #f8d681, #117fa1); /* 초기 모던 브라우저 */ background: linear-gradient(to bottom, #a93952, #df4148, #ea8350, #f8d681, #117fa1); /* 최신 모던 브라우저 */ } | cs |
선형그라데이션
linear-gradient(<각도>to<방향>,color-strop,[color-stop,..];
▶ 방향값 :
to top, to left, to right, to bottom
선형은 css3와 html5가 지원 가능한 곳만 사용가능 그래서 접두사를 붙여줘야 한다.
-webkit- 사파리 5.1~6.0 그라데이션 시작 위치 기준
-moz- 파폭 3.6~15 그라데이션 끝위치 기준 to 사용안함
-o- 오페라 11.1~12.0 그라데이션 끝위치 기준 to 사용안함
▶ 각도 :
선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 다른방법
이때의 각도는 그라데이션이 끝나는 각도이고 그 값은 'deg'로 표기
css에서 각도는 맨 윗부분이 0deg이고 시계방향으로 회전하면서 90deg, 18deg가 된다.
브라우저 접두사를 붙여야 하는 이전 버전의 모던 브라우저에서도 각도는 똑같이 사용해야 한다.
▶색상중지점(color-stop) :
선형 그라데이션을 만들려면 바뀌는 부분의 색을 지정해 주어야 하는데 바뀌는 지점을 색상 중지점 이라고 함
색상 중지점을 지정할때는 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 함께 지정할 수도 있다.
다음에는 시작색상과 끝 새상을 #06f로 하고 시작위치에서 30% 지점에 흰색을 두어 위에서 아래로 부드럽게 연결되는 그라데이션을 연결한것이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <head> <meta charset="utf-8"> <title>선형 그러데이션</title> <style> div { width:500px; height:300px; } .grad { background: #06f; /* css3 미지원 브라우저 */ background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */ background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */ background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */ background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */ } </style> </head> <body> <div class="grad"></div> </body> |
728x90
반응형
'Front-end > HTML' 카테고리의 다른 글
| 나눔바른고딕 적용하기 (0) | 2019.05.13 |
|---|---|
| text slid up&down :: 텍스트 슬라이드 업앤다운 (0) | 2019.03.28 |
| svg 이미지 만들기 (2) | 2019.03.11 |
| 파비콘 만들기및 등록하기 (0) | 2019.03.10 |
| 햄버거메뉴 코딩으로 만들기 (0) | 2019.02.09 |
댓글