Home-theater-designers
Efekty při najetí na obrázek mohou vašemu webu přidat další úroveň lesku. Vytvářejí plynulý efekt, díky čemuž je navigace v obrazových galeriích nebo kolotočích příjemnější. Nejlepší na tom je, že tyto efekty můžete vytvářet pouze pomocí CSS a bez JavaScriptu.
jak hodit špendlík na google mapy
Na svých obrázcích můžete vytvořit různé styly animace. Patří mezi ně rozmazání nebo přiblížení pozadí, vyblednutí nebo posunutí textu a změna barvy pozadí.
VYUŽÍVÁNÍ VIDEA DNE POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM
Vytvoření HTML pro
Začněte vytvořením index.html soubor v prázdné složce v počítači a poté soubor otevřete pomocí textového editoru. Uvnitř souboru vytvořte kostru HTML a do úvodních značek těla a zavírání přidejte následující označení:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Jedná se o mřížkový kontejner se čtyřmi obaly obrázků. Prvky div s image-wrapper třídy slouží jako obal pro obrázek a jeho odpovídající text. Ke každému obrázku a obsahu sekce je přidána jedinečná sada tříd.
Uvnitř šablony stylů budete zacílit tyto prvky podle jejich názvů tříd a aplikujte různé stylingové a animační efekty. Text se ve výchozím nastavení nezobrazí; zobrazíte jej pouze tehdy, když najedete na obálku obrázku a obrázek bude mít různé efekty.
Přidání základního CSS
Nyní, když jste vytvořili HTML, je čas upravit jej pomocí CSS. Vytvořit styl.css a odkaz na tuto šablonu stylů z vašeho souboru HTML uvnitř souboru
<link rel="stylesheet" href="style.css">
Uvnitř vašeho styl.css soubor, první věc, kterou musíte udělat, je resetovat okraj na těle na nulu a nastavit nějaký spodní okraj:
body {
margin: 0;
margin-bottom: 20rem;
}
Dále musíte proměnit vnější nádobu na a Mřížka CSS, kterou můžete použít k rozložení prvků ve dvou rozměrech . Následující kód vytvoří mřížku s tolika sloupci nebo řádky, které se vejdou. Minimální velikost každého sloupce je 300 pixelů a maximální velikost je 1 zlomek kontejneru:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Protože chcete umístit text vzhledem k jeho kontejneru, musíte nastavit polohu vzhledem k obalu obrázku:
.image-wrapper {
position: relative;
overflow: hidden;
}
Dalším krokem je stylizace obrázku. Zobrazte obrázek jako prvek bloku, nastavte jej na šířku celého kontejneru a umístěte jej do středu kontejneru:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Pokud jde o text, umístěte jej do středu a vytvořte průhlednou, světle šedou barvu pozadí:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Uložte soubor CSS a otevřete index.html ve vašem prohlížeči. Měli byste najít stránku podobnou té na obrázku níže.
Zapnutí přechodu a textů
Nyní, když jste na obrázky použili základní styly, je dalším krokem přidat k nim nějakou animaci. Začněte přidáním přechodu k oběma obrázkům a jejich odpovídajícímu textu:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
To znamená, že všechny přechodové efekty (tj. roztmívání, přiblížení a rozostření) budou trvat 200 milisekund a budou mít stejnou křivku časování.
Animace Fade-In a Blur
První styl animace v textu mizí. Když umístíte ukazatel myši na konkrétní obálku obrázku, obsah, který má slábnout třída bude mít na sebe tento efekt (animace zatmívání a slábnutí). Toho dosáhnete nastavením krytí na nulu a jeho změnou na jedničku, když myš najede na konkrétní obálku obrázku:
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Pokud soubor uložíte a zkontrolujete svůj prohlížeč, uvidíte aktivní animaci prolínání. Ale můžete si také všimnout, že text je trochu špatně čitelný (pokud je obrázek ostrý a má hodně kontrastu). Připomeňme, že všechny obrázky mají také název třídy rozmazat . Slouží k rozmazání obrázků a přidání potřebného kontrastu mezi nimi a textem:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Nyní, když najedete na obrázek, můžete vidět, že se jen rozmaže. Můžete zvýšit hodnotu pixelů, aby bylo rozmazání na obrázcích výraznější, a tím přidat větší kontrast mezi ním a textem.
Přidání dalších efektů
Další efekty jsou posunutí textu zleva, přiblížení obrázku a přidání stupňů šedi do obrázku. Zde je kód pro dosažení všech tří efektů:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Uložte soubor, přejděte do prohlížeče a najeďte myší na každý obrázek. Měli byste vidět různé efekty v akci.
Chcete-li dokončit zasouvací efekty, můžete vytvořit tři další obálky obrázků, z nichž každý obsahuje obrázek a text. Každý text bude mít název třídy vysunout , sklouznout dolů, nebo mírně vpravo . Pak byste předali správnou hodnotu pixel, em nebo rem , uvnitř přeměnit() funkce pro vytvoření všech tří efektů.
CSS Grid a Flexbox
CSS Grid a Flexbox jsou dvě funkce, které vám umožní vytvářet fantastické rozvržení pro váš web. Snadno můžete vytvořit prakticky libovolné rozvržení a přizpůsobit si řádky a sloupce podle svého vkusu. Sloupce budou také ve výchozím nastavení responzivní. Když se naučíte, kdy používat jednu přes druhou, pomůže vám to stát se špičkovým vývojářem CSS o jedno procento.