CSS3 har infört otaliga möjligheter för UX-designers, och det bästa med dem är att de coolaste delarna är väldigt enkla att implementera.
Bara ett par rader av kod kommer att ge dig en fantastisk övergångseffekt som kommer att excitera dina användare, öka engagemang och i slutändan, när de används bra, öka dina konverteringar. Dessutom är dessa effekter hårdvaruaccelererade och en progressiv förbättring som du kan använda just nu.
Här är 8 riktigt enkla effekter som kommer att lägga till livet till ditt användargränssnitt och ler mot användarnas ansikten.
Alla dessa effekter (bar ett) styrs med övergångsegenskapen. Så vi kan se dessa effekter fungerar, vi skapar en div på en HTML-sida:
Sedan har du gjort det, sätt dess bredd och höjd (så den har dimensioner), dess bakgrundsfärg (så vi kan se den) och dess övergångsegenskap.
Övergångsegenskapen har tre värden: egenskaperna att övergå (i alla fall alla) övergångshastigheten (i vårt fall 0,3 sekunder) och ett tredje värde som låter dig ändra hur accelerationen och retardationen beräknas, men vi " ll hålla fast vid standard genom att lämna detta tomma.
Nu behöver vi bara ändra egenskaper, och de kommer att animera för oss ...
Om du vill följa med kan du ladda ner demofilerna här.
Att ha saker att blekna är en ganska vanlig förfrågan från kunder. Det är ett bra sätt att betona funktionalitet eller uppmärksamma ett uppmaning till handling.
Fade in effects är kodade i två steg: Först ställer du in det ursprungliga tillståndet; Därefter ställer du in ändringen, till exempel på svävaren:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Se till att du anger klassen i din div för att "blekna" för att se detta fungera.)
För att odla ett element, du brukade använda sin bredd och höjd, eller vadderingen. Men nu kan vi använda CSS3s transform för att förstora.
Ställ din divs klass för att "växa" och lägg sedan till koden i ditt stilblock:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-omvandlingar har ett antal olika användningsområden, och en av de bästa omvandlar rotationen av ett element. Ge din div klassen "rotera" och lägg till följande i din CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D-skuggor var frowned på i ett år eller så, eftersom de inte kunde ses som kompatibla med plattform, vilket naturligtvis är nonsens, de arbetar fantastiskt bra för att ge användarens återkoppling om deras interaktioner och arbeta med platta eller falska 3D-gränssnitt .
Denna effekt uppnås genom att lägga till en boxskugga och sedan flytta elementet på x-axeln med hjälp av omvandlings- och översättningsegenskaperna så att den verkar växa ur skärmen.
Ge din div klassen "threed" och lägg sedan till följande kod i din CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}En av de hetaste knappstilarna just nu är spökknappen; en knapp utan bakgrund och en tung gräns. Vi kan givetvis helt enkelt lägga till en gräns för ett element, men det kommer att ändra elementets position. Vi kunde fixa det här problemet med hjälp av rutans storlek, men en mycket enklare lösning är övergången i en gräns med en inmatningsboxskugga.
Ge din div klassen "border" och lägg till följande CSS i dina stilar:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}