Kako stvoriti efekt lebdenja slike u CSS-u

Efekti lebdenja slike mogu vašoj web stranici dodati dodatnu razinu uglađenosti. Oni stvaraju glatki učinak, čineći galerije slika ili vrtuljke ugodnijima za navigaciju. Najbolji dio je što te efekte možete stvoriti samo pomoću CSS-a i bez JavaScripta.

Na svojim slikama možete stvoriti različite stilove animacije. To uključuje zamućivanje ili zumiranje pozadine, blijeđenje ili klizanje teksta i promjenu boje pozadine.

Stvaranje HTML-a za slike

Započnite stvaranjem index.html datoteku unutar prazne mape na vašem računalu, zatim otvorite datoteku pomoću uređivača teksta. Unutar datoteke izradite HTML kostur i dodajte sljedeće oznake unutar početnih i završnih oznaka tijela:

<divrazreda="mreža">
<divrazreda="omot slike">
<imgrazreda="zamućenje"src=" https://picsum.photos/500?random=1"alt="">
<divrazreda="blijeđenje sadržaja">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta oglas





instagram viewer

 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>

<divrazreda="omot slike">
<imgrazreda="zoom blur"src=" https://picsum.photos/500?random=2"alt="">
<divrazreda="blijeđenje sadržaja">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta oglas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divrazreda="omot slike">
<imgrazreda="zamućenje"src=" https://picsum.photos/500?random=3"alt="">
<divrazreda="sadržaj slajd-lijevo">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta oglas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divrazreda="omot slike">
<imgrazreda="siva"src=" https://picsum.photos/500?random=3"alt="">
<divrazreda="sadržaj slajd-lijevo">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta oglas
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Ovo je mrežni spremnik s četiri omota slike. Elementi div s slika-omotač klasa služi kao omot za sliku i njezin odgovarajući tekst. Slika i sadržaj svakog odjeljka imaju dodan jedinstven skup klasa.

Unutar lista stilova ćete ciljati ove elemente prema njihovim imenima klasa i primijeniti različite stilske i animacijske efekte. Tekst se neće prikazati prema zadanim postavkama; pokazat ćete je samo kada prijeđete pokazivačem iznad omotača slike, a slika će pritom doživjeti različite efekte.

Dodavanje osnovnog CSS-a

Sada kada ste izradili HTML, vrijeme je da ga stilizirate pomoću CSS-a. Stvoriti stil.css datoteku i vezu na ovaj stilski list iz vaše HTML datoteke, unutar odjeljak:

<vezarel="list stilova"href="style.css">

Unutar vašeg stil.css datoteku, prva stvar koju trebate učiniti je vratiti marginu na tijelu na nulu i postaviti neku donju marginu:

tijelo {
margina: 0;
margina-dno: 20rem;
}

Zatim morate krajnji vanjski spremnik pretvoriti u a CSS rešetka koju možete koristiti za postavljanje elemenata u dvije dimenzije. Sljedeći kod stvara rešetku s onoliko stupaca ili redaka koji odgovaraju. Minimalna veličina svakog stupca je 300 px, a maksimalna veličina je 1 dio spremnika:

.mreža {
prikaz: rešetka;
rešetka-predložak-stupci: ponoviti(auto-fit, minmax(300px, 1fr));
}

Budući da želite postaviti tekst u odnosu na njegov spremnik, morate postaviti položaj u odnosu na omot slike:

.slike-omotač {
položaj: relativna;
prelijevanje: skriven;
}

Sljedeći korak je stiliziranje slike. Prikažite sliku kao blok element, neka se proteže širinom cijelog spremnika i postavite je u središte svog spremnika:

.slike-omotač > img {
prikaz: blok;
širina: 100%;
omjer stranica: 1 / 1;
pristajanje objekta: pokriti;
objekt-položaj: centar;
}

Što se tiče teksta, postavite ga u sredinu i dajte prozirnu, svijetlo sivu boju pozadine:

