멋진 이미지 장식: 마스크 및 고급 호버 효과

이 2부작 시리즈의 XNUMX부에 오신 것을 환영합니다! 우리는 여전히 추가 요소와 유사 요소 없이 이미지를 장식하고 있습니다. 이미 소화할 시간을 가졌으면 좋겠어 파트 1 멋진 시각 효과를 만들기 위해 계속해서 많은 그라디언트 작업을 할 것이기 때문입니다. CSS도 소개할 예정입니다. mask 더 복잡한 장식 및 호버 효과에 대한 속성입니다.

함께 작업 중인 첫 번째 예를 살펴보겠습니다.

우표

믿거 나 말거나 우표 CSS 효과를 만드는 데 필요한 것은 두 개의 그라디언트와 필터입니다.

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

우리가 봤 듯이 이전 기사, 첫 번째 단계는 다음을 사용하여 이미지 주위에 공간을 만드는 것입니다. padding 그래서 우리는 배경 그라디언트를 그리고 거기에서 볼 수 있습니다. 그런 다음 다음 조합을 사용합니다. radial-gradient() 및 linear-gradient() 이미지 주변의 원을 자릅니다.

다음은 그라디언트가 구성되는 방식을 보여주는 단계별 그림입니다.

의 사용에 유의하십시오. round 두 번째 단계의 값. 이미지 너비나 높이에 관계없이 모든 면에서 그라디언트 크기가 완벽하게 정렬되도록 조정되므로 트릭에 매우 중요합니다.

~ 사양: 배경 위치 지정 영역에 맞는 만큼 이미지가 반복됩니다. 전체 횟수에 맞지 않으면 맞도록 크기가 조정됩니다.

둥근 프레임

원을 사용하는 또 다른 이미지 장식을 봅시다...

이 예에서는 radial-gradient()하지만 이번에는 서클을 만들었습니다. 약 컷 아웃 효과 대신 이미지. 저도 사용중이니 참고하세요 round 다시 가치. 여기서 가장 까다로운 부분은 프레임과 이미지 사이의 투명한 간격입니다. 여기에서 CSS에 도달합니다. mask 재산:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

마스킹을 통해 이미지 영역을 표시할 수 있습니다. linear-gradient() 거기에 - 뿐만 아니라 20px 그것의 양쪽 주위에 — 덕분에 conic-gradient(). 그만큼 20px 변수에 불과하다 --s 프레임의 크기를 정의합니다. 즉, 격차를 숨겨야 합니다.

여기 내가 의미하는 바가있다.

선형 그라디언트는 배경의 파란색 부분이고 원뿔형 그라디언트는 배경의 빨간색 부분입니다. 두 그라디언트 사이의 투명한 부분은 내부 투명 테두리의 환상을 만들기 위해 요소에서 잘라낸 것입니다.

내부 투명 테두리

이를 위해 우리는 프레임을 만들지 않고 오히려 다른 것을 시도할 것입니다. 투명한 내부 테두리를 만들 것입니다. 내부 우리의 이미지. 실제 시나리오에서는 그다지 유용하지 않을 수 있지만 CSS 마스크를 사용하는 것은 좋은 방법입니다.

이전 예와 유사하게, 우리는 두 가지 그래디언트에 의존할 것입니다. linear-gradient() 내부 부품 및 conic-gradient() 외부 부분을 위해. 투명한 테두리 효과를 만들기 위해 그 사이에 공백을 둡니다.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

이 예제의 원뿔형 기울기는 이전 예제와 구문이 다르다는 것을 눈치채셨을 것입니다. 둘 다 같은 모양을 만들어야 하는데 왜 다른가요? 다른 구문을 사용하여 동일한 결과에 도달할 수 있기 때문입니다. 처음에는 혼란스러워 보일 수 있지만 좋은 기능입니다. 당신은 찾을 의무가 없습니다 전에, 특정 모양을 달성하기 위한 솔루션. 수많은 가능성 중에서 자신에게 적합한 솔루션을 하나만 찾으면 됩니다.

다음은 그래디언트를 사용하여 외부 사각형을 만드는 네 가지 방법입니다.

이것을 해제하는 더 많은 방법이 있지만 요점은 알 수 있습니다.

Best™ 접근 방식은 없습니다. 개인적으로 가장 작고 최적화된 코드를 찾으려고 노력합니다. 저에게는 더 적은 기울기, 더 적은 계산, 더 적은 반복 값이 필요한 솔루션이 가장 적합합니다. 때로는 변수를 변경하고 수정하는 데 더 많은 유연성을 제공하기 때문에 더 자세한 구문을 선택합니다. 경험과 연습이 동반됩니다. 그라디언트를 더 많이 사용할수록 어떤 구문을 언제 사용할지 더 많이 알 수 있습니다.

내부 투명 테두리로 돌아가서 호버 효과를 파헤쳐 보겠습니다. 눈치채지 못한 경우를 대비하여 투명 테두리를 이동하는 멋진 호버 효과가 있습니다. font-size 장난. 아이디어는 정의하는 것입니다. --d 값을 가진 변수 1em. 이 변수는 가장자리에서 테두리까지의 거리를 제어합니다. 다음과 같이 변환할 수 있습니다.

--_d: calc(var(--d) + var(--s) * 1em)

...다음과 같이 업데이트된 CSS를 제공합니다.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

