Ako na efekt CPS-Overlay len s Box-Shadow
Prekrytie obsahu sú významnou súčasťou moderného webového dizajnu. Pomáhajú vám skryť prvok na webovej stránke a neskôr - so súhlasom používateľa - odhaliť to, a zobraziť ďalšie informácie alebo ovládacie prvky, napríklad tlačidlá za ním.
Typický prekryv je polotransparentné, s pevná farba pozadia (zvyčajne čierna) a na ňom sa nachádzajú nejaké texty alebo tlačidlá, ktoré používateľom môžu vidieť alebo s ktorými komunikujú. Po interakcii (kliknutie alebo vznášanie) sa zobrazí prekrytie odstráni a odhalí obsah pod ním.
V tomto článku sa pozrieme na to, ako pridať farebné prekrytie obrázkov pomocou čistého CSS. Posledný výsledok môžete vidieť na demo nižšie. Umiestnite kurzor myši na obrázky, aby sa prekrytia zobrazovali pokémony. Hoci tento príspevok diskutuje obrázky, technika, ktorú prezentuje, sa môže bezpečne aplikovať aj na iné typy obsahu (napríklad na textové bloky).
Vyhnite sa pridávaniu ďalších prvkov HTML
Prekrytie často vytvára umiestnenie ďalšieho elementu HTML s nepriehľadnosť hodnotu nižšiu ako 1 priamo nad prvkom, ktorý sa má pokryť. Problém je v tom, že táto technika zahŕňa používanie extra element (alebo pseudo-element) pre prekrytie.
Ak nie ste pedanika veľkosti HTML, mať ďalší prvok pre prekrytie pravdepodobne nie je veľký problém, pretože s najväčšou pravdepodobnosťou nebude zdaniť šírku pásma akejkoľvek siete toľko. Avšak s oddelený pravidlá štýlu pre prvky a ich prekrytia stále poškodzujú čitateľnosť a udržiavateľnosť CSS.
Ak chcete, aby kód bol v poriadku a aby ste nepoškodili svoj obrys HTML, je lepšou voľbou použiť riešenie iba pre CSS.
Vytvoriť prekrytie s box-shadow
Takže ako môžete vlastne vytvoriť prekrytie len CSS? S pomocou box-shadow Vlastnosť CSS. Box-tieň je ideálny pre túto prácu, pretože to, čo je prekrytie, ale tmavý tieň obsadený nad prvkom?
Stĺpec box-box má hodnotu vlastností vložiť, čo spôsobí, že sa tieň objaví dovnútra rámu krabice.
Vložený stĺpec s tieňovou veľkosťou polovice alebo viac ako polovicou šírky a výšky prvku vytvára tieň, ktorý sa vzťahuje na celý element.
.políčko width: 200px; výška: 200px; box-tieň: zelená 0 0 0 100px vložka;
Prekrytie zvyčajne mať určitú transparentnosť, musíte ho pridať aj do tieňovej schránky. Môžete to urobiť pomocou RGBA () funkcia pre tieňové farby.
rgb časť rgba, predstavuje červené, zelené a modré hodnoty farebných kanálov, zatiaľ čo predstavuje alfa kanál, ktorý je zodpovedný za transparentnosť.
Pre alfa kanál vytvorí hodnota 1 hodnotu nepriehľadná farba, zatiaľ čo 0 vytvorí a plne priehľadná farba.
Priradením hodnoty medzi 0 a 1 do alfa kanálu hodnoty farby rgba v stíne boxu môžete vytvorte polopriehľadný prekryv.
Vytvorte si kód pre demo
Naše demo zobrazuje obrázky a mená rôznych pokémonov. Tu budeme vytvárať iba kód pre Bulbasaur, prvý pokemon v demo, rovnako ako ostatné sú robené rovnakým spôsobom (na Codepen môžete skontrolovať aj kód pre nich).
HTML
Pre HTML, stačí len vytvorte rámček ku ktorému pridáme všetko ostatné so službou CSS.
CSS
V nižšie uvedenom CSS .pokemon elementy zobrazujú obrázky Pokémonov a .pokemon :: po pseudo-elementy nesú meno Pokémona.
Vzhľadom k tomu, box-shadow vlastnosť môže mať viac hodnôt aby urobiť viac stínov, okrem prekryvného tieňa som pridala aj iné tieňové šedivé farby .pokemon a .pokemon: hover prvky estetiky.
/ * pokemon obrázky * / .pokemon šírka: 200px; výška: 200px; / * centrum obsah pomocou flex box * / display: flex; justify-content: center; align-items: center; / * prekrytie * / box-tieň: 0 0 0 100px vložka, 0 0 5px šedá; / * prechodový prechod * / prechod: box-shadow 1s; / * pokemon názvy * / .pokemon :: po (šírka: 80%; výška: 80%; zobrazenie: blok; písmo: 16pt 'bookman old syle'; farba: biela; hranica: 2px pevná; text-align: center; / * centrum obsah pomocou flex box * / display: flex; justify-content: center; align-items: center; / * hover out transition * / prechod: opacity 1s .5s; / * odhaliť pokemon obrázok na hover * / .pokemon: hover prechod: box-tieň 1s; box-tieň: 0 0 0 5px vložka, 0 0 5px šedá, 0 0 10px šedá vložka; / * skryť pokemon meno na hover * / .pokemon: hover :: po transition: opacity .5s; opacita: 0;
Keď .pokemon prvky sú vznášané, ich box-tieň sa musí zmeniť, aby odhalili obrázok za ním.
Môžete vidieť, že .pokemon: hover selektor dostane nový stín, ktorý odstráni prekrytie a .pokemon: vznášať :: po selektor skryje názov pokemon pomocou nepriehľadnosť vlastnosť.
Možno ste si tiež všimli absencia farebných hodnôt v striedačoch prekrytia v stĺpcoch .pokemon a .pokemon: hover pravidlá štýlu. Je potrebné špecifikovať farbu tieňovej škatuľky pre jednotlivé vrstvy vo svojich vlastných pravidlách o osobitnom štýle, pretože sú všetky navzájom odlišné.
ako box-shadow nemá žiadnu dlhodobú vlastnosť, nemôžete nastaviť jeho tieňovú farbu jednotlivo s niečím podobným, box-shadow-color; namiesto toho - používame farba vlastnosť.
Štandardne, keď zadáte hodnotu pre farba vlastnosť, táto hodnota je ktoré sa používajú pre hranicu, obrys a farby tieňovej krabice tiež. Takže môžete jednoducho použiť farba Vlastnosť pridať farbu do stínu.
#bulbasaur pozadie-obrázok: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * farebná hodnota použitá pre farbu tieňovej krabice * / farba: rgba (71, 121, 94, 0.9); #bulbasaur :: po / * pokemon name * / content: 'Bulbasaur';
Farba prekryvného tieňa používa vyššie uvedené RGBA () funkcia s hodnotou alfa 0,9 na vytvorenie transparentného prekrytia.
Okrem farby prekrytia box-shadow, vyššie uvedené CSS tiež pridá pravidlá, ktoré sú individuálne pre každý pokemon - obrázok ako background-image a meno.
A to je všetko, sme pripravení s našim CSS-farebným prekrytím obrazu. Pozrite sa na kód všetkých pokemonov v pere nižšie.
