CSS3 har introduceret utallige muligheder for UX-designere, og det bedste ved dem er, at de fedeste dele er meget enkle at implementere.
Bare et par linjer med kode vil give dig en fantastisk overgangseffekt, der vil begejstre dine brugere, øge engagementet og i sidste ende, når de bruges godt, øge dine konverteringer. Derudover er disse effekter hardwareaccelereret og en progressiv forbedring, som du kan bruge lige nu.
Her er 8 virkelig enkle effekter, der vil tilføje liv til din brugerflade og smiler til dine brugers ansigter.
Alle disse effekter (bar et) styres med overgangsegenskaben. Så vi kan se disse effekter virker, vi opretter en div på en HTML-side:
Når du har gjort det, skal du have bredde og højde (så den har dimensioner), dens baggrundsfarve (så vi kan se det) og dens overgangsegenskab.
Overgangsegenskaben har tre værdier: Egenskaberne til overgang (i vores tilfælde alle) overgangshastigheden (i vores tilfælde 0,3 sekunder) og en tredje værdi, som lader dig ændre, hvordan acceleration og deceleration beregnes, men vi ' Jeg vil holde fast ved standarden ved at lade dette stå tomt.
Nu er alt, hvad vi skal gøre, ændret egenskaber, og de vil animere for os ...
Hvis du gerne vil følge med, kan du download demo filerne her.
At have ting falme ind er en ret almindelig anmodning fra klienter. Det er en fantastisk måde at understrege funktionalitet på eller gøre opmærksom på et opfordring til handling.
Fade in effects er kodet i to trin: først indstiller du den indledende tilstand; næste sætter du ændringen, for eksempel på svømmeren:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Sørg for at sætte klassen af din div til "falme" for at se dette arbejde.)
For at vokse et element, du plejede at bruge sin bredde og højde, eller dens polstring. Men nu kan vi bruge CSS3's transformation til at forstørre.
Indstil din divs klasse til at "vokse" og derefter føje denne kode til din stilblok:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-transformer har en række forskellige anvendelser, og en af de bedste transformerer rotationen af et element. Giv din div klassen "roter" og tilføj følgende til din CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D-skygger blev forfrisket i et år eller deromkring, fordi de ikke blev betragtet som kompatible med fladt design, hvilket naturligvis er tåget, de arbejder fantastisk godt for at give brugeren feedback om deres interaktioner og arbejde med flade eller falske 3D-grænseflader .
Denne effekt opnås ved at tilføje en bokseskygge og derefter flytte elementet på x-aksen ved hjælp af transformations- og oversættelsesegenskaberne , så det ser ud til at vokse ud af skærmen.
Giv din div klassen "threed" og tilføj derefter følgende kode til din CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}En af de hotteste knappestile lige nu er spøgelsesknappen; en knap uden baggrund og en tung grænse. Vi kan naturligvis blot tilføje en grænse til et element, men det vil ændre elementets position. Vi kunne løse problemet ved hjælp af boksformatering, men en langt enklere løsning er overgangen i en kant ved hjælp af en indskæringsboksskygge.
Giv din div klassen "grænse" og tilføj følgende CSS til dine stilarter:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}