[gradient] CSS - radial-gradient() 함수 ★ - 방사형 그레이디언트 배경이미지 (= 방사형 그라디언트 = 방사형 그래디언트)

1. radial-gradient () 예제 - 방사형 그레이디언트
2. radial-gradient () 정의
3. radial-gradient () 구문
4. radial-gradient () 예제 - 여러 유형 설정값
5. radial-gradient () 예제 - 메뉴 아이콘 만들기

radial-gradient () 예제 - 방사형 그레이디언트 

[예제1] 비율 사용 X

 

<style>

div {

  height: 200px;

  width: 200px;

  background-image: radial-gradient(red, green, blue);

}

</style>

<div></div>

 

결과보기

---

[예제2] - 비율 사용 O

 

<style>

#hz {

    height: 150px;

    width: 200px;

    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 50%); /* 사파리 구버전 */

    background: -o-repeating-radial-gradient(red, yellow 10%, green 50%);  /* 오페라 구버전 */

    background: -moz-repeating-radial-gradient(red, yellow 10%, green 50%); /* 파이어폭스 구버전*/

    background: repeating-radial-gradient(red, yellow 10%, green 50%); /* 표준 */

}

</style>

 

<div id="hz"></div>

 

결과보기

radial-gradient () 정의

 

방사형 그레이디언트(= 그라디언트 = 그래디언트) 배경이미지 설정.

※ 외래어표기법 상, 그레이디언트가 맞음. 

 

---

1.
적어도 2개 이상의 색상 정의 필요.

2.
CSS3

 

3.

IE10 이상 최신 주요 브라우저 지원.

구 버전 브라우저 경우, 접두어 필요.

https://homzzang.com/b/css-126

 

4.

MDN radial-gradient() 예제 보기

 

radial-gradient () 구문

 

selector {background-image: radial-gradient(shape size at position, start-color, ..., last-color);}

---

[매개변수]

 

shape

그레이디언트 모양 (가능값 종류)

• ellipse - 타원형 (기본값)
• circle - 원형

 

size

그레이디언트 크기. (가능값 종류) ※ 코너=구석, 사이드=모서리

• closest-side - 가장 가까운 사이드
• farthest-side - 가장 먼 사이드
• closest-corner - 가장 가까운 코너
• farthest-corner - 가장 먼 코너 (기본값)

 

position

그레이디언트 중심 위치 (※ 가능값 종류)

• center  - 중앙. (기본값)
• at X% Y% -  X는 왼쪽부터 시작. Y는 상단부터 시작

 

start-color, ..., last-color

변하는 색 종류 (최소 2개 이상 정의 필요)

• 필수. 컬러색상
• 선택. 컬러위치 (0 ~ 100 %로 표시 또는 경사축으로 표시)

radial-gradient () 예제 - 여러 유형 설정값

 

불규칙 간격

background-image: radial-gradient(red 5%, green 15%, blue 60%);

 

원형 모양

background-image: radial-gradient(circle, red, yellow, green);

 

가장 가까운 사이드 

background-image: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);

 

가장 먼 사이드

background-image: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

 

가장 가까운 코너

background-image: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black);

 

가장 먼 코너 (기본값)

background-image: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black);

 
반복
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
https://homzzang.com/b/css-274

 

radial-gradient () 예제 - 메뉴 아이콘 만들기

 

<style>

#outbox {

    position: relative;

    height: 20em;

    background-color: #ddd;

}

#outbox .inbox {

    padding: 2em;

}

#outbox .inbox .menu {

    position: relative; /* 부모에 상대적 위치 추가 */

    padding-left: 30px; /* 말머리의 공간을 위해 왼쪽 여백 추가 */

}

#outbox .inbox .menu:before {

    display: block;

    content: '';

    width: 24px;

    height: 24px;

    position: absolute;

    top: 0;

    left: 0;

    background-image: radial-gradient(transparent 25%, black 25%);

    border-radius: 50% 50% 0 50%;

    transform: rotate(45deg) scale(0.8);

}

#outbox .inbox .menu:after {

    display: block;

    content: '';

    height: calc(100% - 36px);

    position: absolute;

    bottom: 5px;

    left: 11px;

    border: 1px dashed #31374f;

}

</style>

<div id="outbox">

    <div class="inbox">

        <div class="menu">

            <h3>홈짱닷컴</h3>

            <div class="intro">Homzzang.com</div>

        </div>

        <div class="menu">

            <h3>그누보드</h3>

            <div class="intro">Sir.kr</div>

        </div>

    </div>

</div>

결과보기

배르만 님 (241221) https://sir.kr/qa/549151