Hvis du har og leter etter ideer for å få nettsteder til å vise seg å bli den neste store tingen etter A Song of Fire and Ice (Game of Thrones-serien for den ikke-boklesende befolkningen) uten å ta hjernen din, sjekk ut disse 15 CSS3 effekter vi har samlet for deg.

Fra opplæringsprogrammer til avtaler, vi gir deg 15 fantastiske effekter som vil forvandle nettsteder fra blah til wow!

Parallakseeffekt

Har du bla gjennom nettstedet ihatetomatoes som feirer 25 år med Nintendo Game Boy? Hvor fikk du også spille litt Tetris?

Eller kanskje surfet gjennom Rimmels nettsted imponert over hvor briljant varene dukker opp mot en fargerik bakgrunn av modeller?

Den 3D-aktige effekten som ser ut til å være den rave i å designe nå, kalles teknisk sett Parallax Effect. Designere elsker å leke med disse, men du må være subtil og strategisk siden det kan slå tilbake og ende opp med å skape et rotete rot.

Parallax-effekten eller Parallax-rulling er resultatet av at bakgrunnen lastes inn med en lavere hastighet enn forgrunnen din, og skaper et mer 3D-utseende. Høres det ut som mye arbeid? Ikke for noen som jobber smart, få et Parallax-tema helt ferdig allerede hos Cyberchimps.

Ken Burns-effekt

Dokumentarfilmskaperen var banebrytende for konseptet panorering og zooming inn i et statisk bilde. Grafisk designer brukte denne effekten rikelig, og du har kanskje til og med kommet over dette på mange nettsteder.

Effekten leder ikke bare øyeepler, bokstavelig talt, dit du vil at fokuset skal være, men legger også til et snev av intensitet til et bilde. Husker du å se en film der et gammelt fotografi ble blinket over skjermen, og fortelleren snakker om noe i bildet, mens rammen sakte panorerer og zoomer til det motivet?

Ken Burns-effekten har blitt ganske populær og med rette, da den gir en umiddelbar ansiktsløftning til enhver kjedelig nettside.

Halvsirkulær navigasjonsmeny

Du trenger ikke gå alt for å endre utseendet på nettstedet ditt. Noen ganger kan så lite som å gjøre unna alternativet for gamle og kjedelige menn hjelpe.

I stedet går du for et stilig sirkulært eller halvsirkulært navigasjonsalternativ som hjelper til med å vise frem en rekke menyalternativer. Noen designere inkluderer kun dette for delingsknapper for sosiale medier, men du vil bli overrasket over allsidigheten.

Fra den åpenbare musikkkonsollen og delingsikonene for sosiale medier, til hovedmenyen og profilikonene, er det mange måter å utnytte dette på.

Ønsker du ikke å rake hjernen din med å lage denne CSS3-effekten fra bunnen av? Få en gratis fra DealFuel.

Vis/skjul påloggingspanel

Skyvepaneler brukes ofte i disse dager, men det er hovedsakelig for å lette belastningen av for mange faner. Ikke nok designere eksperimenterer med potensialet til dette alternativet, fordi skyvepaneler kan være fordelaktige på så mange måter.

Vis frem innholdsemner, skap et ryddig utseende, øk estetikken eller bare vær annerledes enn konvensjonelt utformede nettsteder. Vis/skjul påloggingspanelet er et must for hvert WordPress-nettsted, det gir en oversikt over dashbordet med flere menyalternativer når du logger på. Finn ut mer om dette panelet her.

Skyveinnloggingsskjema

Et annet påloggingspanelalternativ som skyves for å avsløre mer innhold er et flott trekk når du vil at abonnenter skal legge inn litt mer informasjon enn bare e-postadresse og navn, men samtidig ikke vil overvelde dem.

Hvis du også reduserer plassen, bør du definitivt sjekke dette ut, da det vil være nyttig når du lager nettsteder med minimalistisk tema.

3D-bånd og 3D-effekter

Hvis du fortsatt er skremt av Parallax-effekten og frykter at du vil rote til, start i det små. Bruk 3D-bånd, forskjellige nyanser og skygger for å skape en generell illusjon av dybde på nettstedet ditt, og dermed gjengi en 3D-effekt.

3D-båndene i seg selv ser helt fantastiske ut. Bruk dette for å fremheve en del av nettstedet eller på et offisielt sertifiseringsdokument som du vil legge ut, disse vil øke den generelle visuelle appellen til siden.

Vet hvordan du lager effekten ved å bruke CSS3 på pvmgarage.

Coverflow-effekt

Overveiende brukt på bokbaserte nettsteder, har du definitivt sett denne effekten på Mac- eller Apple-enheten din når du blar gjennom bilder. Coverflow-effekten viser en rekke elementer – som bokomslag – der du deretter kan sveipe enten til venstre eller høyre for å se omslaget, få noen popup-detaljer og velge dem.

