CSS3 Color (feat. alpha)

CSS3 COLOR

CSS3에서는 컬러값을 rgba, hsla로 사용할 수 있다. 마지막 값인 alpha로 투명도 조절까지 가능해졌다.

또한 단계적 색 적용을 위한 그라디언트 속성이 추가되었다.

배경색 뿐 아니라 모든 색상의 속성을 지정하는 곳이면 사용 가능하다.

 

 

---

 

 

1. rgba([r],[g],[b],[a]);

.rgbBox{
	background:rgba(0,255,0,0.3);
}

r: 빨간색의 수치 0~255
g: 녹색의 수치 0~255
b: 파란색의 수치 0~255
a: 투명도 0~1

 

2. hsla([h],[s],[l],[a]);

.hsla_box{
	background:hsla(0,100%,60%,0.4);
}

h: 색상 값 0~360
s: 채도 0~100%
l: 명도 0~100%
a: 투명도 0~1

---

 

 

3. gradient

기존 이미지로만 사용 가능했던 그라데이션 디자인이 CSS3 코드로 가능해졌다.

 

 

선형 그라디언트

.gradient_linear{
    background:-webkit-gradient(linear, left bottom, right top, from(#00f), to(#fff));
    background:-moz-linear-gradient(bottom 45deg,#00f,#fff);
}

웹킷 계열	파이어폭스
-webkit-gradient(             linear,             [그라디언트 시작점] ,[그라디언트 종료점]              from([시작색상]),             color-stop([변환점위치],[변환점색상])             to([종료색상])             );	-moz-linear-gradient(             [그라디언트 시작점] ,             [그라디언트 경사],              [시작색상],             [변환점색상]             [종료색상]             );

 

 

원형 그라디언트

.gradient_radial{
    background: -webkit-radial-gradient(center, ellipse cover, #e3f0f4 0%,#0fb4e7 100%);
    background: -moz-radial-gradient(center, ellipse cover, #e3f0f4 0%, #0fb4e7 100%);
}

웹킷 계열	파이어폭스
-webkit-gradient(             radial,             [하이라이트 원의 원점x좌표] ,             [하이라이트 원의 원점y좌표],             [하이라이트 원의 반지름] ,             [페이드 아웃 원의 반지름],             [페이드 아웃 원의 원점x좌표],             [페이드 아웃 원의 원점y좌표],             from([시작색상]),             color-stop([변환점위치],[변환점색상])             to([종료색상])             );	-moz-linear-gradient(             [원형 그라디언트의 시점] ,             [원형 그라디언트의 형태(원형/타원형)],              [시작색상]             [변환점색상]             [종료색상]             );

 

＊ 그라디언트 CSS 코드 자동 생성 사이트

 

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

 

 

 

＊ 확장접두사 (벤더프리픽스, Vendor Prefix)
새로 추가 된 CSS3의 문법 중
브라우저마다 속성을 처리하는 방식이 달라서 크로스브라우징에 문제가 발생 할 수 있는데
확장접두사를 이용하여 해당 브라우저에서만 처리하게 하는 문법.


* 브라우저 별 엔진 이름

크롬, 사파리	파이어폭스	오페라	익스
-webkit-	-moz-	-o-	-ms-

* 벤더프리픽스를 직접 코딩하지 않고 해결하는 방법
JavaScript를 통한 처리 방법 : 아래 스크립트를 추가해주면 된다.

<script src="prefixfree.min.js"></script>​

https://projects.verou.me/prefixfree/

prefixfree.min.js

0.01MB