[CSS3] 선형 그레이디언트 (linear-gradient)
-
관리자 /
2011.12.07 01:49 /
hit 2,855 추천
0
이제 CSS3의 배경 효과만으로도 선형 그레이디언트를 표현할 수 있습니다. 예전에는 그러데이션 이미지 하나를 놓아서 반복시켜야 했지만 이제는 그럴 필요가 없습니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 단 Internet Explorer같은 경우 버전 10 이상이여야 합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
그러데이션 컬러의 위치를 지정할 수도 있습니다. 입력한 컬러 뒤에 위치에 관한 값을 더 입력해주면 됩니다. 그러데이션의 기울기(각도)를 지정할 수도 있는데 괄호의 첫번째에 해당 각도를 입력하면 됩니다.
지금까지 설명한 내용을 정리하면 위에 있는 이미지처럼 입력할 수 있습니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 단 Internet Explorer같은 경우 버전 10 이상이여야 합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
.example-div {
width: 500px;
height: 100px;
box-sizing: border-box;
border: 1px solid #CCC;
background: #999;
}height: 100px;
box-sizing: border-box;
border: 1px solid #CCC;
background: #999;
그러데이션 컬러의 위치를 지정할 수도 있습니다. 입력한 컬러 뒤에 위치에 관한 값을 더 입력해주면 됩니다. 그러데이션의 기울기(각도)를 지정할 수도 있는데 괄호의 첫번째에 해당 각도를 입력하면 됩니다.
지금까지 설명한 내용을 정리하면 위에 있는 이미지처럼 입력할 수 있습니다.