[css] gradient (radial-gradient)

 

 

[css] gradient (radial-gradient)

 

지난 시간에 linear-gradient(선형 그레디언트)를 배웠습니다.

 

 

[css3] gradient (linear-gradient) 사용법

 

오늘은 반지름형 그라디언트 입니다. 이전 강좌를 미리 보고 오셔야 이해가 더 쉬울 거예요.

 

선형 그레디언트가  일직선의 그레이디언트를 만들었다면, 반지름형 그레디언트는 반지름이나

 

타원형, 원형 형태의 그레디언트를 만들 때 사용합니다.

 

radial gradients 반지름형 그레디언트

반지름형 그레디언트는 그레디언트 중앙을 축으로 반지름을 그립니다.

 

그레디언트를 만들려먼 최소 두 가지 색상을 지정해야 합니다.

 

[색상 선택] color-stop

 

색상 지정은 linear-gradient와 동일한 방식으로 합니다.

 

색상의 시작점과 끝점 2개는 필수로 지정하고, 중간에 선택적으로 여러 색상을 넣을 수 있어요.

 

색상은 영문 색상 이름, rgba, 16진수값 다양하게 지정할 수 있어요.

 

색상점 위치도 같이  설정할 수 있어요 (%나 길이값 가능)
 
0%, 0는 그레디언트  중앙
100%는 그레디언트 끝지점
그 사이의 백분율은 그레디언트 선에 선형적으로 위치됨.

 

▶예 1

#radial{background: radial-gradient( yellow, green);}

 

 

▶예 2

#radial{

background: radial-gradient(rgba(234,237,242,1) 0%, rgba(19,30,46,1) 61%, rgba(19,30,46,1) 100%);

}

 
[모양]

 

반지름형 그레디언트의 모양은 기본값이 타원형이며, 타원형과 원형 두 가지 값이 있습니다.

ellipse | circle
ellipse  타원
circle 원형

▶예

#radial1{
background: radial-gradient(green 5%, blue 25%, white 50%);
}
#radial2{
background: radial-gradient(circle, green 5%, blue 25%, white 50%);
}

 

▶실행화면

 

 

 

[위치]

 

반지름이 시작하는 위치로, 기본값이 center입니다.

 

background-position 속성과 비슷하게 키워드나, 길이 값을 사용합니다.

 

background-position 속성(배경이미지 위치 지정)

 

길이값을 사용하면 수평이 먼저 오고 그 다음이 수직.

 

문법 at을 사용함
 

▶예

#radial3{
background: radial-gradient(at 30%,  green 5%, blue 25%, white 50%);
}

수평이 30%, 수직이 생략되었으므로 center 임.

 

#radial4{
background: radial-gradient(at left top, green 5%, blue 25%, white 50%);
}

 

그레디언트가 왼쪽 상단에 위치함

 

#radial5{
background: radial-gradient(at 60% bottom, green 5%, blue 25%, white 50%);
}

 

수평이 60%, 수직이 아래 

 

▶실행화면

 

 

[모양 크기]

 

그레디언트 끝 모양의 크기를 지정합니다.

 
closest-corner | closest-side | farthest-corner | farthest-side

 

closest-corner 끝 모앙이 그레디언트 중앙에서 가장 가까운 모서리로 흐려짐.
closest-side 끝 모양이 그레디언트 중앙에서 가장 가까운 변으로 흐려짐.
farthest-corner 기본값. 그레디언트 중앙에서 가장 먼 모서리로 흐려짐
farthest-side 그레디언트 중앙에서 가장 먼 변으로 흐려짐

 

 

▶예

#cc, #cs, #fc, #fs{width:200px; height: 200px;}
#cc{background: radial-gradient(closest-corner, yellow 5%, green 25%, pink 50%);}
#cs{background: radial-gradient(closest-side, yellow 5%, green 25%, pink 50%);}
#fc{background: radial-gradient(farthest-corner, yellow 5%, green 25%, pink 50%);}
#fs{background: radial-gradient(farthest-side,  yellow 5%, green 25%, pink 50%);}

 

 

▶실행화면

 

캡쳐한 화면이라 closest와 farthest가 눈에 띄게 차이가 나지 않지만

farthest가 원 모양이 바깥 쪽으로 좀 더 퍼져 나가는 모양입니다. 그래서 끝 부분도 조금 흐릿하구요..

 

▶ 브라우저 지원

 

표준 버전: ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

 

접두어 버전: chrome 10.0+ / safari 5.1+은 -webkit-

                   firefox 3.6+ 은 -moz-

                   opera 11.6+은 -o-

 

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶사용 예

#radial{

background-color: green;  /* fallback */  
background: -webkit-radial-gradient(yellow, green, white); /* Safari 5.1~6.0 , chrome 10.0~25.0 */
background: -o-radial-gradient(yellow, green, white); /* Opera 11.6 ~ 12.0 */
background: -moz-radial-gradient(yellow, green, white); /*Firefox 3.6 ~15 */
background: radial-gradient(yellow, green, white); /*표준 문법*/
}

 

모양 크기를 지정할 때는 문법이 조금 다릅니다

#radial{
background: -webkit-radial-gradient(60% 40%, closest-side,yellow, green, white);/* Safari 5.1+, chrome 10.0+ */

background: -o-radial-gradient(60% 40%, closest-side,yellow, green, white);/* Opera 11.6 ~ 12.0 */

background: -moz-radial-gradient(60% 40%, closest-side,yellow, green, white);/*Firefox 3.6 ~15 */
background: radial-gradient(closest-side at 60% 40%,yellow, green, white);/*표준 문법*/

}

 

복잡하신 분은, 그레디언트 생성기를 이용하시면 될 것 같아요.

 

http://www.cssmatic.com/gradient-generator

 

 

 

http://www.w3schools.com/Css/css3_gradients.asp

 

http://css-tricks.com/css3-gradients/

 

https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

 

위 사이트도  참조하시면 도움 됩니다.