CSS3 har introdusert utallige muligheter for UX-designere, og det beste med dem er at de kuleste delene er veldig enkle å implementere.
Bare et par kodelinjer vil gi deg en fantastisk overgangseffekt som vil opphisse brukerne dine, øke engasjementet og til slutt øke konverteringene når de brukes godt. Dessuten er disse effektene maskinvare akselerert, og en progressiv forbedring som du kan bruke akkurat nå.
Her er 8 veldig enkle effekter som vil legge til livet til brukergrensesnittet ditt og smiler til brukerens ansikter.
Alle disse effektene (bar ett) styres med overgangseiendommen. Så vi kan se disse effektene fungerer, vi vil sette opp en div på en HTML-side:
Etter å ha gjort det, sett bredden og høyden (slik at den har dimensjoner), dens bakgrunnsfarge (slik at vi kan se den) og dens overgangseiendom.
Overgangseiendommen har tre verdier: egenskapene til overgang (i alle tilfeller alle) overgangshastigheten (i vårt tilfelle 0,3 sekunder) og en tredje verdi som lar deg endre hvordan akselerasjon og retardasjon beregnes, men vi ' Jeg vil holde fast ved å la dette stå tomt.
Nå er alt vi trenger å gjøre, forandre egenskaper, og de vil animere for oss ...
Hvis du vil følge med, kan du Last ned demo-filene her.
Å ha ting å falme i er en ganske vanlig forespørsel fra klienter. Det er en fin måte å understreke funksjonalitet eller trekke oppmerksomhet på en oppfordring til handling.
Fade in effects er kodet i to trinn: Først setter du opprinnelig tilstand; neste, du angir endringen, for eksempel på svingeren:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Pass på at du stiller klassen din div til "visne" for å se dette arbeidet.)
For å vokse et element, pleide du å bruke sin bredde og høyde, eller dens polstring. Men nå kan vi bruke CSS3s transformasjon til å forstørre.
Sett div-klassen din for å "vokse" og legg til denne koden i stilblokken din:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-transformasjoner har en rekke forskjellige bruksområder, og en av de beste forvandler rotasjonen av et element. Gi din div klassen "roter" og legg til følgende i CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D-skygger ble frowned på i et år eller så, fordi de ikke ble sett på som forenlig med flat design, som selvfølgelig er tull, de jobber utrolig bra for å gi brukeren tilbakemeldinger om deres interaksjoner og arbeider med flate eller falske 3D-grensesnitt .
Denne effekten oppnås ved å legge til en bokseskygge, og deretter flytte elementet på x-aksen ved hjelp av transformasjonen og oversette egenskapene slik at den ser ut til å vokse ut av skjermen.
Gi din div klassen "Threed" og legg deretter til følgende kode i CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}En av de heteste knappestillingene akkurat nå er spøkelsesknappen; en knapp uten bakgrunn og en tung grense. Vi kan selvsagt legge til en kant på et element, men det vil endre elementets posisjon. Vi kunne fikse dette problemet ved hjelp av boksstørrelsen, men en langt enklere løsning er overgangen i en kantlinje ved hjelp av en innskuddskasse.
Gi din div klassen "border" og legg til følgende CSS i stilene dine:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}