멋진 이미지 장식: 단일 요소 마법

제목 그대로 이미지를 꾸며보겠습니다! 이것에 대해 이야기하는 다른 많은 기사가 있지만 여기에서 다루는 내용은 좀 더 어렵습니다. 도전? 만 사용하여 이미지를 장식하십시오. 태그와 그 이상.

바로, 추가 마크업, div 및 의사 요소가 없습니다. 단 하나의 태그.

어려운 것 같죠? 그러나 이 기사와 이 작은 시리즈를 구성하는 다른 기사가 끝날 때쯤에는 CSS가 단일 요소로 작업하는 한계에도 불구하고 훌륭하고 놀라운 결과를 제공할 만큼 충분히 강력하다는 것을 증명할 것입니다.

첫 번째 예부터 시작하겠습니다.

코드를 파헤치기 전에 스타일 지정 가능성을 열거해 보겠습니다. 추가 요소 또는 의사 요소 없이. 우리는 사용할 수 있습니다 border, box-shadow, outline그리고, 물론, background. 이미지 뒤에 배경이 있기 때문에 볼 수 없기 때문에 이미지에 배경을 추가하는 것이 이상하게 보일 수 있지만 비결은 공간을 만드는 것입니다. 약 사용하는 이미지 padding 및 / 또는 border 그런 다음 그 공간 안에 배경을 그립니다.

내가 이야기한 이후로 다음이 무엇인지 알 것 같아요 background, 오른쪽? 예, 그라디언트! 우리가 만들 모든 장식은 많은 그라디언트에 의존합니다. 만약 당신이 나를 따랐다 잠시 동안, 나는 이것이 당신에게 전혀 놀라운 일이 아니라고 생각합니다. 😁

첫 번째 예로 돌아가 보겠습니다.

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

우리는 정의하고 있습니다 padding 그리고 투명한 border 변수를 사용하여 --s 이미지 주위에 그 변수의 XNUMX배에 해당하는 공간을 만듭니다.

우리가 둘 다 사용하는 이유 padding 및 border 하나 또는 다른 대신? 우리는 그 중 하나만 사용하여 얻을 수 있지만 기본적으로 초기 값이 background-clip is border-box 및 background-origin 동일하다 padding-box.

다음은 논리를 이해하기 위한 단계별 그림입니다.

처음에는 이미지에 테두리가 없으므로 그라디언트가 다음을 사용하여 두 개의 세그먼트를 만듭니다. 1px 두께의. (나는 사용하고있다 3px 이 특정 데모에서는 더 쉽게 볼 수 있습니다.) 색상 테두리를 추가하면 그라디언트가 패딩 영역 내에서 여전히 동일한 결과를 제공합니다( background-origin) 그러나 경계 뒤에서 반복됩니다. 테두리의 색을 투명하게 하면 반복을 사용하여 원하는 프레임을 얻을 수 있습니다.

XNUMXD덴탈의 outline 데모에서 음수 오프셋이 있습니다. 그러면 그라디언트 상단에 정사각형 모양이 만들어집니다. 그게 다야! 하나의 그라디언트와 outline. 더 많은 그라디언트를 사용할 수 있었습니다! 하지만 저는 항상 코드를 최대한 단순하게 유지하려고 노력하며 outline 그런면에서 더 좋습니다.

다음은 만 사용하는 그라디언트 전용 솔루션입니다. padding 공간을 정의합니다. 여전히 동일한 결과이지만 더 복잡한 구문을 사용합니다.

다른 아이디어를 시도해 보겠습니다.

이를 위해 이전 예제를 제거했습니다. outline, 그리고 적용 clip-path 각 면의 그라디언트를 자릅니다. 그만큼 clip-path 값은 약간 장황하고 혼란스럽습니다. 그러나 다음은 요점을 더 잘 볼 수 있는 그림입니다.

나는 당신이 주요 아이디어를 얻는다고 생각합니다. 배경, 윤곽선, 클리핑 및 일부 마스킹을 결합하여 다양한 종류의 장식을 만들 것입니다. 추가 보너스로 멋진 호버 애니메이션도 고려할 것입니다! 지금까지 살펴본 내용은 앞으로 나올 내용에 대한 작은 개요일 뿐입니다!

코너 전용 프레임

이것은 XNUMX개의 그라디언트를 취합니다. 각 그라디언트는 한 모서리를 덮고 마우스를 가져가면 확장하여 이미지 주위에 전체 프레임을 만듭니다. 그라디언트 중 하나에 대한 코드를 분석해 보겠습니다.

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

