Efektné animácie zahŕňajúce umiestnenie kurzora myši nad obrázky, ktoré vyžadujú JavaScript. Nikdy viac! CSS je tu na oživenie vašich miniatúr a galérií.
Efekty vznášania sa obrázka môžu vašej webovej stránke pridať ďalšiu úroveň lesku. Vytvárajú plynulý efekt, vďaka čomu je navigácia v obrazových galériách alebo kolotočoch príjemnejšia. Najlepšie na tom je, že tieto efekty môžete vytvárať iba pomocou CSS a bez JavaScriptu.
Na svojich obrázkoch môžete vytvoriť rôzne štýly animácií. Patrí medzi ne rozmazanie alebo priblíženie pozadia, vyblednutie alebo posunutie textu a zmena farby pozadia.
Vytvorenie HTML pre obrázky
Začnite vytvorením index.html súbor v prázdnom priečinku v počítači a potom súbor otvorte v textovom editore. Vo vnútri súboru vytvorte kostru HTML a do úvodných značiek tela a uzatvárania tela pridajte nasledujúce označenie:
<divtrieda="mriežka">
<divtrieda="obrazový obal">
<imgtrieda="rozmazať"src=" https://picsum.photos/500?random=1"alt=""><divtrieda="vyblednutie obsahu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklama
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtrieda="obrazový obal">
<imgtrieda="zoom rozostrenie"src=" https://picsum.photos/500?random=2"alt=""><divtrieda="vyblednutie obsahu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklama
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtrieda="obrazový obal">
<imgtrieda="rozmazať"src=" https://picsum.photos/500?random=3"alt=""><divtrieda="obsah snímka vľavo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklama
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divtrieda="obrazový obal">
<imgtrieda="sivá"src=" https://picsum.photos/500?random=3"alt="">
<divtrieda="obsah snímka vľavo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reklama
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Ide o mriežkový kontajner so štyrmi obalmi obrázkov. Prvky div s image-wrapper triedy slúžia ako obal pre obrázok a jeho zodpovedajúci text. K obrázku a obsahu každej sekcie je pridaná jedinečná sada tried.
Vo vnútri šablóny štýlov budete zacieliť na tieto prvky podľa ich názvov tried a aplikujte rôzne štýlové a animačné efekty. Text sa predvolene nezobrazí; zobrazí sa iba vtedy, keď umiestnite kurzor myši na obálku obrázka a obrázok bude mať počas tohto procesu rôzne efekty.
Pridanie základného CSS
Teraz, keď ste vytvorili HTML, je čas upraviť ho pomocou CSS. Vytvor style.css súbor a odkaz na tento hárok štýlov z vášho súboru HTML vo vnútri súboru sekcia:
<odkazrel="štýlov"href="style.css">Vo svojom vnútri style.css súbor, prvá vec, ktorú musíte urobiť, je vynulovať okraj na tele a nastaviť nejaký spodný okraj:
telo {
marža: 0;
okraj-dole: 20rem;
}Ďalej musíte premeniť vonkajšiu nádobu na a Mriežka CSS, ktorú môžete použiť na rozloženie prvkov v dvoch rozmeroch. Nasledujúci kód vytvorí mriežku s toľkými stĺpcami alebo riadkami, ktoré sa zmestia. Minimálna veľkosť každého stĺpca je 300 pixelov a maximálna veľkosť je 1 zlomok kontajnera:
.mriežka {
displej: mriežka;
mriežka-šablóna-stĺpce: opakovať(automatické prispôsobenie, minmax(300px, 1fr));
}Keďže chcete umiestniť text vzhľadom na jeho kontajner, musíte nastaviť polohu vzhľadom na obal obrázka:
.obálka-obrázok {
pozíciu: príbuzný;
pretečeniu: skryté;
}
Ďalším krokom je štylizácia obrázka. Zobrazte obrázok ako prvok bloku, nastavte ho na šírku celého kontajnera a umiestnite ho do stredu kontajnera:
.obálka-obrázok > img {
displej: blokovať;
šírka: 100%;
pomer strán: 1 / 1;
objekt-fit: kryt;
objektová poloha: stred;
}
Pokiaľ ide o text, umiestnite ho do stredu a vytvorte priehľadnú svetlosivú farbu pozadia:
.obálka-obrázok > .obsah {
pozíciu: absolútne;
vložka: 0;
veľkosť písma: 2rem;
vypchávka: 1rem;
pozadie: rgba(255, 255, 255, .4);
displej: flex;
align-items: stred;
ospravedlniť-obsah: stred;
}
Uložte súbor CSS a otvorte ho index.html vo vašom prehliadači. Mali by ste nájsť stránku podobnú tej na obrázku nižšie.
Nastavenie prechodu na obrázkoch a textoch
Teraz, keď ste na obrázky použili základné štýly, ďalším krokom je pridať k nim nejakú animáciu. Začnite pridaním prechodu do oboch obrázkov a ich zodpovedajúceho textu:
.obálka-obrázok > img,
.obálka-obrázok > .obsah {
prechod: 200panieasy-in-out;
}
To znamená, že všetky prechodové efekty (t. j. zoslabenie, priblíženie a rozmazanie) budú trvať 200 milisekúnd a budú mať rovnakú krivku časovania.
Animácia Fade-In a Blur
Prvý štýl animácie v texte mizne. Keď umiestnite kurzor myši na konkrétny obal obrázka, obsah, ktorý má vyblednúť trieda bude mať tento efekt (animácia zoslabenia a zoslabenia) aplikovaný na ňu. Dosiahnete to nastavením nepriehľadnosti na nulu a jej zmenou na jednotku, keď myšou prejdete na konkrétny obal obrázka:
.obálka-obrázok > .obsah.vyblednúť {
nepriehľadnosť: 0;
}
.obálka-obrázok:vznášať sa > .obsah.vyblednúť {
nepriehľadnosť: 1;
}
Ak súbor uložíte a skontrolujete svoj prehliadač, uvidíte aktívnu animáciu prechodu. Môžete si však tiež všimnúť, že text je trochu ťažko čitateľný (ak je obrázok ostrý a má veľa kontrastu). Pripomeňme, že všetky obrázky majú aj názov triedy rozmazať. Toto slúži na rozmazanie obrázkov, aby sa medzi nimi a textom pridal potrebný kontrast:
image-wrapper:vznášať sa > img.rozmazať {
filter: rozmazať(5px)
}
Teraz, keď umiestnite kurzor myši na obrázok, môžete vidieť, že sa len rozmaže. Môžete zvýšiť hodnotu pixelov, aby bolo rozmazanie na obrázkoch výraznejšie, čím sa pridá väčší kontrast medzi ním a textom.
Pridanie ďalších efektov
Ďalšie efekty sú posúvanie textu zľava, zväčšovanie obrázka a pridávanie odtieňov šedej do obrázka. Tu je kód na dosiahnutie všetkých troch efektov:
.obálka-obrázok > .obsah.slide-vľavo {
transformovať: translateX(100%)
}.obálka-obrázok:vznášať sa > .obsah.slide-vľavo {
transformovať: translateX(0%)
}.obálka-obrázok:vznášať sa > img.sivá {
filter: v odtieňoch šedej(1)
}.obálka-obrázok:vznášať sa > img.rozmazať {
filter: rozmazať(5px)
}
.obálka-obrázok:vznášať sa > img.zoom {
transformovať: stupnica(1.1)
}
Uložte súbor, potom prejdite do prehliadača a umiestnite kurzor myši na každý obrázok. Mali by ste vidieť rôzne efekty v akcii.
Na dokončenie zasúvacích efektov môžete vytvoriť tri ďalšie obaly obrázkov, z ktorých každý obsahuje obrázok a text. Každý kus textu bude mať názov triedy vysúvanie, zošmyknúť sa, alebo mierne-vpravo. Potom by ste odovzdali správnu hodnotu pixel, em alebo rem, vnútri transformovať () funkcia na vytvorenie všetkých troch efektov.
CSS Grid a Flexbox
CSS Grid a Flexbox sú dve funkcie, ktoré vám umožňujú vytvárať fantastické rozloženia pre váš web. Môžete jednoducho vytvoriť prakticky akékoľvek rozloženie, ktoré chcete, a prispôsobiť riadky a stĺpce podľa svojho vkusu. Stĺpce budú tiež v predvolenom nastavení responzívne. Keď sa naučíte, kedy používať jednu cez druhú, pomôže vám to stať sa špičkovým vývojárom CSS o jedno percento.