XNUMXD덴탈의 font-size 처음에 같음 0 ,그래서 1em 도 같음 0 및 --_d 와 같다 --d. 그러나 호버링 시 font-size 에 의해 정의된 값과 같습니다. --o 테두리의 오프셋을 설정하는 변수입니다. 이것은 차례로 업데이트합니다. --_d 변수, 오프셋만큼 테두리를 이동합니다. 그런 다음 다른 변수를 추가합니다. --s, 테두리가 안쪽으로 이동할지 바깥쪽으로 이동할지 결정하는 기호를 제어합니다.

XNUMXD덴탈의 font-size 트릭은 애니메이션할 수 없는 속성에 애니메이션을 적용하려는 경우에 정말 유용합니다. 다음으로 정의된 사용자 정의 속성 @property 이것을 해결할 수 있지만 그것에 대한 지원 이 글을 쓰는 시점에서 아직 부족합니다.

프레임 공개

이 시리즈의 첫 번째 부분에서 다음 공개 애니메이션을 만들었습니다.

같은 생각을 할 수 있지만 단색 테두리 대신 다음과 같은 그라디언트를 사용합니다.

두 코드를 비교하면 다음 변경 사항을 확인할 수 있습니다.

1. 내부의 첫 번째 예와 동일한 그래디언트 구성을 사용했습니다. mask 재산. 나는 단순히 그라디언트를 background 재산 mask 재산.
2. 나는 추가했다 repeating-linear-gradient() 그라디언트 테두리를 만듭니다.

그게 다야! 나는 우리가 이미 본 것과 동일한 코드의 대부분을 아주 작은 조정으로 재사용했고, 호버 효과가 있는 또 다른 멋진 이미지 장식을 얻었습니다.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

다른 프레임 애니메이션을 시도해 보겠습니다. 이것은 다음과 같이 약간 까다 롭습니다. XNUMX단계 애니메이션:

애니메이션의 첫 번째 단계는 아래쪽 가장자리를 더 크게 만드는 것입니다. 이를 위해 우리는 조정 background-size 의 linear-gradient():

내가 왜 상단 가장자리도 추가하는지 궁금할 것입니다. 세 번째 단계에 필요합니다. 나는 항상 내가 작성하는 코드를 최적화하려고 노력하기 때문에 하나의 그라디언트를 사용하여 위쪽과 아래쪽을 모두 덮고 있지만 위쪽은 숨겨졌다가 나중에 mask.

두 번째 단계에서는 왼쪽 및 오른쪽 가장자리를 표시하기 위해 두 번째 그라디언트를 추가합니다. 하지만 이번에는 다음을 사용하여 수행합니다. background-position:

두 개의 그라디언트를 사용하여 이미 멋진 효과를 얻었으므로 여기에서 멈출 수 있지만 한계를 넘어서기 위해 여기 있으므로 마스크를 추가하여 세 번째 단계를 달성해 보겠습니다.

트릭은 아래쪽과 측면이 표시될 때까지 위쪽 가장자리를 숨긴 다음 업데이트하는 것입니다. mask-size (또는 mask-position) 상단 부분을 표시합니다. 이전에 말했듯이 동일한 효과를 얻기 위해 많은 그라디언트 구성을 찾을 수 있습니다.

다음은 내가 사용할 그라디언트의 그림입니다.

너비가 다음과 같은 두 개의 원뿔형 그라디언트를 사용하고 있습니다. 200%. 두 그라디언트는 영역을 덮고 맨 위 부분만 덮지 않습니다(해당 부분은 나중에 표시되지 않음). 마우스를 가져갈 때 두 그라디언트를 모두 밀어 해당 부분을 덮습니다.

다음은 무슨 일이 일어나고 있는지 더 잘 이해할 수 있도록 그라디언트 중 하나에 대한 더 나은 그림입니다.

이제 우리는 이것을 내부에 넣습니다. mask 재산과 우리는 끝났습니다! 전체 코드는 다음과 같습니다.

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

또한 코드를 최적화하기 위해 몇 가지 변수를 도입했지만 지금 당장은 이에 익숙해져야 합니다.

XNUMX단계 애니메이션은 어떻습니까? 예, 가능합니다!

당신의 숙제이기 때문에 이것에 대한 설명은 없습니다! 이 기사에서 배운 모든 내용을 활용하여 코드를 분석하고 코드가 수행하는 작업을 명확히 하십시오. 논리는 이전의 모든 예와 유사합니다. 핵심은 애니메이션의 각 단계를 이해하기 위해 각 그라디언트를 분리하는 것입니다. 조금 더 읽기 쉽게 코드를 최적화하지 않은 상태로 유지했습니다. 나는 ~를 가지고있다 최적화된 버전 관심이 있다면 직접 코드를 최적화하고 추가 연습을 위해 내 버전과 비교할 수도 있습니다.

최대 포장

여기까지 2부작으로 구성된 이 시리즈의 XNUMX부에서는 요소. 이제 추가 요소나 유사 요소를 사용하지 않고도 그라디언트와 마스크를 결합하여 멋진 시각 효과와 애니메이션을 만드는 방법에 대해 잘 알게 되었습니다. 네, 싱글 태그로 충분합니다!

이 시리즈의 기사가 하나 더 있습니다. 그때까지 여기 내가 사용하는 멋진 호버 효과가 있는 보너스 데모가 있습니다. mask 깨진 이미지를 조립합니다.