CSS - 그라데이션(gradient) 이용하여 격자 무늬&줄무늬&체크 무늬&도트&삼각&지그재그 패턴 배경 만들기

닌니디자인 CSS 썸네일

 

CSS Gradients

그라데이션(gradient) 속성을 사용하면 두 개 이상의 지정된 색상이 변화한다. linear-gradient, radial-gradient, conic-gradient 세 가지 유형의 그라데이션 종류가 있다. 이 세가지의 그라데이션 종류와 색상, 위치, 각도 등의 속성을 이용하면 다양하고 독특한 그래픽 효과를 만들 수 있다. 

/*아래로/위로/왼쪽/오른쪽/대각선으로 이동*/
#grad-linear {
  background-image: linear-gradient(red, yellow); 
}

/* 중심에서부터 이동 */
#grad-radial {
  background-image: radial-gradient(red, yellow);
}

/* 중심점을 중심으로 회전 */
#grad-conic {
  background-image: conic-gradient(red, yellow);
}

 

 

 

---

 

격자무늬

background-size 속성으로 격자의 크기를 조절. 

 

 

가로 줄무늬

background-size 속성으로 줄무늬 가로 너비를 조절.

 

 

세로 줄무늬

background-size 속성으로 줄무늬 세로 너비를 조절.

 

 

 

 

---

 

체크무늬1

background-color 속성과 linear-gradient 속성으로 두가지 색상 조합.

 

 

체크무늬2

색상에 불투명도를 조절해주면 입체적인 체크무늬를 디자인 할 수 있다.

 

 

체크무늬3

background-position 속성을 지정하지 않으면 대각선 체크무늬를 디자인 할 수 있다.

 

 

 

 

---

 

도트무늬1

radial-gradient 속성으로 동그란 도트모양을 디자인 할 수 있다.

 

 

도트무늬2

background-position 속성으로 도트 위치를 지그재그로 디자인 할 수 있다.

 

 

도트무늬3

radial-gradient 속성으로 도트를 만들고 linear-gradient 속성으로 사선 패턴과 가로 패던을 만들어 점선처럼 디자인 할 수 있다. 단점은 배경색을 지정할 수 없다.

 

 

 

 

---

 

삼각무늬

background-size 속성으로 삼각형 크기를 조절.

 

 

지그재그무늬1

linear-gradient 속성에서 각도를 조절하여 삼각형 기울기를 조절

 

 

지그재그무늬2

색상에 불투명도를 조절해주면 입체적인 지그재그 패턴을 디자인 할 수 있다.

 

 

지그재그무늬3

background-color 속성과 linear-gradient 속성으로 사선모양의 지그재그 패턴을 디자인 할 수 있다.

 

 

 

 

---

 

참고사이트

CSS Gradients