• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012