우리는 이 XNUMX부작 시리즈의 마지막 두 기사에서 그래디언트를 사용하여 아무것도 사용하지 않고 정말 깔끔한 이미지 장식을 만들었습니다. outline 재산. 우리가 일반적으로 사용하기 때문에 이상하게 들릴 수 있습니다. outline 요소 주위에 간단한 선을 그리려면 — 일종의 border 그러나 한 번에 네 면만 그릴 수 있으며 Box Model의 일부가 아닙니다.
하지만 우리는 그것으로 더 많은 것을 할 수 있고 이것이 제가 이 기사에서 실험하고 싶은 것입니다.
팬시 이미지 데코레이션 시리즈
멋진 애니메이션과 함께 호버에서 사라지는 오버레이인 첫 번째 예부터 시작하겠습니다.
이미지 위에 추가 요소를 추가하여 이를 달성할 수 있지만 이것이 우리가 스스로 도전하는 것입니다. 지원 이 시리즈에서 할 것. 대신 CSS에 도달할 수 있습니다. outline 음수 오프셋을 가질 수 있고 해당 요소를 겹칠 수 있는 속성 및 레버리지.
img {
--s: 250px; /* the size of the image */
--b: 8px; /* the border thickness*/
--g: 14px; /* the gap */
--c: #4ECDC4;
width: var(--s);
aspect-ratio: 1;
outline: calc(var(--s) / 2) solid #0009;
outline-offset: calc(var(--s) / -2);
cursor: pointer;
transition: 0.3s;
}
img:hover {
outline: var(--b) solid var(--c);
outline-offset: var(--g);
}비결은 outline 이미지 크기의 절반만큼 두꺼운 다음 음수 값을 사용하여 이미지 크기의 절반만큼 오프셋합니다. 색상에 반투명도를 추가하면 오버레이가 생깁니다!
나머지는 다음에 일어나는 일입니다. :hover. 우리는 업데이트 outline 두 윤곽 사이의 전환은 멋진 호버 효과를 생성합니다. 같은 기술을 사용하여 페이딩 효과를 만들 수도 있습니다. outline 하지만 투명하게 만드십시오.
이 이미지 크기의 절반을 사용하는 대신 매우 큰 이미지 크기를 사용하고 있습니다. outline 두께 값(100vmax) CSS 마스크를 적용하는 동안. 이를 통해 더 이상 이미지 크기를 알 필요가 없습니다. 트릭은 모든 크기에서 작동합니다!
다음을 사용하여 문제에 직면할 수 있습니다. 100vmax Safari에서 큰 가치로. 그렇다면 교체하는 이전 트릭을 고려하십시오. 100vmax 이미지 크기의 절반으로.
우리는 더 많은 일을 할 수 있습니다! 예를 들어 단순히 여분의 outline, 모양을 만들고 멋진 공개 애니메이션을 적용할 수 있습니다.
멋지죠? 그만큼 outline 노란색 오버레이를 만드는 것입니다. 그만큼 clip-path 여분의 클립 outline 별 모양을 얻기 위해. 그런 다음 마우스를 올리면 색상을 투명하게 만듭니다.
오, 대신 마음을 원하십니까? 우리는 확실히 그렇게 할 수 있습니다!
우리가 만들 수 있는 모든 가능한 조합을 상상해 보십시오. 우리가 해야 할 일은 CSS 마스크 및/또는 clip-path 그리고 그것을 결합 outline 장난. 하나의 솔루션, 무한한 가능성!
그리고 네, 확실히 이것도 애니메이션으로 만들 수 있습니다. 잊지 말자 clip-path 애니메이션 가능하고 mask 그라디언트에 의존합니다. 이 시리즈의 처음 두 기사에서 아주 자세하게 다루었습니다.
애니메이션이 약간 결함이 있음을 알고 있습니다. 이것은 생산 현장에서 사용되는 "최종 제품"이라기보다는 아이디어를 설명하기 위한 데모에 가깝습니다. 보다 자연스러운 전환을 위해 최적화하고 싶습니다.
다음은 사용하는 데모입니다. mask 대신에. 마지막에 내가 널 놀렸던 사람이야 마지막 기사:
당신은 그 outline 재산이 그렇게 대단할 수 있었습니까? 멋진 이미지 장식을 위해 도구 상자에 추가하세요!
모든 것을 결합하십시오!
그래디언트, 마스크, 클리핑 및 윤곽선을 사용하여 많은 트릭을 배웠으므로 이제 그랜드 피날레를 할 시간입니다. 지난 몇 주 동안 배운 모든 것을 결합하여 기술을 보여줄 뿐만 아니라 이러한 접근 방식이 얼마나 유연하고 모듈화되어 있는지 보여줌으로써 이 시리즈를 마무리하겠습니다.
이 데모를 처음 본다면 이를 실행하는 데 사용되는 추가 divs 래퍼와 의사 요소가 많이 있다고 생각할 수 있습니다. 그러나 모든 것이 직접적으로 발생합니다.
최대 포장
음, 이런, 지난 몇 주 동안 이 XNUMX부작 시리즈에서 나와 어울려줘서 고마워. 우리는 단순한 이미지를 눈길을 끄는 인터랙티브한 이미지로 바꾸는 다양한 기술을 탐구했습니다. 우리가 다룬 모든 것을 사용하시겠습니까? 확실히! 하지만 이 글이 그래디언트, mask, clip-path및 outline.
그리고 우리는 단 하나로 모든 것을 했습니다.
