얼마나 자주 CSS에 접근합니까? background-size 재산? 당신이 저와 같다면 — 그리고 아마도 다른 많은 프론트엔드 사람들이 — 그럴 것입니다. background-size: cover 전체 요소의 공간을 채우는 이미지.
글쎄, 나는 더 고급 배경 크기 조정이 필요한 흥미로운 도전 과제를 제시받았습니다. 바로 호버링 시 전환되는 배경 줄무늬입니다. 이것을 확인하고 커서로 가리키십시오.
배경의 크기보다 훨씬 더 많은 일이 벌어지고 있지만 줄무늬를 전환하는 데 필요한 트릭이었습니다. 정말 멋진 시각적 효과일 뿐만 아니라 여러분이 즐길 수 있는 그라디언트와 블렌드 모드로 창의력을 발휘해야 했기 때문에 제가 어떻게 거기에 도달했는지 보여드릴 것이라고 생각했습니다.
간단하게 유지하기 위해 매우 기본적인 설정부터 시작하겠습니다. 나는 싱글에 대해 이야기하고있다
녹색 사각형으로 스타일이 지정된 HTML에서:
div {
width: 500px;
height: 500px;
background: palegreen;
}배경 줄무늬 설정
이러한 줄무늬를 보았을 때 마음이 CSS 선형 그래디언트에 곧바로 갔다면 우리는 이미 같은 페이지에 있는 것입니다. 이 경우 줄무늬가 고르지 않은 공간을 차지하고 전환하기를 원하기 때문에 반복되는 그라디언트를 정확히 수행할 수는 없지만 기존 배경색 위에 XNUMX개의 배경을 연결하고 맨 위에 배치하여 XNUMX개의 줄무늬를 만들 수 있습니다. -컨테이너 오른쪽:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}저는 가로 줄무늬를 만들었지만 여기서 다루는 접근 방식으로 세로 줄무늬를 만들 수도 있습니다. 그리고 사용자 정의 속성을 사용하여 이를 상당히 단순화할 수 있습니다.
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}그래서, --gt 값은 기울기이고 --n 줄무늬가 수직으로 오프셋되도록 줄무늬를 아래쪽으로 조금씩 이동하는 데 사용하는 상수입니다. 그리고 제가 진정한 그라디언트를 설정하지 않고 오히려 검은색 줄무늬를 linear-gradient() 기능 — 그것은 의도적이며 내가 왜 그렇게 했는지 조금 후에 알게 될 것입니다.
계속 진행하기 전에 해야 할 또 다른 작업은 배경이 반복되지 않도록 하는 것입니다. 그렇지 않으면 전체 공간을 타일로 채우고 채웁니다.
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}우리는 설정할 수 background-repeat FBI 증오 범죄 보고서 background 속기이지만 읽기 쉽게 유지하기 위해 여기에서 분리하기로 결정했습니다.
줄무늬 오프셋
기술적으로는 줄무늬가 있지만 줄무늬 사이에 간격이 없고 전체 컨테이너를 덮기 때문에 구별하기가 매우 어렵습니다. 마치 단색의 검은색 사각형이 있는 것과 같습니다.
이것은 우리가 background-size 재산. 우리는 줄무늬의 높이와 너비를 모두 설정하려고 하며 속성은 정확히 그렇게 할 수 있도록 하는 두 개의 값 구문을 지원합니다. 그리고 쉼표로 구분하여 해당 크기를 연결할 수 있습니다. background.
너비를 먼저 설정하여 간단하게 시작하겠습니다. 단일 값 구문 사용 background-size 너비를 설정하고 높이를 기본값으로 auto. 여기서는 완전히 임의의 값을 사용하고 있으므로 디자인에 가장 적합한 값으로 설정합니다.
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}나와 같은 값을 사용하는 경우 다음과 같은 결과를 얻을 수 있습니다.
모든 줄무늬의 너비를 설정한 것처럼 보이지 않습니까? 그 이유는 auto 단일 값 구문의 높이 동작. 두 번째 줄무늬는 그 아래에 있는 다른 줄무늬보다 폭이 넓고 두 번째 줄무늬를 덮고 있습니다. 작업을 볼 수 있도록 높이를 설정해야 합니다. 그것들은 모두 같은 높이여야 하고 우리는 실제로 우리의 것을 재사용할 수 있습니다. --n 간단하게 유지하기 위해 다시 변수를 사용합니다.
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}아, 훨씬 낫다!
스트라이프 사이에 간격 추가
디자인에 스트라이프 사이에 간격이 필요하지 않은 경우 완전히 선택적인 단계이지만 내 경우에는 그랬고 지나치게 복잡하지 않습니다. 각 줄무늬의 높이를 변경합니다. background-size 전체 수직 공간을 채우지 못하도록 값을 약간 줄입니다.
우리는 계속 사용할 수 있습니다 --n 가변적이지만 소량을 뺍니다. 5px사용하여, calc() 우리가 원하는 것을 얻기 위해.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);이는 다른 변수로 제거할 수 있는 많은 반복입니다.
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}마스킹 및 블렌딩
이제 교환을 해보자 palegreen 지금까지 흰색에 대해 시각적 목적으로 사용해 온 배경색입니다.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}이와 같은 흑백 패턴은 마스킹 및 블렌딩에 적합합니다. 이를 위해 먼저
새 상위 컨테이너에 두 번째를 도입합니다.
그 아래:
여기서 약간의 CSS 리팩터링을 수행할 것입니다. 이제 새로운 상위 컨테이너가 있으므로 고정된 컨테이너를 전달할 수 있습니다. width 및 height 우리가 사용하고 있던 속성
저기:
section {
width: 500px;
height: 500px;
} 또한 CSS 그리드를 사용하여 두
서로의 위에 요소. 이것은 Temani Afif가 자신의 슈퍼 멋진 이미지 갤러리. 아이디어는 다음을 사용하여 전체 컨테이너 위에 두 div를 배치한다는 것입니다. grid-area 속성을 지정하고 모든 것을 중앙으로 정렬합니다.
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}이제 이것을 확인하십시오. 이전에 검은색에서 검은색으로 가는 단색 그라데이션을 사용한 이유는 둘을 마스킹하고 블렌딩하도록 설정하기 위해서입니다.
레이어. 이것은 우리가 mask 속성이지만 레이어 간의 대비는 표시되는 색상을 제어합니다. 흰색으로 덮인 부분은 흰색으로 남고 검은색으로 덮인 부분은 새어 나옵니다. 블렌드 모드에 대한 MDN 문서 이것이 어떻게 작동하는지에 대한 좋은 설명이 있습니다.
이를 작동시키기 위해 첫 번째 화면에서 보고자 하는 실제 그래디언트를 적용하겠습니다.
초기 스타일 규칙을 적용하면서
새로운 것에서 :nth-child() 의사 선택자:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}여기서 멈추면 실제로 이전과 시각적인 차이를 볼 수 없습니다. 실제 블렌딩을 아직 수행하지 않았기 때문입니다. 이제 screen 혼합 모드:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}이 기사의 시작 부분에서 보여드린 데모에서 베이지색 배경색을 사용했습니다. 약간 더 어두운 종류의 회백색 색상을 사용하면 배경의 나머지 부분에 약간의 색상이 번질 수 있습니다.
호버 효과
이 퍼즐의 마지막 조각은 줄무늬를 전체 너비로 넓히는 호버 효과입니다. 먼저 선택자를 작성해 보겠습니다. 부모 컨테이너(
우리의 경우) 호버링됩니다. 가리키면 두 번째에 포함된 줄무늬의 배경 크기가 변경됩니다.
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} 우리는 background-size 동일한 높이를 유지하면서 스트라이프를 컨테이너의 전체 너비로 늘립니다.
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}그러면 배경이 전체 너비로 "스냅"됩니다. 조금 더해보자면 transition 그러면 호버에서 줄무늬가 확장되는 것을 볼 수 있습니다.
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}다음은 최종 데모입니다.
나는 다른 맥락에서 이것을 사용하는 것이 어떻게 보일지 보여주기 위해 거기에 텍스트를 추가했을 뿐입니다. 동일한 작업을 수행하는 경우 텍스트 색상과 그래디언트에 사용된 색상 사이에 충분한 대비가 있는지 확인하는 것이 좋습니다. WCAG 지침. 접근성에 대해 간략히 살펴보는 동안 움직임 감소에 대한 사용자 선호도 고려 호버 효과에 관해서.
그게 끝입니다!
꽤 깔끔하죠? 나는 확실히 그렇게 생각한다. 이것에 대해 내가 좋아하는 점은 꽤 유지 관리가 가능하고 사용자 정의가 가능하다는 것입니다. 예를 들어 몇 가지 값을 변경하여 줄무늬의 높이, 색상 및 방향을 변경할 수 있습니다. 색상 및 너비와 같은 몇 가지 사항을 가변화하여 훨씬 더 구성 가능하도록 만들 수도 있습니다.
다른 방식으로 접근했다면 정말 관심이 있습니다. 그렇다면 댓글로 공유해주세요! 우리가 수집할 수 있는 변형의 수를 확인하는 것이 좋을 것입니다.
