• 회원가입
  • 로그인

[gradient] CSS - Gradient (그레이디언트 = 그라디언트) 종류 - (색번짐변화=색변화) : IE 10

목차

  1. Gradient 관련 주소
  2. Gradient 정의
  3. Gradient 종류 - 색 번짐 방향 기준
  4. 선형 그라디언트 (Linear Gradients) 구문
  5. 상하 Gradient (기본값)
  6. 좌우 Gradient
  7. 대각선 Gradient
  8. 각도 Gradient (= 앵글 Gradient) 구문
  9. 상하 여러 색 Gradient (= 수직 멀티 그라디언트)
  10. 좌우 여러 색 Gradient (= 수평 멀티 그라디언트)
  11. 좌우 단색 투명도 Gradient
  12. 반복 선형 Gradient 구문

 

Gradient 관련 주소


https://uigradients.com

https://codepen.io/sinbi/pen/JqjyNP

 


Gradient 정의

※ 「그레이디언트」가 표준 용어. 「그라디언트」라고도 함.


 2개 이상의 색이 부드럽게 변해가는 걸 의미. 

 



2. 장점:  이미지 이용할 때보다 자원을 덜 차지해 랜딩 속도도 빠르고, 확대했을 때 더 이쁘게 보임.
3. 지원브라우저: IE10 이상 주요 최신 브라우저

 

 

Gradient 종류 - 색 번짐 방향 기준


선형 그라디언트 (Linear Gradients) - 상하 / 좌우 / 대각선 

원형 그라디언트 (Radial Gradients) - 원형

 

 

선형 그라디언트 (Linear Gradients) 구문


selector {background: linear-gradient(direction, start, middle, end);}

 


[속성값]

 

direction
변화 방향 :  (선택)   상하 방향  ,  좌우 방향 ,   대각성 방향   등

to bottom

밑으로  (= 위에서 아래로) - 기본값

 

to top

위로  (= 아래에서 위로)

 

to right

오른쪽으로  (= 왼쪽에서 오른쪽으로)


to left 왼쪽으로  (= 오른쪽에서 왼쪽으로)


to bottom right 대각선으로  (= 좌상단에서 우하단으로)

start
필수. 시작 색깔 (= 출발지 색깔)

middle
선택. 중간 색깔 (= 중간지 색깔)
쉼표 (,) 이용해 여러 개 나열 가능.

end
필수. 종료 색깔 (= 목적지 색깔)



상하 Gradient (기본값) 


body {

    background: red; /* 그라디언트 지원 않는 브라우저용  */

    background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 to 6.0 */

    background: -o-linear-gradient(red, yellow); /* Opera 11.1 to 12.0 */

    background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 to 15 */

    background: linear-gradient(red, yellow); /* 표준 */

}

 
결과보기

 

좌우 Gradient


body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  background: -webkit-linear-gradient(left, red , yellow); /* Safari 5.1 to 6.0 */

  background: -o-linear-gradient(right, red, yellow); /* Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 to 15 */

  background: linear-gradient(to right, red , yellow); /* 표준 */

}

 

결과보기

 

대각선 Gradient

 

#hz {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 to 6.0 */

  background: -o-linear-gradient(bottom right, red, yellow); /* Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(bottom right, red, yellow); /* Firefox 3.6 to 15 */

  background: linear-gradient(to bottom right, red, yellow); /* 표준  */

}

 

결과보기

 

각도 Gradient (= 앵글 Gradient) 구문

 

selector {background: linear-gradient(deg, start, middle, end);}

 


[속성값]

 

deg

각도.  0deg ~ 360deg 가능.
※  0 deg는 선형 그라디언트 기본 방향인 to bottom과 색상 위치가 반대.

 


[예제]

 

body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  background: -webkit-linear-gradient(-90deg, red, yellow); /* Safari 5.1 to 6.0 */

  background: -o-linear-gradient(-90deg, red, yellow); /* Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(-90deg, red, yellow); /* Firefox 3.6 to 15 */

  background: linear-gradient(-90deg, red, yellow); /* 표준 */

}

 

결과보기

 

상하 여러 색 Gradient (= 수직 멀티 그라디언트)


body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  background: -webkit-linear-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */

  background: -o-linear-gradient(red, yellow, green); /* Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(red, yellow, green); /* Firefox 3.6 to 15 */

  background: linear-gradient(red, yellow, green); /* 표준 */



결과보기

 

좌우 여러 색 Gradient (= 수평 멀티 그라디언트)


body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  /* Safari 5.1 to 6.0 */

  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  /* Opera 11.1 to 12.0 */

  background: -o-linear-gradient(left, red,orange,yellow,green,blue,indigo,violet);

  /* Fx 3.6 to 15 */

  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  /* 표준 */

  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 

}

 
결과보기

 

좌우 단색 투명도 Gradient

 

color 값에 rgba() 색상 함수 이용.
 (예)  
rgba(a,b,c,d)   (예) rgba (0,0,0,0.5)

a, b, c
a,b,c 각각 0 ~ 255 숫자 가능. 

※ a, b, c가 결합해 하나의 색상 구성.

 

d

불투명도.  0~1 까지 가능. 

※ 0 (완전 투명)  ~  1 (완전 불투명)

 


[예제] 

 

body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/

  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/

  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/

  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 표준 */


 

결과보기


반복 선형 Gradient 구문


repeating-linear-gradient(direction, start, middle, end)

 


[예제]

 

body {

  background: red; /* 그라디언트 지원 않는 브라우저용 */

  /* Safari 5.1 to 6.0 */

  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* Opera 11.1 to 12.0 */

  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* Firefox 3.6 to 15 */

  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* 표준 */

  background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012