그레디언트

그레디언트

기본 문법

첫 시작(0%)과 끝(100%)의 퍼센트는 입력하지 않아도 적용 가능

body {
  background: linear-gradient( 각도(또는 방향), 시작 색상, 끝 색상 ); 
  
  /*  또는  */
  background: linear-gradient( 각도(또는 방향), 시작 색상, 중간 색상, 끝 색상 ); 
  
  /*  퍼센트 추가  */
  background: linear-gradient( 각도(또는 방향), 시작 색상 30&, 중간 색상 60%, 끝 색상 ); 
}

선형 그레디언트

body {
  background: linear-gradient(90deg, #0e0f12, #f7e763);

  /* 
  90deg  : to right
  180deg : to bottom    (시작색상 → 끝 색상)
  0deg   : to top       (끝 색상 → 시작색상)
  45deg  : to top right
  -45deg : to top left 
  */

  /* [색상을 선명하게 구문지어 주고 싶다면] */

  background: linear-gradient(
    45deg,
    #ff3400 40%,
    #45d5bf 40%,
    #45d5bf 60%,
    #3a2c76 60%,
    #3a2c76
  );
}

원형 그레디언트

• 원 모양의 값 (화면 폭에 따라 원의 모양, 크기가 달라짐)

  • circle 정원형

  • ellipse 기본값(생략 가능)

• farthest-side 기본값

  closest-side 정원형의 크기와 비슷하게 그라데이션이 나타남

body {
  background: radial-gradient(#6c52da #3a2c76);

  background: radial-gradient(
    circle closest-side,
    #6c52da 25%,
    #45d5bf 25%,
    #45d5bf 50%,
    #3a2c76 50%
  );
}

배경 패턴

body {
  background: url("//goo.gl/B6SfbX");
  background-size: 90px;
  /* 사이즈를 설정해서 이미지의 크기를 조정하면 패턴 형태로 나타남 */
}

오버레이 그레디언트

멀티 배경 테크닉 활용, 마크업 순서에 따라 배경 위로 올라옴

body {
  background: 
    /* linear-gradient(45deg, #45d5bf, #3a2c76) 투명도가 조정되지 않았기 때문에 아래의 이미지가 보이지 않음*/ linear-gradient(
      45deg,
      hsla(12, 100%, 50%, 0.2),
      hsla(54, 90%, 68%, 0.2)
    ), url("//goo.gl/B6SfbX");
  background-size: contain, 120px;
}

멀티 그레디언트

body {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0) 65.7%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.45), rgba(0, 255, 0, 0) 65.7%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.45), rgba(0, 0, 255, 0) 65.7%),
    url("//goo.gl/B6SfbX");
  background-size: 100%, 100%, 100%, 140px;

  background: 
  /* 'circle at 50% 0'(x, y) 원이 뿌려져 나가는 위치 설정 가능 */ radial-gradient(
      circle at 50% 0,
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0) 65.7%
    ), radial-gradient(
      circle at 6.7% 75%,
      rgba(0, 255, 0, 0.45),
      rgba(0, 255, 0, 0) 65.7%
    ), radial-gradient(
      circle at 93.3% 75%,
      rgba(0, 0, 255, 0.45),
      rgba(0, 0, 255, 0) 65.7%
    ), url("//goo.gl/B6SfbX");
  background-size: 100%, 100%, 100%, 140px;
}

반복 그레디언트

body {
  /* [선형 그레디언트] */
  background: repeating-linear-gradient(
    45deg,
    #ff3400,
    #ff3400 10px,
    #45d5bf 10px,
    #45d5bf 20px
  );

  /* [원형 그레디언트] */
  background: repeating-radial-gradient(
    circle at 50% 15%,
    #ff3400,
    #ff3400 10px,
    #45d5bf 10px,
    #45d5bf 20px
  );
}

박스 그림자

기본 문법

header {
  box-shadow: x y blur spread(사이즈) color;
  
  /*  또는  */
  box-shadow: x y blur color;
}

박스 그림자

박스 그림자의 x y를 0으로 설정하면 박스 사방으로 그림자가 나타나는 형태가 된다. 이를 이용해서 <border>와 같이 이미지의 테두리를 설정해 줄 수 있다.

header {
  /* 박스 그림자 ------ */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);

  /* 박스 그림자 설정 ------ */
  box-shadow: 0 0 0 1px #3f3f3f;

  /* 박스 둥근 테두리 설정 ------ */
  /* 순서 : 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단 */
  /* width값의 50% 즉, 절반 값을 사용한다.  */
  border-radius: 170px 0 0 170px;
}

header::after {
  /* 박스 안쪽 그림자 ------ */
  box-shadow: inset 0 -5px 15px 4px rgba(0, 0, 0, 0.35);
}

박스 안쪽 그림자를 설정 할 때는 가상요소를 사용해서 설정한다.

멀티 박스 그림자 설정

마치 이미지가 들어 올려지는 것 같은 효과를 줄 수 있다.

.album-card:hover {
  transform: scale(1.05);
  box-shadow: 
  0 25px 20px -20px rgba(0, 0, 0, 0.25), 
  0 3px 15px rgba(0, 0, 0, 0.5);
}

광택(glossy) 효과 설정

<ul class="album-list">
  <li class="album-card has-gossy"></li>
</ul>

.album-card.has-glossy::before {
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.15) 47%,
    rgba(255, 255, 255, 0.3) 47%,
    rgba(255, 255, 255, 0.3) 47.1%,
    transparent 47.1%
  );
}

참고

• Using CSS Gradients

• 선형(Linear) 그레디언트

• 원형(Radial) 그레디언트

• 둥근 테두리(Border Radius)

• 박스 그림자(Box Shadow)

• CSS 3D 그레디언트 (실습 시작) by codepen

• CSS 3D 그레디언트 (실습 완료) by codepen