그라데이션 css 적용하기

그라데이션 css 만들기

 

블로그 스킨을 변경하면서 글 소제목에 밑줄을 그라데이션으로 변경해보았습니다. 그라데이션으로 표시할 때 다음과 같이 css를 적용합니다.

 

그라데이션 css 적용하기

linear-gradient { 그라데이션 방향, 색상1, 색상2 }

 

그라데이션 방향

• to left (오른쪽에서 왼쪽)
• to right (왼쪽에서 오른쪽)
• to top (아래에서 위)
• to bottom (위에서 아래)
• ndeg (n도 방향으로)

예시

.gradient01 {  background : linear-gradient(to left, #b8ceef 0%, #C0F5FB 100%);}

.gradient02 { background : linear-gradient(to right, #b8ceef 0%, #C0F5FB 100%);}

.gradient03 { background : linear-gradient(to top, #b8ceef 0%, #C0F5FB 100%);}

.gradient04 { background : linear-gradient(to bottom, #b8ceef 0%, #C0F5FB 100%);}

.gradient05 { background : linear-gradient(60deg, #b8ceef 0%, #C0F5FB 100%);}

to left (오른쪽에서 왼쪽) 적용

 

to right (왼쪽에서 오른쪽) 적용

 

to top (아래에서 위) 적용

 

to bottom (위에서 아래) 적용

 

ndeg (n도 방향으로) 적용 60도 / 60deg

위와 같이 원하는 html 요소에 linear-gradient 값을 지정하여 원하는 색상을 그라데이션 방향을 설정할 수 있습니다.

그라데이션 방향에 퍼센트 값과 여러 색 설정 가능

색상 값을 여러 가지로 설정할 수 있습니다.

linear-gradient { 그라데이션 방향, 색상1, 색상2, 색상3, 색상4 }

예시

to left, #b8ceef, #C0F5FB, #f8f8ba, #f17575 값 적용시

색상을 4개를 나열하면 나열한 순서와 방향대로 적용됩니다.

to left, #b8ceef 45%, #C0F5FB 60%, #f8f8ba 70%, #f17575 90% 적용시

색상 옆에 퍼센테이지를 적으면 비율도 조절할 수 있습니다.

 

블로그 h3 태그 내용

현재 해당 블로그에 h3 밑줄에 그라데이션 값을 주기 위해서 다음과 같이 설정하였습니다.

h3 { clear: both;
    line-height: 1.5;
    text-align: left !important;
    margin: 38px 0 22px !important;
    display: inline-block;
    background-image: linear-gradient(to left, #2E6FD088 0%, #C0F5FB 100%);
    background-repeat: no-repeat;
    background-position: left 0 bottom 5px;
    background-size: 100% 30%;
}

display: inline-block;로 설정한 이유는 밑줄을 글을 입력한 크기만큼만 그라데이션 설정하기 위해서입니다. inline-block을 block으로 변경하면 한줄 끝까지 그라데이션 설정이 됩니다. 배경 크기를 변경하고 싶다면 background-size:의 100%, 30%을 원하는 수치로 변경하시면 됩니다.

 

class를 지정하여 css를 지정하거나 각 요소의 html의 style을 지정하는 방식 둘다 적용이 됩니다.