.slike-omotač > .sadržaj {
položaj: apsolutni;
umetnuti: 0;
veličina fonta: 2rem;
podstava: 1rem;
pozadina: rgba(255, 255, 255, .4);
prikaz: savijati;
align-items: centar;
opravdati-sadržaj: centar;
}

Spremite CSS datoteku i otvorite je index.html u vašem pregledniku. Trebali biste pronaći stranicu sličnu onoj na slici ispod.

Postavljanje prijelaza na slike i tekstove

Sada kada ste primijenili osnovne stilove na slike, sljedeći korak je da im dodate malo animacije. Započnite dodavanjem prijelaza na obje slike i njihov odgovarajući tekst:

.slike-omotač > img,
.slike-omotač > .sadržaj {
tranzicija: 200msease-in-out;
}

To znači da će svi efekti prijelaza (tj. izbljeđivanje, zumiranje i zamućenje) trajati 200 milisekundi i imati istu vremensku krivulju.

Fade-In i Blur animacija

Prvi stil animacije blijedi u tekstu. Kada zadržite pokazivač iznad omota određene slike, sadržaj koji ima uvenuti klasa će imati ovaj efekt (fade-in i fade-out animacija) primijenjen na njega. To postižete postavljanjem neprozirnosti na nulu i promjenom na jedan kada miš lebdi na određenom omotu slike:

.slike-omotač > .sadržaj.uvenuti {
neprozirnost: 0;
}
.slike-omotač:lebdjeti > .sadržaj.uvenuti {
neprozirnost: 1;
}

Ako spremite datoteku i provjerite preglednik, vidjet ćete aktivnu animaciju koja se pojavljuje. Ali također možete primijetiti da je tekst pomalo teško čitati (ako je slika oštra i ima puno kontrasta). Podsjetimo se da sve slike također imaju naziv klase zamutiti. Ovo služi za zamućivanje slika kako bi se dodao prijeko potreban kontrast između njih i teksta:

slika-omotač:lebdjeti > img.zamutiti {
filtar: zamutiti(5px)
}

Sada kada prijeđete pokazivačem iznad slike, možete vidjeti da će se samo zamutiti. Možete povećati vrijednost piksela kako bi zamućenje bilo izraženije na slikama, čime se dodaje veći kontrast između njega i teksta.

Dodavanje ostalih efekata

Ostali efekti su klizanje teksta slijeva, zumiranje slike i dodavanje sivih tonova slici. Evo koda za postizanje sva tri učinka:

.slike-omotač > .sadržaj.slide-lijevo {
transformirati: prevestiX(100%)
}
.slike-omotač:lebdjeti > .sadržaj.slide-lijevo {
transformirati: prevestiX(0%)
}
.slike-omotač:lebdjeti > img.siva {
filtar: sivi tonovi(1)
}
.slike-omotač:lebdjeti > img.zamutiti {
filtar: zamutiti(5px)
}
.slike-omotač:lebdjeti > img.zum {
transformirati: mjerilo(1.1)
}

Spremite datoteku, zatim idite na svoj preglednik i zadržite pokazivač iznad svake slike. Trebali biste vidjeti različite učinke na djelu.

Da biste dovršili efekte klizanja, možete stvoriti još tri omotača slika, od kojih svaki sadrži sliku i tekst. Svaki dio teksta bi imao naziv klase povuci gore, spusti se, ili blago-desno. Tada biste proslijedili odgovarajuću vrijednost piksel, em ili rem, unutar transformirati() funkcija za stvaranje sva tri učinka.

CSS Grid i Flexbox

CSS Grid i Flexbox dvije su značajke koje vam omogućuju stvaranje fantastičnih izgleda za vaše web mjesto. S lakoćom možete stvoriti gotovo bilo koji izgled koji želite i prilagoditi retke i stupce svom ukusu. Stupci će također biti responzivni prema zadanim postavkama. Ako naučite kada koristiti jedno umjesto drugog, to će vam pomoći da postanete jedan posto najboljih CSS programera.