우리는 다음과 같은 크기의 그라디언트를 그릴 것입니다. 50px 50px 왼쪽 상단 모서리(0 0). 그라디언트 구성의 경우 해당 결과에 도달한 방법을 보여주는 단계별 그림이 있습니다.

우리는 그라디언트가 두 색상 간의 전환에만 적합하다고 생각하는 경향이 있습니다. 그러나 실제로 우리는 그들과 함께 훨씬 더 많은 일을 할 수 있습니다! 다양한 모양을 만들 때 특히 유용합니다. 트릭은 부드러운 전환이 아닌 위의 예와 같이 색상 사이에 하드 스톱이 있는지 확인하는 것입니다.

#0000 25%, darkblue 0

이것은 기본적으로 "그라디언트를 투명 색상으로 채울 때까지 25% 영역의 나머지 영역을 채우십시오. darkblue.

머리를 긁적일 수 있습니다. 0 값. 구문을 단순화하는 것은 약간의 해킹입니다. 실제로, 우리는 이것을 사용하여 색상 사이에 하드 스톱을 만들어야 합니다.

#0000 25%, darkblue 25%

그것이 더 논리적입니다! 투명한 색상은 다음에서 끝납니다. 25% 및 darkblue 투명도가 끝나는 곳에서 정확히 시작하여 하드 스톱을 만듭니다. 두 번째 것을 다음으로 대체하면 0, 브라우저는 우리를 위해 일을 할 것이므로 그것에 대해 조금 더 효율적인 방법입니다.

어딘가에 사양, 그것은 말합니다 :

만약 컬러 스톱 or 전환 힌트 목록에서 그 앞에 있는 색상 정지점 또는 전환 힌트의 지정된 위치보다 작은 위치가 있는 경우 해당 위치를 그 앞에 있는 색상 정지점 또는 전환 힌트의 지정된 가장 큰 위치와 같도록 설정합니다.

0 는 항상 다른 값보다 작으므로 브라우저는 항상 이를 선언에서 앞에 오는 가장 큰 값으로 변환합니다. 우리의 경우 그 숫자는 25%.

이제 모든 모서리에 동일한 논리를 적용하고 다음 코드로 끝냅니다.

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

모든 그라디언트가 동일한 색상 구성을 사용하므로 일부 중복을 피하기 위해 CSS 변수를 도입했습니다.

호버 효과의 경우 전체 프레임을 만들기 위해 그라디언트의 크기를 늘리는 것뿐입니다.

img:hover {
  background-size: 51% 51%;
}

네 그렇습니다 51% 대신 50% — 작은 겹침을 만들고 가능한 간격을 피합니다.

동일한 기술을 사용하여 다른 아이디어를 시도해 보겠습니다.

이번에는 두 개의 그라디언트만 사용하지만 더 복잡한 애니메이션을 사용합니다. 먼저 각 그라디언트의 위치를 ​​업데이트한 다음 크기를 늘려 전체 프레임을 만듭니다. 또한 색상, 크기, 두께 및 이미지와 프레임 사이의 간격을 더 잘 제어하기 위해 더 많은 변수를 도입했습니다.

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

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

왜해야합니까? --_i 및 --_p 변수 이름에 밑줄이 있습니까? 밑줄은 코드를 최적화하는 데 사용되는 "내부" 변수를 고려하는 데 사용하는 명명 규칙의 일부입니다. 그것들은 특별하지 않지만 프레임을 제어하기 위해 조정하는 변수 사이에 차이를 만들고 싶습니다(예: --b, --c등) 및 코드를 더 짧게 만드는 데 사용합니다.

코드가 혼란스럽고 이해하기 쉽지 않을 수 있지만 XNUMX부작 시리즈 내가 그러한 기술을 자세히 설명하는 곳. 위의 코드에 도달한 방법을 이해하려면 최소한 첫 번째 기사를 읽는 것이 좋습니다.

다음은 다양한 값을 더 잘 이해하기 위한 그림입니다.

프레임 공개

호버에서 전체 프레임을 표시하는 다른 유형의 애니메이션을 시도해 보겠습니다.

멋지죠? 그리고 자세히 보면 마우스 아웃 시 반대 방향으로 선이 사라지고 효과가 더욱 화려해지는 것을 알 수 있습니다! 나는 비슷한 효과를 사용 이전 기사.

그러나 이번에는 모든 요소를 ​​덮는 대신 정의하여 작은 부분만 덮습니다. height 다음과 같은 것을 얻으려면 :

