Как да CSS-само Overlays Ефект с Box-Shadow

Насложени съдържания са важна част от съвременния уеб дизайн. Те ви помагат скриете елемент на уеб страница, а по-късно - с одобрението на потребителя - разкрийте го, и показва допълнителна информация или контроли, като бутони зад нея.

Типичен слой е полупрозрачно, с твърд цвят на фона (обикновено черно) и има текст или бутони, на които потребителите да виждат или да си взаимодействат. След взаимодействие (щракване или зависване) настъпва наслагването се премахва и разкрива съдържанието под него.

В тази статия ще разгледаме как добавете цветно наслагване към изображения с помощта на чист CSS. По-долу можете да видите крайния резултат на демонстрацията. Задръжте изображенията, за да направите наслагванията да разкрият покемоните. Въпреки че този пост обсъжда изображения, техниката, която представя, може да бъде безопасно приложена и към други видове съдържание (като текстови блокове).

Избягвайте добавянето на допълнителни HTML елементи

Наслояванията често се създават от позициониране на допълнителен HTML елемент с непрозрачност стойност по-малка от 1 точно над елемента, който трябва да се покрие. Проблемът е, че тази техника включва използването на екстра елемент (или псевдо-елемент) за наслагването.

Ако не сте педантичен в размер на HTML, наличието на допълнителен елемент за наслагване вероятно не е голяма работа, тъй като най-вероятно няма да обложи много честотната лента на всяка мрежа. Въпреки това отделен стил правила за елементи и техните наслагвания все още вреди на четимостта и поддръжката на CSS.

За да запазите кода си в ред, а не да забърквате HTML контурите си, е по-добър избор да използвате само CSS-решение.

Създаване на наслагване с кутия сянка

И така, как може действително да създадете CSS-овърлей? С помощта на. \ T кутия сянка CSS собственост. Скринът на кутията е идеален за тази работа, тъй като това е овърлей, но тъмна сянка, хвърлена върху елемент?

Box-shadow има наричана стойност на свойство добавям, което причинява появата на сянка вътре в рамката на кутията.

Вмъкнатата сянка с размер на сянката на половината или повече от половината от ширината и височината на елемента създава сянка покрива цял елемент.

 .кутия ширина: 200px; височина: 200px; box-shadow: зелено 0 0 0 100px inset;  

Тъй като обикновено наслоявания имат известна прозрачност, трябва да го добавите и към полето сянка. Това може да стане с помощта на RGBA () функция за цвят на сянка.

Най- RGB част от rgba, представя стойностите на червения, зеления и синия цвят, докато а представлява алфа канал, кое е отговорност за прозрачността.

За алфа канал стойността от 1 създава непрозрачен цвят, докато 0 създава a напълно прозрачен цвят.

Като присвоите стойност между 0 и 1 на алфа канала на стойността на цвят rgba на сянката на кутията, можете създайте полупрозрачен слой.

Създайте кода за демонстрацията

Нашата демонстрация ще покаже изображенията и имената на различните покемони. Тук ще създадем само кода за Bulbasaur, първия pokemon в демото, тъй като другите са направени по същия начин (на Codepen можете да проверите кода и за тях).

HTML

За HTML, ние само трябва да създайте кутия към което ще добавим всичко останало с CSS.

CSS

В CSS по-долу, .Покемон елементите показват изображенията на Pokemon и .Покемон :: след псевдо-елементите носят името на Pokemon.

Тъй като кутия сянка Имот може да отнеме няколко стойности за да показват няколко сенки, освен скритата сянка, добавих и други сенки на сивото към .Покемон и .Покемон: навъртам елементи за естетика.

 / * снимки на pokemon * / .pokemon ширина: 200px; височина: 200px; / * съдържание на центъра, използвайки кутия за флекс * / дисплей: flex; justify-content: център; align-items: център; / * overlay * / box-shadow: 0 0 0 100px inset, 0 0 5px сиво; / * преход * / преход: box-shadow 1s;  / * имена на pokemon * / .pokemon :: after width: 80%; височина: 80%; дисплей: блок; шрифт: 16pt 'bookman old syle'; цвят: бял; граница: 2px твърдо; text-align: center; / * съдържание на центъра, използвайки кутия за флекс * / дисплей: flex; justify-content: център; align-items: център; преход * / преход: непрозрачност 1s 5s;  / * разкриват картината на Pokemon на hover * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px сиво, 0 0 10px сиво поставяне;  / * скрие името на pokemon на hover * / .pokemon: hover :: after transition: opacity. непрозрачност: 0;  

Когато .Покемон елементите се въртят, тяхната кутия сянка трябва да се промени, за да разкрие образа зад себе си.

Можете да видите, че .Покемон: навъртам Селекторът получава нова сянка, която премахва наслагването и .Покемон: мишката :: след Селекторът скрива името на покемона с помощта на непрозрачност Имот.

Може би сте забелязали и липса на цветни стойности в оцветяващи се сенки в. \ t .Покемон и .Покемон: навъртам правила за стила. Цветът на кутията-сянка върху отделните покемони трябва да бъде посочен в собствените си правила за отделен стил, тъй като всички те са различни един от друг.

Като кутия сянка не притежава дълготрайна собственост, Не можете да зададете цвят в сянка индивидуално с нещо подобно, кутия сянка цвят; вместо това - използваме цвят Имот.

По подразбиране, когато дадете стойност за цвят собственост, тази стойност е прилага се за границата, очертанията и цветовете на сенчестата кутия също. Така че можете просто да използвате цвят свойство, за да добавите цвят към box-shadow.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * цветна стойност, използвана за цвят на кутия в сянка * / цвят: rgba (71, 121, 94, 0.9);  #bulbasaur :: after / * име на pokemon * / съдържание: 'Bulbasaur';  

Цветът на скритата сянка използва гореспоменатото RGBA () функция с 0,9 за алфа стойност, за да направи прозореца прозрачен.

Освен цвета на овърлейната сянка, гореспоменатият CSS също добавя правилата, които са индивидуални за всеки pokemon - изображението като фон изображение и името.

И това е всичко, ние сме готови с нашето CSS-оцветяване с цветно изображение. Погледнете кода на всички покемони в писалката по-долу.