Tyylikkäät animaatiot, joissa vietiin hiiren osoitin kuvien päälle, vaativat JavaScriptiä. Ei enempää! CSS on täällä elävöittämään pikkukuviasi ja gallerioitasi.
Kuvan hover-tehosteet voivat lisätä verkkosivustollesi lisäkiillotusta. Ne luovat tasaisen vaikutelman, mikä tekee kuvagallerioista tai karuselleista miellyttävämpää navigoida. Parasta on, että voit luoda näitä tehosteita vain CSS: llä ilman JavaScriptiä.
Voit luoda kuviisi erilaisia animaatiotyylejä. Näitä ovat taustan hämärtäminen tai zoomaus, tekstin häivytys tai liukuminen ja taustavärin muuttaminen.
HTML-koodin luominen kuville
Aloita luomalla index.html tiedosto tietokoneesi tyhjään kansioon ja avaa tiedosto sitten tekstieditorilla. Luo tiedoston sisällä HTML-runko ja lisää seuraavat merkinnät avaavan body- ja sulkevan body-tunnisteen sisään:
<divluokkaa="verkko">
<divluokkaa="image-wrapper">
<imgluokkaa="hämärtää"src=" https://picsum.photos/500?random=1"alt=""><divluokkaa="sisältö haalistuu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta mainos
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divluokkaa="image-wrapper">
<imgluokkaa="zoom sumeus"src=" https://picsum.photos/500?random=2"alt=""><divluokkaa="sisältö haalistuu">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta mainos
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divluokkaa="image-wrapper">
<imgluokkaa="hämärtää"src=" https://picsum.photos/500?random=3"alt=""><divluokkaa="sisältö dia vasemmalle">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta mainos
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divluokkaa="image-wrapper">
<imgluokkaa="harmaa"src=" https://picsum.photos/500?random=3"alt="">
<divluokkaa="sisältö dia vasemmalle">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta mainos
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Tämä on ruudukkosäiliö, jossa on neljä kuvakäärettä. Div-elementit, joissa on kuvankääre luokka toimii kuvan ja sitä vastaavan tekstin kääreenä. Jokaisen osion kuvaan ja sisältöön on lisätty yksilöllinen sarja luokkia.
Tyylisivun sisällä voit Kohdista nämä elementit luokkanimien mukaan ja käytä erilaisia tyyli- ja animaatiotehosteita. Tekstiä ei näytetä oletusarvoisesti; näytät sen vain, kun viet hiiren osoittimen kuvakääreen päälle, jolloin kuva altistuu eri tehosteille.
Perus-CSS: n lisääminen
Nyt kun olet luonut HTML: n, on aika muotoilla se CSS: llä. Luo tyyli.css tiedosto ja linkki tähän tyylisivuun HTML-tiedostostasi jakso:
<linkkirel="tyylitaulukko"href="tyyli.css">Sinun sisälläsi tyyli.css tiedosto, ensimmäinen asia, joka sinun on tehtävä, on nollata rungon marginaali ja asettaa alamarginaali:
kehon {
marginaali: 0;
marginaali-ala: 20rem;
}Seuraavaksi sinun on käännettävä uloin säiliö a CSS-ruudukko, jota voit käyttää elementtien asettamiseen kahdessa ulottuvuudessa. Seuraava koodi luo ruudukon, jossa on mahdollisimman monta saraketta tai riviä. Kunkin sarakkeen vähimmäiskoko on 300 kuvapistettä ja enimmäiskoko on 1 osa säilöstä:
.grid {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: toistaa(automaattinen sovitus, minmax(300px, 1fr));
}Koska haluat sijoittaa tekstin suhteessa sen säilöön, sinun on asetettava sijainti suhteessa kuvan kääreeseen:
.image-wrapper {
asema: suhteellinen;
ylivuoto: piilotettu;
}
Seuraava askel on muotoilla kuva. Näytä kuva lohkoelementtinä, aseta se kattamaan koko säiliön leveyden ja aseta se säiliön keskelle:
.image-wrapper > img {
näyttö: lohko;
leveys: 100%;
kuvasuhde: 1 / 1;
esineeseen sopiva: peite;
objektin sijainti: keskusta;
}
Mitä tulee tekstiin, aseta se keskelle ja anna läpinäkyvä, vaaleanharmaa taustaväri:
.image-wrapper > .sisältö {
asema: ehdoton;
upotettu: 0;
Fonttikoko: 2rem;
pehmuste: 1rem;
tausta: rgba(255, 255, 255, .4);
näyttö: flex;
kohdista-kohteet: keskusta;
perustele-sisältö: keskusta;
}
Tallenna CSS-tiedosto ja avaa index.html selaimessasi. Sinun pitäisi löytää sivu, joka on samanlainen kuin alla olevassa kuvassa.
Siirtymän asettaminen kuville ja teksteille
Nyt kun olet käyttänyt kuviin perustyylejä, seuraava vaihe on lisätä niihin animaatiota. Aloita lisäämällä siirtymä molempiin kuviin ja niitä vastaavaan tekstiin:
.image-wrapper > img,
.image-wrapper > .sisältö {
siirtyminen: 200neitihelppous sisään-ulos;
}
Tämä tarkoittaa, että kaikki siirtymäefektit (eli häivytys, zoomaus ja sumennus) kestävät 200 millisekuntia ja niillä on sama ajoituskäyrä.
Fade-In ja Blur Animaatio
Ensimmäinen animaatiotyyli on häipymässä tekstissä. Kun viet hiiren tietyn kuvakääreen päälle, sisältö, jossa on haalistua luokassa tätä tehostetta (häivytys- ja häivytysanimaatio) sovelletaan siihen. Voit saavuttaa tämän asettamalla peittävyyden nollaan ja muuttamalla sen yhdeksi, kun hiiri liikkuu tietyn kuvan kääreen päällä:
.image-wrapper > .sisältö.haalistua {
opasiteetti: 0;
}
.image-wrapper:hover > .sisältö.haalistua {
opasiteetti: 1;
}
Jos tallennat tiedoston ja tarkistat selaimesi, häivytysanimaatio on voimassa. Mutta saatat myös huomata, että teksti on hieman vaikea lukea (jos kuva on jyrkkä ja siinä on paljon kontrastia). Muista, että kaikilla kuvilla on myös luokan nimi hämärtää. Tämä on tarkoitettu kuvien sumentamiseen, jotta niiden ja tekstin välille saadaan lisättyä kaivattua kontrastia:
kuvankääre:hover > img.hämärtää {
suodattaa: hämärtää(5px)
}
Kun nyt viet hiiren kuvan päälle, näet, että se vain hämärtyy. Voit suurentaa pikseliarvoa tehdäksesi epäterävyydestä selvemmän kuvissa, mikä lisää kontrastia sen ja tekstin välille.
Muiden tehosteiden lisääminen
Muita tehosteita ovat tekstin liu'uttaminen vasemmalta, kuvan zoomaus ja harmaasävyjen lisääminen kuvaan. Tässä on koodi kaikkien kolmen tehosteen saavuttamiseksi:
.image-wrapper > .sisältö.slide-vasen {
muuttaa: kääntääX(100%)
}.image-wrapper:hover > .sisältö.slide-vasen {
muuttaa: kääntääX(0%)
}.image-wrapper:hover > img.harmaa {
suodattaa: harmaasävy(1)
}.image-wrapper:hover > img.hämärtää {
suodattaa: hämärtää(5px)
}
.image-wrapper:hover > img.Zoomaus {
muuttaa: mittakaavassa(1.1)
}
Tallenna tiedosto, siirry sitten selaimeesi ja vie hiiri kunkin kuvan päälle. Sinun pitäisi nähdä erilaiset vaikutukset toiminnassa.
Voit viimeistellä liukuvat tehosteet luomalla vielä kolme kuvakäärettä, joista jokainen sisältää kuvan ja tekstin. Jokaisella tekstillä olisi luokan nimi liuku ylös, liukua alas, tai hieman oikealle. Sitten välität oikean arvon pikseli, em tai rem, sisällä muuttaa() toiminto luo kaikki kolme tehostetta.
CSS Grid ja Flexbox
CSS Grid ja Flexbox ovat kaksi ominaisuutta, joiden avulla voit luoda upeita asetteluja verkkosivustollesi. Voit luoda käytännössä minkä tahansa asettelun helposti ja muokata rivejä ja sarakkeita makusi mukaan. Sarakkeet ovat myös oletusarvoisesti responsiivisia. Kun opit käyttämään toista toiseen, voit tulla yhden prosentin huippu CSS-kehittäjäksi.