이것은 프레임의 상단 테두리입니다. 이미지의 각 측면에서 동일한 프로세스를 반복하고 호버 효과를 얻습니다.

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

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

보시다시피 동일한 그라디언트를 네 번 적용하고 있으며 각 그라디언트는 한 번에 한 면만 덮는 위치가 다릅니다.

다른 것? 갑시다!

이것은 약간 까다로워 보이며 실제로 두 개의 원뿔형 그라디언트가 이러한 종류의 마법을 끌어내는 방법을 이해하려면 약간의 상상력이 필요합니다. 다음은 그라디언트 중 하나를 설명하는 데모입니다.

의사 요소는 그라디언트를 시뮬레이션합니다. 처음에는 보이지 않고 마우스를 가져가면 먼저 위치를 변경하여 프레임의 상단 가장자리를 얻습니다. 그런 다음 높이를 높여 오른쪽 가장자리를 얻습니다. 그라디언트 모양은 지난 섹션에서 사용한 것과 유사합니다. 두 개의 면을 덮는 두 개의 세그먼트입니다.

그런데 왜 그래디언트의 너비를 만들었습니까? 200%? 당신은 생각합니다 100% 충분하겠죠?

100% 충분해야하지만 너비를 동일하게 유지하면 원하는대로 그라디언트를 이동할 수 없습니다. 100%. 그것은 방법과 관련된 또 다른 작은 단점입니다. background-position 공장. 나는 이것을 덮는다. 이전 기사. 나도 Stack Overflow에 답변을 게시했습니다. 이것을 다루는 것. 나는 그것이 많은 독서라는 것을 알고 있지만, 당신의 시간이 정말로 가치가 있습니다.

이제 하나의 그래디언트에 대한 논리를 설명했으므로 두 번째 그래디언트는 동일한 작업을 수행하지만 대신 왼쪽 및 아래쪽 가장자리를 덮기 때문에 쉽습니다. 우리가 해야 할 일은 몇 가지 값을 바꾸는 것뿐입니다.

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

  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;
}

보시다시피 두 기울기는 거의 동일합니다. 나는 단순히 크기와 위치의 값을 교환하고 있습니다.

프레임 회전

이번에는 이미지 주위에 프레임을 그리지 않고 기존 이미지의 모양을 조정합니다.

당신은 아마 내가 직선을 각진 선으로 변환할 수 있는 방법을 묻고 있을 것입니다. 아니, 마법은 그것과 다르다. 이것은 XNUMX개의 그라디언트에 대한 간단한 애니메이션을 결합한 후 얻는 환상일 뿐입니다.

상단 그라디언트의 애니메이션이 어떻게 만들어지는지 보겠습니다.

나는 단순히 반복되는 그라디언트의 위치를 ​​업데이트하고 있습니다. 아직 멋진 것은 없습니다! 오른쪽에 대해서도 동일한 작업을 수행해 보겠습니다.

트릭이 보이기 시작했습니까? 두 그라디언트가 모서리에서 교차하여 직선이 각진 선으로 변경되는 착시를 만듭니다. 아웃라인을 제거하고 오버플로를 숨겨서 더 잘 보이도록 합시다.

이제 나머지 가장자리를 덮기 위해 두 개의 그라디언트를 더 추가하면 완료됩니다.

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

이 코드를 가져와 약간 조정하면 또 다른 멋진 애니메이션을 얻을 수 있습니다.

이 예에서 논리를 이해할 수 있습니까? 그게 네 숙제야! 코드가 무섭게 보일 수 있지만 이전에 살펴본 예제와 동일한 논리를 사용합니다. 각 그라디언트를 분리하고 어떻게 움직이는지 상상해 보십시오.

최대 포장

한 기사에 많은 그라디언트가 있습니다!

그것은 확실하고 나는 당신에게 경고했습니다! 그러나 문제가 추가 요소와 유사 요소 없이 이미지를 장식하는 것이라면 몇 가지 가능성만 남게 되며 그라디언트가 가장 강력한 옵션입니다.

일부 설명에서 약간 길을 잃더라도 걱정하지 마십시오. 저는 항상 이 챌린지를 위해 재활용한 몇 가지 개념에 대해 더 자세히 설명하는 오래된 기사를 추천합니다.

이 시리즈의 다음 기사까지 여러분을 기다리게 하기 위해 마지막 데모를 하나 남기고 떠나겠습니다. 이번에 제가 사용하고 있는 radial-gradient() 또 다른 재미있는 호버 효과를 만듭니다. 코드를 분석하여 작동 방식을 알아보겠습니다. 막히면 댓글로 질문해주세요!