Jak nakładać efekt tylko na CSS za pomocą Box-Shadow

Nakładki zawartości są ważną częścią nowoczesnego projektowania stron internetowych. Pomagają ci ukryj element na stronie internetowej, a później - za zgodą użytkownika - ujawnij to, i wyświetlać dodatkowe informacje lub elementy sterujące, takie jak przyciski za nim.

Typowa nakładka to półprzezroczysty, z jednolity kolor tła (zazwyczaj czarny), a na nim jest tekst lub przyciski, które użytkownicy mogą zobaczyć lub z którymi mogą się kontaktować. Po interakcji (kliknięcie lub zawisnięcie) nakładka zostaje usunięty i ujawnia treść pod nim.

W tym artykule przyjrzymy się, jak to zrobić dodaj kolorową nakładkę do obrazów używając czystego CSS. Możesz zobaczyć wynik końcowy na poniższej wersji demonstracyjnej. Najedź kursorem, aby nakładki ujawniły pokemony. Chociaż ten post omawia obrazy, technika, którą prezentuje, może być bezpiecznie zastosowana również do innych typów treści (takich jak bloki tekstu).

Unikaj dodawania dodatkowych elementów HTML

Nakładki są często tworzone przez pozycjonowanie dodatkowego elementu HTML z nieprzezroczystość wartość mniejsza niż 1 tuż nad elementem, który ma być zakryty. Problem polega na tym, że ta technika wymaga użycia dodatkowy element (lub pseudoelement) dla nakładki.

Jeśli nie jesteś pedantycznym rozmiarem HTML, posiadanie dodatkowego elementu do nakładki prawdopodobnie nie jest wielkim problemem, ponieważ najprawdopodobniej nie obciąży tak bardzo przepustowości żadnej sieci. Jednak mając oddzielny reguły stylów dla elementów i ich nakładek nadal szkodzą czytelności CSS i łatwości konserwacji.

Aby utrzymać swój kod w porządku, a nie zepsuć konspektu HTML, lepiej jest użyć rozwiązania opartego tylko na CSS.

Utwórz nakładkę za pomocą box-shadow

Jak więc można utworzyć nakładkę tylko dla CSS? Z pomocą box-shadow Właściwość CSS. Box-shadow jest idealny do tego zadania, ponieważ to, co jest nakładką, ale ciemny cień rzucony na element?

Pole-cień ma wartość właściwości o nazwie wstawka, co powoduje pojawienie się cienia do wewnątrz ramy pudełka.

Wstawione pole-cień z połową lub więcej niż połową szerokości i wysokości elementu tworzy cień obejmuje Cały element.

 .box szerokość: 200px; wysokość: 200px; box-shadow: zielony 0 0 0 100px wstawka;  

Od zwykle nakładek mieć pewną przejrzystość, musisz także dodać go do cienia skrzynki. Można to zrobić za pomocą rgba () funkcja koloru cienia.

The rgb część wartości kanału koloru rgba, reprezentuje kolor czerwony, zielony i niebieski za reprezentuje kanał alfa, który jest odpowiedzialny za przejrzystość.

Dla kanału alfa wartość 1 tworzy nieprzezroczysty kolor, podczas gdy 0 tworzy a w pełni przezroczysty kolor.

Przez przypisanie wartości z zakresu od 0 do 1 do kanału alfa wartości koloru rgba cienia skrzynki można utwórz półprzezroczystą nakładkę.

Utwórz kod demonstracyjny

Nasze demo pokaże zdjęcia i nazwy różnych pokemonów. Tutaj utworzymy tylko kod Bulbasaura, pierwszego pokemona w demie, ponieważ pozostałe są w ten sam sposób (na Codepen możesz również sprawdzić kod dla nich).

HTML

W przypadku HTML musimy tylko utwórz pudełko do którego dodamy wszystko inne za pomocą CSS.

CSS

W poniższym CSS .pokemon elementy wyświetlają obrazy pokemonów i .pokemon :: po pseudoelementy noszą nazwę pokemona.

Od box-shadow własność może przyjmować wiele wartości w celu renderuj wiele cieni, oprócz cienia nakładki dodałem również inne cienie szarości do .pokemon i .pokemon: hover elementy estetyki.

 / * zdjęcia pokemona * / .pokemon szerokość: 200px; wysokość: 200px; / * treść środkowa przy użyciu flex box * / display: flex; justify-content: center; align-items: center; / * overlay * / box-shadow: 0 0 0 100px wstawka, 0 0 5px szary; / * przejście do najechania * / przejście: box-shadow 1s;  / * nazwy pokemonów * / .pokemon :: after width: 80%; wysokość: 80%; Blok wyświetlacza; czcionka: 16pt „stary styl bukmachera”; kolor biały; border: 2px solid; wyrównywanie tekstu: środek; / * treść środkowa przy użyciu flex box * / display: flex; justify-content: center; align-items: center; / * przesuń kursor * / przejście: krycie 1s .5s;  / * odsłonić obraz pokemona na hover * / .pokemon: hover przejście: box-shadow 1s; box-shadow: 0 0 0 5px wstawka, 0 0 5px szary, 0 0 10px szara wstawka;  / * ukryj nazwę pokemona na hover * / .pokemon: hover :: after przejście: krycie .5s; krycie: 0;  

Kiedy .pokemon elementy są zawieszone, ich cień pudła musi się zmienić, aby odsłonić obraz z tyłu.

Widać, że .pokemon: hover selektor otrzymuje nowy shadow-box, który usuwa nakładkę i .pokemon: hover :: after selektor ukrywa nazwę pokemona za pomocą nieprzezroczystość własność.

Być może zauważyłeś brak wartości kolorów w polu nakładki cienie w .pokemon i .pokemon: hover zasady stylu. Należy określić kolor nakładki-cienia poszczególnych pokemonów we własnych osobnych zasadach stylu, ponieważ wszystkie różnią się od siebie.

Tak jak box-shadow nie ma żadnych własności długich, nie można ustawić koloru cienia indywidualnie z czymś takim, pudełko-cień-kolor; zamiast tego - używamy kolor własność.

Domyślnie, gdy podajesz wartość dla kolor właściwość, ta wartość jest stosowane do obramowania, konturu i kolorów pudełka-cienia także. Możesz więc po prostu użyć kolor właściwość, aby dodać kolor do pola-cienia.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * wartość koloru używana w polu koloru cienia * / kolor: rgba (71, 121, 94, 0.9);  #bulbasaur :: after / * nazwa pokemona * / treść: „Bulbasaur”;  

Kolor cienia nakładki używa wspomnianego powyżej rgba () funkcja z 0.9 dla wartości alfa, aby nakładka była przezroczysta.

Oprócz koloru nakładki-cienia, powyższy CSS dodaje również reguły, które są indywidualne dla każdego pokemona - obraz jako zdjęcie w tle i imię.

I to wszystko, jesteśmy gotowi z naszą kolorową nakładką na obraz CSS. Spójrz na kod wszystkich pokemonów w piórze poniżej.