Како до ЦСС-Оверлаис ефекта са Бок-Схадов-ом

Слојеви садржаја су истакнути део модерног веб дизајна. Они вам помажу сакриј елемент на веб страници, а касније - уз одобрење корисника - откријте га, и приказати додатне информације или контроле, као што су дугмад иза њега.

Типичан слој је полу-транспарентан, са солид бацкгроунд цолор (обично црна), а ту је и текст или гумби на којима корисници могу видјети или ступити у интеракцију. Након интеракције (кликање или лебдење) долази до преклапања уклања се и открива садржај испод ње.

У овом чланку ћемо погледати како додајте обојени преклоп на слике коришћењем чистог ЦСС-а. Коначни резултат можете погледати испод. Лебдите слике да би слојеви открили покемоне. Иако овај пост расправља о сликама, техника коју представља може се сигурно примијенити и на друге типове садржаја (као што су текстуални блокови).

Избегавајте додавање додатних ХТМЛ елемената

Слојеви се често креирају позиционирање додатног ХТМЛ елемента са непрозирност вредност мања од 1 изнад елемента који треба да буде покривен. Проблем је у томе што ова техника подразумева употребу једног ектра елемент (или псеудо-елемент) за слој.

Ако нисте педантан ХТМЛ величина, имати додатни елемент за преклапање вероватно није велика ствар, јер највероватније неће толико оптеретити пропусност било које мреже. Али има засебан правила стила за елементе и њихове прекривке и даље штете читљивости и одрживости ЦСС-а.

Да би ваш код био у реду, а не да бисте забрљали ХТМЛ нацрт, бољи је избор да користите ЦСС-само решење.

Направи преклапање са бок-схадов

Како онда стварно можете да направите преклапање само за ЦСС? Уз помоћ бок-схадов ЦСС својство. Бок-схадов је савршен за овај посао, јер оно што је преклапање, али тамна сјена баца се над елемент?

Бок-схадов има вредност својства инсет, што изазива појаву сенке унутар оквира оквира.

Инсерт бок-схадов са величином сенке пола или више од половине ширине и висине елемента, ствара ту сенку цовер тхе цео елемент.

 .бок ширина: 200пк; хеигхт: 200пк; бок-схадов: греен 0 0 0 100пк инсет;  

Пошто се обично прекривају имају неку транспарентност, морате га додати и на сјенку кутије. Ово се може урадити коришћењем ргба () функција за боју сенки.

Тхе ргб део ргба, представља црвене, зелене и плаве вредности канала, док а представља алпха цханнел, која је одговоран за транспарентност.

За алфа канал, вредност 1 ствара опакуе цолор, док 0 ствара а потпуно транспарентна боја.

Додељивањем вредности између 0 и 1 алфа-каналу вредности ргба боје сенке кутије, можете направите полупрозирни преклоп.

Направите код за Демо

Наш демо ће приказати слике и имена различитих покемона. Овде ћемо само креирати код за Булбасаур, први покемон у демо верзији, пошто су остали направљени на исти начин (на Цодепен-у можете проверити и код за њих).

ХТМЛ

За ХТМЛ, ми само требамо направите кутију на које ћемо додати све остало са ЦСС-ом.

ЦСС

У ЦСС-у испод, .покемон елементи приказују покемон слике, и .покемон :: афтер псеудо-елементи носе име покемона.

Синце тхе бок-схадов својство може узети више вредности да би приказати више сенки, поред сенке са прекривањем, додао сам и друге сенке сиве боје .покемон и .покемон: ховер елементи за естетику.

 / * покемон пицтурес * / .покемон видтх: 200пк; хеигхт: 200пк; / * садржај центра помоћу флек бок-а * / дисплаи: флек; јустифи-цонтент: центар; алигн-итемс: центар; / * оверлаи * / бок-схадов: 0 0 0 100пк инсет, 0 0 5пк сива; / * ховер-оут транзиција * / транзиција: бок-схадов 1с;  / * покемон намес * / .покемон :: афтер видтх: 80%; висина: 80%; дисплеј блок; фонт: 16пт 'боокман олд силе'; бела боја; бордер: 2пк солид; тект-алигн: центар; / * садржај центра помоћу флек бок-а * / дисплаи: флек; јустифи-цонтент: центар; алигн-итемс: центар; / * ховер оут транзиција * / транзиција: непрозирност 1с .5с;  / * открить покемон пицтуре он ховер * / .покемон: ховер транситион: бок-схадов 1с; бок-схадов: 0 0 0 5пк инсет, 0 0 5пк сива, 0 0 10пк сива инсет;  / * хиде покемон име на ховер * / .покемон: ховер :: афтер транситион: опацити .5с; непрозирност: 0;  

Када .покемон елементи се окрећу, њихова кутија са сјенама треба да се промени да би се открила слика иза.

Видите да је .покемон: ховер селектор добија нову кутију-сенку која уклања слој, и .покемон: ховер :: афтер селектор скрива име покемена користећи непрозирност својство.

Можда сте приметили одсуство вредности боја у надслојним сенкама у .покемон и .покемон: ховер правила правила. Потребно је навести боју сенке у боји појединих покемона у сопственим правилима о посебном стилу, јер су сви међусобно различити.

Као бок-схадов нема никакву имовину, не можете да поставите његову боју сенке индивидуално са нечим сличним, бок-схадов-цолор; уместо тога - ми користимо цолор својство.

Подразумевано, када дате вредност за цолор власништво, та вредност је примењује се за обруб, контуре и боју сенке такође. Дакле, можете једноставно користити цолор својство за додавање боје у бок-схадов.

 #булбасаур бацкгроунд-имаге: урл (хттпс://ассетс.хонгкиат.цом/уплоадс/цсс-онли-оверлаис-бок-схадов/булбасаур.јпг); / * вредност боје за боју сенке у боји * / боја: ргба (71, 121, 94, 0.9);  #булбасаур :: афтер / * покемон наме * / цонтент: 'Булбасаур';  

Боја прекривне сенке користи горе поменуто ргба () Функционише са 0,9 за алфа вредност да би слој био транспарентан.

Осим боје прекривне кутије, горе наведени ЦСС додаје и правила која су појединачна за сваки покемон - слика као позадинска слика и име.

И то је све, спремни смо са нашим ЦСС-слојем само у боји. Погледајте код свих покемона у оловци испод.