CSS3 색상 지정

CSS3 색상 지정

 

CSS3에서는 투명도도 함께 지정할 수 있습니다.

 

CSS3에서는 채도, 휘도 등을 지정할 수 있는 HSLA 방식으로도 값을 지정할 수 있습니다.

 

CSS3에서는 gradient 속성이 추가되어 그라데이션도 쉽게 지정이 가능합니다.

 

CSS3 에 추가된 색상 지정 방식

 

RGBA 색상 지정 방식은 기존의 RGB 방식에 투명도를 나타내는 A(Alpha)가 추가된 것을 의미합니다.

 

투명도를 나타내는 A는 0~1의 값을 갖으며 0은 완전한 투명을 나타내고 1은 불투명을 나타냅니다.

 

HSLA 색상 지정 방식은 색상(Hue), 채도(Saturation), 휘도(Luminance), 투명도(Alpha)를 지정하는 방식을 의미합니다.

 

예제

 

CSS3 의 gradient 속성

 

그라데이션 효과는 시작 위치, 종료 위치, 색상 값 등을 지정하여 적용합니다.

 

그라데이션 효과는 아직 표준화가 되지 않았으므로 각 브라우저마다 벤더 프리픽스를 추가해야 하고 지정하는 속성 값들도 모두 다르게 적용합니다.

브라우저	그라데이션 형식
익스플로러	filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='색상 값', endColorstr='색상 값')
크롬	-webkit-gradient (타입, 시작 위치, 종료 위치, 시작 위치 색상 값, 종료 위치 색상 값)
사파리 4 이상	-webkit-gradient (타입, 시작 위치, 종료 위치, 시작 위치 색상 값, 종료 위치 색상 값)
파이어폭스 3.6 이상	-moz-linear-gradient (시작 위치, 시작 위치 색상 값, 종료 위치 색상 값)
오페라	-o-linear-gradient (시작 위치, 시작 위치 색상 값, 종료 위치 색상 값)

 

예제