CSS / linear-radient 선형 그라데이션 효과 넣는방법

linear-gradient

linear-gradientsms CSS3에서 새롭게 추가된 효과입니다. 선형 그라데이션 효과를 만들어줍니다.

Microsoft Explore에서는 version 10이상에서만 적용이 가능합니다.

 

기본 문법

linear-gradient( direction, color1, color2, color3, ....., colorn )

 

direction은 그라데이션 방향을 입력합니다.

- to top: 위에서 아래로 그라데이션을 적용합니다.

- to botoom: 아래에서 위로 그라데이션을 적용합니다.

- to left: 왼쪽에서 오른쪽으로 그라데이션을 적용합니다.

- to right: 오른쪽에서 왼쪽으로 그라데이션을 적용합니다.

- ndeg: n도의 방향으로 그라데이션을 적용합니다.

 

사용 예)

 

right 그라데이션 적용

left 그라데이션 적용

 

 

 

 

 

 

 

 

 

bottom 그라데이션 적용

 

top 그라데이션 적용

33deg 그라데이션 적용

 

 

 

 

 

 

 

 

 

그라데이션 색상 길이 정하기

색만 입력한다면 색을 균등하게 배분하여 그라데이션을 만들어줍니다. 색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이ᄁᆞ지 해당색을 사용합니다. 

 

예)

이런식으로 퍼센트를 추가한다면 #ad8342는 30% #c72727은 60% 나머지 #fffffb4가 10%가 할당되게 됩니다.

그라데이션 반복

그라데이션의 반복을 원한다면 repeating-linear-gradient를 사용하면 적용됩니다.

 

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어