CSS3 hefur kynnt óteljandi möguleika fyrir UX hönnuði og það besta við þá er að svalasta hlutarnir eru mjög einföld í framkvæmd.
Bara nokkrar línur af kóða mun gefa þér frábært umskipti áhrif sem mun spenna notendum þínum, auka þátttöku og að lokum, þegar það er notað vel, auka viðskipti þín. Það sem meira er, þessi áhrif eru vélbúnaðinn flýttur og framsækið aukning sem þú getur notað núna.
Hér eru 8 mjög einföld áhrif sem vilja bæta lífinu við tölvuna þína og brosa til andlit notenda.
Öll þessi áhrif (bar einn) eru stjórnað með umskipti eign. Þannig að við sjáum þessi áhrif vinna, við munum setja upp div á HTML síðu:
Hafa gert það, stilltu breidd þess og hæð (þannig að það hefur mál), bakgrunnslit hennar (svo við getum séð það) og yfirfærslueign hennar.
Umskipti eignin hefur þrjú gildi: eiginleikar við umskipti (í öllum tilvikum okkar) hraða umbreytingarinnar (í okkar tilviki 0,3 sekúndur) og þriðja gildi sem gerir þér kleift að breyta því hvernig hröðun og hraðaminnkun er reiknuð en við erum ' Haltu áfram með sjálfgefið með því að láta þetta eyða.
Nú er allt sem við þurfum að gera er að breyta eignum og þeir munu gera okkur kleift að ...
Ef þú vilt fylgja eftir sem þú getur sækja skrárnar hér.
Having hluti hverfa í er nokkuð algeng beiðni frá viðskiptavinum. Það er frábær leið til að leggja áherslu á virkni eða vekja athygli á aðgerð.
Fade í áhrifum eru dulmáli í tveimur skrefum: Í fyrsta lagi setur þú upphafsstaða; Næst setur þú breytinguna, til dæmis á sveima:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Gakktu úr skugga um að þú setjir bekkinn í div þinn til að "hverfa" til að sjá þetta vinna.)
Til að vaxa frumefni þurfti þú að nota breidd og hæð, eða púði. En nú getum við notað umbreytingu CSS3 til að stækka.
Stilltu div bekk þinn til að "vaxa" og þá bæta þessum kóða við stíll þinn blokk:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS umbreytingar hafa ýmsar mismunandi notkanir, og einn af þeim bestu er að breyta snúningi frumefni. Gefðu Div þinn bekknum "snúið" og bættu eftirfarandi við CSS þinn:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D skuggar voru rifnar á í eitt ár eða svo, vegna þess að þau voru ekki talin samhæf við íbúð hönnun, sem er auðvitað bull, þau vinna frábærlega vel til að gefa notendum endurgjöf um samskipti þeirra og vinna með íbúð eða falsa 3D tengi .
Þessi áhrif eru náð með því að bæta kassaskugga og síðan færa frumefni á x-ásinn með því að nota umbreytinguna og þýða eiginleika þannig að það virðist vaxa út af skjánum.
Gefðu div þinn bekknum "þræta" og þá bæta við eftirfarandi kóða við CSS þinn:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Eitt af heitasta hnappastillunum núna er draugurhnappurinn; hnappur án bakgrunnar og þungur landamæri. Við getum auðvitað bætt við landamærum að frumefni einfaldlega, en það mun breyta stöðu frumefnisins. Við gætum lagað þetta vandamál með því að nota límvatn, en mun einfaldari lausnin er umskipti í landamærum með skugga um innrauða kassa.
Gefðu div þinn bekknum "landamærin" og bættu eftirfarandi CSS við stílum þínum:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}