A képek fölé mutató díszes animációk JavaScriptet igényeltek. Nem több! A CSS azért van itt, hogy felfrissítse miniatűrjeit és galériáit.
A képlebegtetési effektusok további fényezést adhatnak webhelyének. Sima hatást keltenek, kellemesebbé téve a képgalériákban vagy körhintákon való navigálást. A legjobb az egészben az, hogy ezeket az effektusokat csak CSS-sel, JavaScript nélkül hozhatja létre.
Különböző stílusú animációkat hozhat létre a képeken. Ide tartozik a háttér elmosása vagy nagyítása, a szöveg halványítása vagy elcsúsztatása, valamint a háttérszín megváltoztatása.
HTML létrehozása a képekhez
Kezdje azzal, hogy hozzon létre egy index.html fájlt a számítógép egy üres mappájában, majd nyissa meg a fájlt egy szövegszerkesztővel. A fájlon belül hozza létre a HTML-vázat, és adja hozzá a következő jelölést a nyitó törzs és a záró body címkék belsejébe:
<divosztály="rács">
<divosztály="képcsomagoló">
<imgosztály="elhomályosít"src=" https://picsum.photos/500?random=1"alt=""><divosztály="a tartalom elhalványul">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta hirdetés
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divosztály="képcsomagoló">
<imgosztály="zoom blur"src=" https://picsum.photos/500?random=2"alt=""><divosztály="a tartalom elhalványul">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta hirdetés
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divosztály="képcsomagoló">
<imgosztály="elhomályosít"src=" https://picsum.photos/500?random=3"alt=""><divosztály="tartalom dia balra">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta hirdetés
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divosztály="képcsomagoló">
<imgosztály="szürke"src=" https://picsum.photos/500?random=3"alt="">
<divosztály="tartalom dia balra">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta hirdetés
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Ez egy rácstároló négy képburkolóval. A div elemek a képburkoló osztály a kép és a hozzá tartozó szöveg burkolójaként szolgál. Az egyes szakaszok képéhez és tartalmához egyedi osztályok vannak hozzáadva.
A stíluslapon belül fogsz célozd meg ezeket az elemeket az osztálynevükkel és alkalmazza a különböző stílus- és animációs hatásokat. A szöveg alapértelmezés szerint nem jelenik meg; csak akkor jelenik meg, ha az egérmutatót a képburkoló fölé viszi, és a kép különböző effektusokon megy keresztül.
Alapszintű CSS hozzáadása
Most, hogy elkészítette a HTML-t, itt az ideje, hogy CSS-sel alakítsa ki. Hozzon létre egy stílus.css fájlt, és hivatkozzon erre a stíluslapra a HTML-fájlból, a szakasz:
<linkrel="stíluslap"href="stílus.css">A tiédben stílus.css fájl, az első dolog, amit meg kell tennie, hogy nullára állítja a törzs margóját, és állítson be néhány alsó margót:
test {
árrés: 0;
margó-alsó: 20rem;
}Ezután a legkülső tartályt a CSS-rács, amellyel elemeket két dimenzióban helyezhet el. A következő kód egy rácsot hoz létre annyi oszlopból vagy sorból, amennyi elfér. Az egyes oszlopok minimális mérete 300 képpont, a maximális mérete pedig a tároló 1 töredéke:
.rács {
kijelző: rács;
rács-sablon-oszlopok: ismétlés(automatikus illeszkedés, minimum maximum(300px, 1fr));
}Mivel a szöveget a tárolójához viszonyítva szeretné elhelyezni, be kell állítania a pozíciót a képburkoláshoz viszonyítva:
.image-wrapper {
pozíció: relatív;
túlcsordulás: rejtett;
}
A következő lépés a kép stílusának kialakítása. Jelenítse meg a képet blokk elemként, tegye át a teljes tároló szélességére, és helyezze a tartály közepére:
.image-wrapper > img {
kijelző: Blokk;
szélesség: 100%;
képarány: 1 / 1;
tárgyra illő: borító;
tárgy-pozíció: központ;
}
Ami a szöveget illeti, helyezze el középen, és adjon átlátszó, világosszürke háttérszínt:
.image-wrapper > .tartalom {
pozíció: abszolút;
betét: 0;
betűméret: 2rem;
párnázás: 1rem;
háttér: rgba(255, 255, 255, .4);
kijelző: Flex;
align-ites: központ;
indokolja-tartalom: központ;
}
Mentse el a CSS-fájlt, és nyissa meg index.html a böngészőjében. Az alábbi képen láthatóhoz hasonló oldalt kell találnia.
Átmenet beállítása a képeken és szövegeken
Most, hogy az alapvető stílusokat alkalmazta a képeken, a következő lépés az animáció hozzáadása. Kezdje azzal, hogy mindkét képhez és a hozzájuk tartozó szöveghez adjon átmenetet:
.image-wrapper > img,
.image-wrapper > .tartalom {
átmenet: 200Kisasszonykönnyedség be-ki;
}
Ez azt jelenti, hogy az összes átmeneti effektus (azaz a fade-in, a zoom és az elmosódás) 200 ezredmásodpercig tart, és ugyanaz az időgörbe.
Fade-In és Blur animáció
Az első animációs stílus elhalványul a szövegben. Ha az egérmutatót egy adott képburkoló fölé viszi, a tartalom, amely a áttűnés osztályban ezt a hatást (fade-in és fade-out animáció) alkalmazzák rá. Ezt úgy érheti el, hogy az átlátszatlanságot nullára állítja, és egyre módosítja, amikor az egér egy adott képburkolón mozog:
.image-wrapper > .tartalom.áttűnés {
átlátszatlanság: 0;
}
.image-wrapper:lebeg > .tartalom.áttűnés {
átlátszatlanság: 1;
}
Ha elmenti a fájlt, és ellenőrzi a böngészőt, megjelenik az elhalványuló animáció. De azt is észreveheti, hogy a szöveg kissé nehezen olvasható (ha a kép éles és nagy a kontrasztja). Emlékezzünk vissza, hogy minden képnek van osztályneve is elhomályosít. Ez a képek elmosására szolgál, hogy némi kontrasztot adjon a képek és a szöveg között:
képburkoló:lebeg > img.elhomályosít {
szűrő: elhomályosít(5px)
}
Most, amikor a kép fölé viszi az egérmutatót, láthatja, hogy az egyszerűen elmosódik. Növelheti a pixelértéket, hogy az elmosódást kifejezettebbé tegye a képeken, ezáltal növelve a kontrasztot a kép és a szöveg között.
Egyéb effektusok hozzáadása
A többi effektus a szöveg balról történő csúsztatása, a kép nagyítása és szürkeárnyalatos hozzáadása a képhez. Íme a kód mindhárom hatás eléréséhez:
.image-wrapper > .tartalom.csúsztassa balra {
átalakítani: lefordítaniX(100%)
}.image-wrapper:lebeg > .tartalom.csúsztassa balra {
átalakítani: lefordítaniX(0%)
}.image-wrapper:lebeg > img.szürke {
szűrő: szürkeárnyalatos(1)
}.image-wrapper:lebeg > img.elhomályosít {
szűrő: elhomályosít(5px)
}
.image-wrapper:lebeg > img.zoomolás {
átalakítani: skála(1.1)
}
Mentse el a fájlt, majd lépjen a böngészőjébe, és mutasson az egérrel az egyes képek fölé. Látnia kell a különböző hatásokat működés közben.
A becsúsztatható effektusok befejezéséhez további három képburkolót hozhat létre, amelyek mindegyike egy-egy képet és szöveget tartalmaz. Minden szövegrészhez tartozik az osztálynév felcsúszik, csúsztassa le, vagy enyhén jobbra. Akkor adja át a megfelelő értéket pixel, em vagy rem, benne transzformáció() funkciót mindhárom hatás létrehozásához.
CSS Grid és Flexbox
A CSS Grid és a Flexbox két olyan funkció, amelyek segítségével fantasztikus elrendezéseket hozhat létre webhelyéhez. Gyakorlatilag bármilyen elrendezést könnyedén létrehozhat, és ízlése szerint testreszabhatja a sorokat és oszlopokat. Az oszlopok alapértelmezés szerint is reagálni fognak. Ha megtanulja, mikor használja az egyiket a másikkal szemben, az segít abban, hogy egy százalékos CSS-fejlesztővé váljon.
