Fancy animasjoner som involverer sveving over bilder som brukes til å kreve JavaScript. Ikke mer! CSS er her for å friske opp miniatyrbildene og galleriene dine.
Bildeeffekter kan legge til et ekstra nivå av polering til nettstedet ditt. De skaper en jevn effekt, noe som gjør bildegallerier eller karuseller mer behagelige å navigere. Det beste er at du kan lage disse effektene med bare CSS og uten JavaScript.
Du kan lage forskjellige animasjonsstiler på bildene dine. Disse inkluderer uskarphet eller zooming av bakgrunnen, falming eller skyving i teksten og endring av bakgrunnsfarge.
Opprette HTML for bildene
Start med å lage en index.html filen inne i en tom mappe på datamaskinen din, og åpne deretter filen med et tekstredigeringsprogram. Inne i filen oppretter du HTML-skjelettet og legger til følgende markering i åpningsteksten og avslutningsteksten:
<divklasse="Nett">
<divklasse="bilde-innpakning">
<imgklasse="uklarhet"src=" https://picsum.photos/500?random=1"alt=""><divklasse="innhold blekner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonse
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasse="bilde-innpakning">
<imgklasse="zoom uskarphet"src=" https://picsum.photos/500?random=2"alt=""><divklasse="innhold blekner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonse
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasse="bilde-innpakning">
<imgklasse="uklarhet"src=" https://picsum.photos/500?random=3"alt=""><divklasse="innhold skyv-venstre">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonse
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div><divklasse="bilde-innpakning">
<imgklasse="grå"src=" https://picsum.photos/500?random=3"alt="">
<divklasse="innhold skyv-venstre">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonse
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>
Dette er en rutenettbeholder med fire bildeomslag. Div-elementene med bilde-innpakning klasse tjene som omslag for bildet og dets tilhørende tekst. Hver seksjons bilde og innhold har et unikt sett med klasser lagt til.
Inne i stilarket vil du målrette disse elementene ved deres klassenavn og bruk de forskjellige stil- og animasjonseffektene. Teksten vil ikke vises som standard; du vil bare vise det når du holder musepekeren over bildeomslaget, og bildet vil gjennomgå forskjellige effekter i prosessen.
Legger til grunnleggende CSS
Nå som du har laget HTML-en, er det på tide å style den med CSS. Lage en style.css fil og lenke til dette stilarket fra HTML-filen din, inne i seksjon:
<linkrel="stilark"href="style.css">Inne i din style.css fil, det første du må gjøre er å tilbakestille margen på kroppen til null og angi en bunnmargin:
kropp {
margin: 0;
marg-bunn: 20rem;
}Deretter må du gjøre om den ytterste beholderen til en CSS-rutenett som du kan bruke til å legge ut elementer i to dimensjoner. Følgende kode lager et rutenett med så mange kolonner eller rader som passer. Minimumsstørrelsen for hver kolonne er 300 piksler og maksimal størrelse er 1 brøkdel av beholderen:
.Nett {
vise: Nett;
rutenett-mal-kolonner: gjenta(automatisk tilpasning, minmax(300px, 1fr));
}Siden du vil plassere teksten i forhold til beholderen, må du angi posisjonen i forhold til bildeomslaget:
.image-wrapper {
posisjon: slektning;
flyte: skjult;
}
Neste trinn er å style bildet. Vis bildet som et blokkelement, la det spenne over hele beholderens bredde, og plasser det i midten av beholderen:
.image-wrapper > img {
vise: blokkere;
bredde: 100%;
størrelsesforholdet: 1 / 1;
objekttilpasning: dekke;
objekt-posisjon: senter;
}
Når det gjelder teksten, plasser den sentralt og gi en gjennomsiktig, lysegrå bakgrunnsfarge:
.image-wrapper > .innhold {
posisjon: absolutt;
innfelt: 0;
skriftstørrelse: 2rem;
polstring: 1rem;
bakgrunn: rgba(255, 255, 255, .4);
vise: bøye seg;
align-elementer: senter;
rettferdiggjøre-innhold: senter;
}
Lagre CSS-filen og åpne index.html i nettleseren din. Du bør finne en side som ligner den på bildet nedenfor.
Stille inn overgangen på bilder og tekster
Nå som du har brukt de grunnleggende stilene på bildene, er neste trinn å legge til litt animasjon til dem. Start med å legge til en overgang til begge bildene og tilhørende tekst:
.image-wrapper > img,
.image-wrapper > .innhold {
overgang: 200mslette inn-ut;
}
Dette betyr at alle overgangseffektene (dvs. fade-in, zoom og uskarphet) vil vare i 200 millisekunder og ha samme timingkurve.
Fade-In og Blur-animasjon
Den første animasjonsstilen blekner i teksten. Når du holder markøren over en bestemt bildeomslag, vil innholdet som har falme klasse vil ha denne effekten (fade-in og fade-out animasjon) brukt på den. Du oppnår dette ved å sette opasiteten til null og endre den til én når en mus svever på en bestemt bildeomslag:
.image-wrapper > .innhold.falme {
opasitet: 0;
}
.image-wrapper:sveve > .innhold.falme {
opasitet: 1;
}
Hvis du lagrer filen og sjekker nettleseren din, vil du se inntoningsanimasjonen i kraft. Men du vil kanskje også legge merke til at teksten er litt vanskelig å lese (hvis bildet er sterkt og har mye kontrast). Husk at alle bildene også har et klassenavn uklarhet. Dette er for å gjøre bildene uskarpe for å legge til en sårt tiltrengt kontrast mellom dem og teksten:
bilde-innpakning:sveve > img.uklarhet {
filter: uklarhet(5px)
}
Nå når du holder musepekeren over bildet, kan du se at det bare blir uskarpt. Du kan øke pikselverdien for å gjøre uskarphet mer uttalt på bildene, og dermed legge til mer kontrast mellom den og teksten.
Legge til andre effekter
De andre effektene er å skyve teksten fra venstre, zoome inn bildet og legge til gråtoner i bildet. Her er koden for å oppnå alle tre effektene:
.image-wrapper > .innhold.skyv-venstre {
forvandle: translateX(100%)
}.image-wrapper:sveve > .innhold.skyv-venstre {
forvandle: translateX(0%)
}.image-wrapper:sveve > img.grå {
filter: gråtoner(1)
}.image-wrapper:sveve > img.uklarhet {
filter: uklarhet(5px)
}
.image-wrapper:sveve > img.zoom {
forvandle: skala(1.1)
}
Lagre filen, gå til nettleseren din og hold musepekeren over hvert bilde. Du bør se de forskjellige effektene i aksjon.
For å fullføre slide-in-effektene kan du lage ytterligere tre bildeomslag, som hver inneholder et bilde og tekst. Hvert stykke tekst vil ha klassenavnet skli opp, Skli ned, eller svakt til høyre. Da sender du inn den riktige verdien piksel, em eller rem, inne i forvandle() funksjon for å lage alle tre effektene.
CSS Grid og Flexbox
CSS Grid og Flexbox er to funksjoner som lar deg lage fantastiske oppsett for nettstedet ditt. Du kan enkelt lage nesten hvilken som helst layout og tilpasse radene og kolonnene til din smak. Kolonnene vil også være responsive som standard. Å lære når du skal bruke den ene fremfor den andre vil hjelpe deg å bli en topp én prosent CSS-utvikler.
