Jak często sięgasz po CSS background-size własność? Jeśli jesteś taki jak ja — i prawdopodobnie wielu innych ludzi zajmujących się front-endem — to zwykle wtedy, gdy ty background-size: cover obraz wypełniający przestrzeń całego elementu.
Cóż, postawiono mnie przed interesującym wyzwaniem, które wymagało bardziej zaawansowanego rozmiaru tła: paski tła, które zmieniają się po najechaniu myszką. Sprawdź to i najedź na nie kursorem:
Dzieje się tam o wiele więcej niż rozmiar tła, ale to była sztuczka, której potrzebowałem, aby paski przeszły. Pomyślałem, że pokażę ci, jak do tego doszedłem, nie tylko dlatego, że uważam, że jest to naprawdę fajny efekt wizualny, ale dlatego, że wymagało to ode mnie kreatywnego podejścia do gradientów i trybów mieszania, które, jak sądzę, mogą ci się spodobać.
Zacznijmy od bardzo podstawowej konfiguracji, aby wszystko było proste. Mówię o jedynce
w kodzie HTML stylizowanym na zielony kwadrat:
div {
width: 500px;
height: 500px;
background: palegreen;
}Ustawianie pasków tła
Jeśli twój umysł skierował się prosto do liniowego gradientu CSS, gdy zobaczyłeś te paski, to jesteśmy już na tej samej stronie. W tym przypadku nie możemy dokładnie wykonać powtarzającego się gradientu, ponieważ chcemy, aby paski zajmowały nierówną ilość miejsca i przechodziły między nimi, ale możemy utworzyć pięć pasków, łącząc pięć teł na naszym istniejącym kolorze tła i umieszczając je na górze -prawo kontenera:
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;
}Zrobiłem poziome paski, ale możemy też przejść w pionie, stosując podejście, które tutaj omawiamy. Możemy to nieco uprościć za pomocą niestandardowych właściwości:
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;
}Tak więc, --gt wartość to gradient i --n to stała, której używamy do przesunięcia pasków w dół, aby były przesunięte w pionie. I być może zauważyłeś, że nie ustawiłem prawdziwego gradientu, ale raczej solidne czarne paski w linear-gradient() function — jest to zamierzone i za chwilę przejdziemy do tego, dlaczego to zrobiłem.
Jeszcze jedną rzeczą, którą powinniśmy zrobić, zanim przejdziemy dalej, jest zapobieganie powtarzaniu się naszego tła; w przeciwnym razie ułożą się i wypełnią całą przestrzeń:
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;
}Mogliśmy ustawić background-repeat background skrót, ale zdecydowałem się to tutaj rozbić, aby ułatwić czytanie.
Zrównoważenie pasków
Technicznie rzecz biorąc, mamy paski, ale trudno to stwierdzić, ponieważ nie ma między nimi odstępów i pokrywają cały pojemnik. To bardziej tak, jakbyśmy mieli solidny czarny kwadrat.
W tym miejscu możemy skorzystać z tzw background-size własność. Chcemy ustawić zarówno wysokość, jak i szerokość pasków, a właściwość obsługuje składnię dwuwartościową, która pozwala nam dokładnie to zrobić. I możemy połączyć te rozmiary, oddzielając je przecinkami w taki sam sposób, jak zrobiliśmy to background.
Zacznijmy od prostego ustawienia najpierw szerokości. Używanie składni jednowartościowej dla background-size ustawia szerokość i domyślną wysokość auto. Używam tutaj całkowicie dowolnych wartości, więc ustaw wartości na takie, które najlepiej pasują do twojego projektu:
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%;
}Jeśli używasz tych samych wartości, co ja, otrzymasz to:
Nie wygląda to tak, jakbyśmy ustawili szerokość dla wszystkich pasków, prawda? To z powodu auto zachowanie wysokości składni pojedynczej wartości. Drugi pasek jest szerszy niż pozostałe poniżej i zakrywa je. Powinniśmy ustawić wysokość tak, żebyśmy mogli zobaczyć naszą pracę. Wszystkie powinny być tej samej wysokości i faktycznie możemy ponownie wykorzystać nasze --n zmienna, ponownie, aby uprościć sprawę:
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
}Ach, dużo lepiej!
Dodanie odstępów między paskami
Jest to całkowicie opcjonalny krok, jeśli twój projekt nie wymaga przerw między paskami, ale mój tak zrobił i nie jest zbyt skomplikowany. Zmieniamy wysokość każdego paska background-size odrobinę, zmniejszając wartość, aby nie wypełniły całej pionowej przestrzeni.
Możemy nadal korzystać z naszego --n zmiennej, ale odejmij niewielką ilość, powiedzmy 5pxZa pomocą calc() aby dostać to, czego chcemy.
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);To dużo powtórzeń, które możemy wyeliminować za pomocą innej zmiennej:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maskowanie i mieszanie
Teraz zamieńmy palegreen kolor tła, którego do tej pory używaliśmy do celów wizualnych dla bieli.
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. */
}Czarno-biały wzór, taki jak ten, jest idealny do maskowania i mieszania. Aby to zrobić, najpierw zawijamy nasze
w nowym kontenerze nadrzędnym i wprowadzić drugi
pod tym:
Zrobimy tutaj mały refaktoring CSS. Teraz, gdy mamy nowy kontener nadrzędny, możemy przekazać plik fixed width i height właściwości, których używaliśmy na naszym
tam:
section {
width: 500px;
height: 500px;
} Zamierzam również użyć CSS Grid do ustawienia tych dwóch
elementy jeden na drugim. To jest ta sama sztuczka, której Temani Afif używa do stworzenia swojego super fajne galerie zdjęć. Pomysł polega na tym, że umieszczamy oba elementy div nad pełnym kontenerem, używając metody grid-area property i wyrównaj wszystko w kierunku środka:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}A teraz sprawdź to. Powodem, dla którego wcześniej użyłem solidnego gradientu, który przechodzi od czerni do czerni, jest przygotowanie nas do maskowania i mieszania tych dwóch
warstwy. To nie jest prawdziwe maskowanie w tym sensie, że nazywamy to mask właściwość, ale kontrast między warstwami decyduje o tym, jakie kolory są widoczne. Obszar pokryty bielą pozostanie biały, a obszar pokryty czernią będzie przeciekał. Dokumentacja MDN dotycząca trybów mieszania ma ładne wyjaśnienie, jak to działa.
Aby to zadziałało, zastosuję rzeczywisty gradient, który chcemy zobaczyć na pierwszym
stosując zasady stylu z naszego inicjału
na nowym, używając :nth-child() pseudo-selektor:
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);
}Jeśli zatrzymamy się tutaj, właściwie nie zobaczymy żadnej wizualnej różnicy w stosunku do tego, co mieliśmy wcześniej. To dlatego, że nie zrobiliśmy jeszcze właściwego mieszania. Więc zróbmy to teraz za pomocą screen tryb mieszania:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Użyłem beżowego koloru tła w demo, które pokazałem na początku tego artykułu. Ten nieco ciemniejszy rodzaj złamanej bieli pozwala odrobinie koloru przeniknąć przez resztę tła:
Efekt zawisu
Ostatnim elementem tej układanki jest efekt zawisu, który poszerza paski do pełnej szerokości. Najpierw napiszmy dla niego nasz selektor. Chcemy, aby tak się stało, gdy kontener nadrzędny (
w naszym przypadku) jest zawieszony. Po najechaniu kursorem zmienimy rozmiar tła pasków zawartych w drugim
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Będziemy chcieli zmienić background-size pasków na całą szerokość pojemnika przy zachowaniu tej samej wysokości:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}To „przyciąga” tło do pełnej szerokości. Jeśli dodamy trochę transition do tego widzimy, jak paski rozszerzają się po najechaniu kursorem:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Oto ostateczne demo jeszcze raz:
Dodałem tam tylko tekst, aby pokazać, jak mogłoby wyglądać użycie tego w innym kontekście. Jeśli zrobisz to samo, warto upewnić się, że kontrast między kolorem tekstu a kolorami użytymi w gradiencie jest wystarczający, aby zachować zgodność wytyczne WCAG. I chociaż dotykamy krótko dostępności, warto biorąc pod uwagę preferencje użytkownika dotyczące ograniczonego ruchu jeśli chodzi o efekt zawisu.
To okład!
Całkiem schludnie, prawda? Myślę, że tak. Podoba mi się również to, że jest łatwy w utrzymaniu i dostosowywalny. Na przykład możemy zmienić wysokość, kolory i kierunek pasków, zmieniając kilka wartości. Możesz nawet zmienić tam jeszcze kilka rzeczy — takich jak kolory i szerokości — aby uczynić go jeszcze bardziej konfigurowalnym.
Jestem naprawdę zainteresowany, gdybyś podszedł do tego w inny sposób. Jeśli tak, podziel się w komentarzu! Fajnie byłoby zobaczyć, ile odmian możemy zebrać.
