Jak překrýt CSS-efekty Efekt s Box-Shadow

Překryvy obsahu jsou prominentní součástí moderního web designu. Pomáhají vám skrýt prvek na webové stránce a později - se souhlasem uživatele - odhalit, a zobrazit další informace nebo ovládací prvky, například tlačítka za ním.

Typickým překrytím je poloprůhledný, s plná barva pozadí (obvykle černá) a je na něm nějaký text nebo tlačítka, na kterých mohou uživatelé vidět nebo s nimi pracovat. Po interakci (klepnutím nebo vznášením) dojde k překrytí odstraní a odhalí obsah pod ním.

V tomto článku se podíváme, jak na to přidejte k obrázkům barevné překrytí pomocí čistého CSS. Konečný výsledek můžete vidět na níže uvedeném demu. Přemístěte obrázky, aby se překryvy ukázaly pokemons. Ačkoli tento příspěvek pojednává o obrázcích, technika, kterou představuje, lze bezpečně aplikovat i na jiné typy obsahu (například textové bloky).

Vyhněte se přidávání extra HTML prvků

Překryvy jsou často vytvářeny umístění extra HTML elementu s neprůhlednost hodnota menší než 1 přímo nad prvkem, který má být zakryt. Problém je, že tato technika zahrnuje použití další element (nebo pseudo-element) pro překrytí.

Nejste-li pedantem velikosti HTML, není nadbytečný prvek pravděpodobně příliš velký, protože s největší pravděpodobností nebude šířit šířku pásma žádné sítě. Nicméně samostatný pravidla stylu pro elementy a jejich překrytí stále poškozují čitelnost a udržovatelnost CSS.

Chcete-li udržet svůj kód v pořádku a neporušovat přehledy ve formátu HTML, je to lepší volba použít řešení pouze pro CSS.

Vytvořit překrytí s box-stín

Jak tedy můžete skutečně vytvořit překrytí pouze pro CSS? S pomocí box-stín Vlastnost CSS. Box-shadow je ideální pro tuto práci, protože to, co je překrytí, ale temný stín nad prvkem?

Pole stín má hodnotu vlastnosti nazývá vložka, který způsobí, že se objeví stín dovnitř rámu krabice.

Vkládaný box-stín s velikostí stínu polovinou nebo více než polovinou šířky a výšky prvku vytváří stín, který je tvořen stínem pokrývá celý živel.

 .box width: 200px; výška: 200px; box-shadow: zelená 0 ​​0 0 100px vložka;  

Od překrytí obvykle určitá průhlednost, musíte jej také přidat do stínu boxu. To lze provést pomocí rgba () funkce stínové barvy.

rgb část rgba, reprezentuje červené, zelené a modré hodnoty barevného kanálu, zatímco A představuje alfa kanál, který je odpovědné za transparentnost.

Pro alfa kanál vytvoří hodnota 1 hodnotu neprůhledná barva, zatímco 0 vytvoří plně průhledná barva.

Přiřazením hodnoty mezi 0 a 1 alfa kanálu hodnoty barvy rgba ve stínu boxu můžete vytvořit poloprůhlednou překrytí.

Vytvořte kód pro ukázku

Naše demo zobrazí obrázky a jména různých pokemons. Zde vytvoříme pouze kód pro Bulbasaur, první pokémon v demu, stejně jako ostatní (stejně tak i pro Codepen)..

HTML

Pro HTML potřebujeme pouze vytvořit krabici ke kterému přidáme vše ostatní pomocí CSS.

CSS

V CSS níže, .pokemon prvky zobrazují obrázky pokemon a .pokemon :: after pseudo-elementy nesou jméno pokemon.

Od té doby box-stín vlastnictví může mít více hodnot v následujících situacích vykreslení více stínů, kromě překryvného stínu jsem také přidal další stíny šedé .pokemon a .pokemon: hover prvky pro estetiku.

 / * Pokemon obrázky * / .pokemon width: 200px; výška: 200px; / * obsah centra pomocí flex boxu * / display: flex; justify-content: center; zarovnat položky: střed; / * overlay * / box-shadow: 0 0 0 100px vložka, 0 0 5px šedá; / * hover-out přechod * / přechod: box-shadow 1s;  / * jména pokemon * / .pokemon :: after width: 80%; výška: 80%; zobrazení: blok; písmo: 16pt 'bookman old syle'; barva bílá; okraj: 2px pevná látka; zarovnání textu: střed; / * obsah centra pomocí flex boxu * / display: flex; justify-content: center; zarovnat položky: střed; / * hover out transition * / transition: opacity 1s .5s;  / * odhalit pokemon obrázek na hover * / .pokemon: hover přechod: box-shadow 1s; box-shadow: 0 0 0 5px vložka, 0 0 5px šedá, 0 0 10x šedá vložka;  / * skrýt jméno pokemon na hover * / .pokemon: hover :: after transition: opacity .5s; opacity: 0;  

Když .pokemon prvky jsou vznášeny, jejich box-shadow je třeba změnit, aby odhalil obraz za sebou.

Můžete vidět, že .pokemon: hover volič dostane nový box-stín, který odstraní překrytí a .pokemon: hover :: after volič skryje název pokemon pomocí neprůhlednost vlastnictví.

Možná jste si toho všimli absence barevných hodnot v překryvných krabicích stínů v .pokemon a .pokemon: hover pravidla stylu. Je třeba specifikovat barvu překrytí boxu stínování jednotlivých pokemonů ve svých vlastních pravidlech, protože se od sebe navzájem liší.

Tak jako box-stín nemá žádnou dlouhou vlastnost, nemůžete nastavit jeho barvu stínu jednotlivě s něčím podobným, barva boxu; místo toho - používáme barva vlastnictví.

Ve výchozím nastavení při zadání hodnoty barva vlastnost, tato hodnota je použije se pro ohraničení, obrys a barvy stínu boxu také. Takže můžete jednoduše použít barva vlastnost přidat barvu do box-shadow.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * hodnota barvy použitá pro barvu stínu boxu * / barva: rgba (71, 121, 94, 0,9);  #bulbasaur :: after / * jméno pokemon * / content: 'Bulbasaur';  

Barva stínu překrytí používá výše uvedené rgba () funkce s hodnotou 0,9 pro hodnotu alfa, aby byla překrytí průhledná.

Kromě barvy překrytí box-stín, výše uvedené CSS také přidává pravidla, která jsou individuální pro každého pokemon - obrázek jako pozadí a jméno.

A to je vše, jsme připraveni s naším CSS-jen barevný obrázek překrytí. Podívejte se na kód všech pokemons v peru níže.