Høres dette interessant ut? Vil du implementere dette i et prosjekt? Hvis ja, så definitivt bla gjennom dette stykket.

CSS3-overganger

Designere som spiller smart i stedet for hardt vet at det ikke skal mye til for å legge til mojo på nettstedet ditt, en endring av tema her, noen få skygge- og skyggeelementer der, og du kan faktisk transformere siden din. En annen måte å gjøre det på er ved å animere sideinnholdet ditt gjennom CSS3-overganger.

Fra bokstavavstand til tekstskygge, lek med alt du liker for å se hva som passer best. Her er også en flott gratisbit som består av et omfattende utvalg av overgangseffekter.

CSS3-animasjon med snøtema

Snuser du fortsatt med ettervirkningen av høytiden? CSS3-animasjoner med snøtema har ikke bare et festlig preg, men fungerer også bemerkelsesverdig godt for enkelte nettsteder som for et iskremmerke.

Det er raskt og enkelt å bruke og kan endre utseendet på nettstedet eller bloggsiden din for å utfylle et tema eller en sesong.

Animasjon

Animasjoner kan gjøre underverker for nettsteder, selv om det er subtilt utført. Det fanger oppmerksomhet og hjelper også med konverteringer siden oppmerksomheten er rettet mot handlingsoppfordringen.

Eller rett og slett, det legger til den pålydende verdien av en side om ikke annet. Her er noen flotte spesielle animasjonseffekter du kan sjekke ut.

Boktrykkseffekt

Du har sikkert sett de Instagram-sitatinnleggene med det pregede tekstutseendet? Det er slik boktrykkseffekten ser ut og blir også ganske populær innen webdesign.

Dette har en omvendt maskinskrevet følelse, men den viser et elegant og elegant utseende. Absolutt anbefalt hvis din er en nettpublikasjon eller en blogg. Også, hvis du ønsker å sette inn et snev av profesjonelt uten å gå all C-suite, vil dette hjelpe. Her er en veiledning om hvordan du kan bruke boktrykkseffekten med CSS3.

Vende sirkel

Litt informasjon har ikke bare skadet noen, men kan også være nettstedets USP. Et nettsted som det som kaster tilfeldige fakta ved hver oppdatering, kan jobbes inn i et slags galleri med bilder som har et lite håndtak, som når du klikker på det åpnes for å vise litt morsomme trivia.

Men selv på vanlige nettsteder er en blasirkel av stor betydning. Den komprimerer informasjon, slik at du ikke har en side som yrer av tekst. Og den har også en kul 3D-følelse. Her er en veiledning om hvordan du lager en vendesirkel.

Mega meny

Du har sikkert sett dem på e-handelsnettsteder der mange kategorier må plasseres rett på landingssiden, men uten å lage en overfylt menylinje.

Alternativet Mega Menu er også et must for utdanningsbransjen, har du et universitetsnettsted som viser alle hovedkursene, opptaksinformasjon og studentenes resultater og mye mer?

Mega-menyen kan hjelpe til med å rydde opp, lage et skarpere menylinjealternativ og ikke forvirre leserne til å klikke på feil alternativ på grunn av lengre, tettere menyalternativer. Du kan også score mye ved å ta tak i responsive Mega Menu gratis.

Trekkspillgalleri

Det er to måter å holde leserne engasjert på nettstedet ditt, bånd ut kraftig innhold og trekke deres oppmerksomhet til det kraftige innholdet. En statisk side kan fange leserens øyne, men noe interaktivt som et trekkspillgalleri vil fange leserens øyne.

Trekkspillgallerier – enten du velger å vise frem ditt beste porteføljeverk eller få oppmerksomhet til bestselgerproduktet ditt – vil alltid fungere. Du har bare 6 sekunder på deg til å fange leserens oppmerksomhet og holde dem på siden, bruk Trekkspillgalleriet for å få og beholde oppmerksomheten deres på nettstedet ditt langt lenger. Her er en flott tilpasningsbar Accordion Gallery-plugin som du kan hente gratis.

Lysboks

Hvor viktig er et rutenettgalleri? Hvis du er en fotograf, en artist eller bare en blogger, kan det bety din neste store konsert.

Et rutenettgalleri viser alle dine beste stykker rett ut! Fra det fantastiske bildet av solnedgangen på toppen av en ås til det intense gateportrettet, imponer dem, få ordet eller rett og slett lokke dem til å vinne en kontrakt, et rutenettgalleri kan være din beste CV fremover.

Som designer er dette noe du ikke bare bør vurdere for kundens arbeid, men også for ditt eget nettsted. Få arbeidet ditt til å kjempe for deg og gå god for din kreative dyktighet, et rutenettgalleri er gull verdt.

Men du får det for ingenting i denne avtalen, så kjøp den nå!

Hvilken av disse vil du anbefale til en venn?