Kiedy umieścisz coś – powiedzmy zwykłą kartkę papieru – w teczce z manilli, część tej rzeczy może trochę wyjrzeć z folderu. To samo z portfelem i kartami kredytowymi. Karty wystają tylko odrobinę, dzięki czemu możesz szybko sprawdzić, które karty nosisz.
Nazywam to „szczeliną”. Szczelina to miejsce, w którym tworzymy iluzję otworu, przez który możemy wydobyć wystający z niej element wizualny. I możemy to zrobić w CSS!
Kluczową częścią projektu jest cień, który daje wizualną wskazówkę, że jest szczelina. Do tego dochodzi osłona szczeliny, która zapewnia przestrzeń dla eksponowanego elementu do zajrzenia od spodu.
Oto, co zamierzamy zrobić razem:
Zacznijmy od stworzenia cienia
Możesz być zaskoczony, że cień w przykładzie nie jest tworzony za pomocą rzeczywistego cienia CSS, tak jak box-shadow lub drop-shadow() filtr. Zamiast tego cień sam w sobie jest osobnym elementem, ciemnym i rozmytym. Jest to ważne, aby projekt był bardziej elastyczny, zarówno w stanie domyślnym, jak i animowanym.
Drugim elementem projektu jest okładka. Okładka jest tym, co nazywam elementem, który nakłada się na cień. Oto rysunek przedstawiający, jak cień i okładka łączą się.
Cień składa się z małego pionowego prostokąta z gradientowym tłem. Gradient jest ciemniejszy w środku. Więc kiedy element jest rozmyty, tworzy cień ciemniejszy w środku; stąd bardziej wymiarowy.
Teraz lewa połowa odtworzonego cienia jest pokryta prostokątem na górze, pokolorowanym dokładnie tak samo jak tło pojemnika.
Zarówno okładka, jak i cień są następnie delikatnie przesuwane w lewo, więc wydaje się, że są ułożone warstwami
Praca na okładce
Aby okładka wtapiała się w tło projektu, jej kolor tła jest dziedziczony z elementu zawierającego. Alternatywnie możesz również spróbować zmieszać okładkę z tłem, stosując standardy takie jak Maski CSS i tryby mieszania, w zależności od wyborów i wymagań projektowych.
Aby poznać podstawowe informacje o tym, jak te standardy mogą być stosowane, możesz zapoznać się z następującymi artykułami: Sarah Drasner „Maskowanie a przycinanie: kiedy używać każdego” stanowi doskonały podkład na maseczki. Pisałem też o trybach mieszania CSS w tym artykule gdzie możesz odświeżyć temat.
W kodzie źródłowym mojego przykładu zauważysz, że wyrównałem i ułożyłem elementy wewnątrz
CSS Grid również pozwala mi na ustawienie wszystkich trzech divs więc wszystkie mają pełną szerokość w
main > div {
grid-area: 1 / 1;
}Dzięki temu wszystko układa się jeden na drugim. Zwykle ciężko pracujemy, aby uniknąć zasłaniania elementów innymi elementami w siatce. Ale ten przykład na tym polega. dałem .slit-cover o szerokości 50%, co w naturalny sposób uwidacznia znajdujący się pod nim obraz. Stamtąd ustawiłem transform na nim, który przesuwa go o 50% w kierunku ujemnym, plus mała ilość przesunęłam wcześniej cień (25px), aby upewnić się, że to również zostanie ujawnione.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Mamy to! Całkiem naturalnie wyglądająca szczelina, która naśladuje coś wystającego z folderu, portfela lub czegokolwiek.
Jest na to więcej sposobów! Po pierwsze, Flexbox może ustawić elementy w rzędzie i wyrównać do środka w ten sposób. Istnieje wiele sposobów na łączenie rzeczy obok siebie. A może masz sposób na wykorzystanie box-shadow własność, drop-shadow() filtrować, a nawet Filtry SVG aby uzyskać ten sam rodzaj efektu cienia, który naprawdę sprzedaje iluzję.
I możesz to całkowicie riffować, aby uzyskać własny wygląd i styl. Na przykład spróbuj zamienić pozycję cienia i obrazu. Lub pobaw się kombinacjami kolorów i zmień blur() filtrować wartość. Kształt okładki i cienia również można modyfikować — założę się, że zamiast prostego można stworzyć zakrzywiony cień i podzielić się nim z nami w komentarzach!
