CSS3 on tuonut lukemattomia mahdollisuuksia UX-suunnittelijoille, ja paras niistä on, että tyylikkäät osat ovat todella yksinkertaisia toteuttaa.
Vain pari riviä koodia antaa sinulle mahtavaa siirtymätehokkuutta, joka herättää käyttäjiäsi, lisää sitoutumista ja lopulta, kun sitä käytetään hyvin, lisää tuloksia. Lisäksi nämä vaikutukset ovat laitteiston kiihdytys ja progressiivinen lisälaite, jota voit käyttää juuri nyt.
Tässä on 8 todella yksinkertaista vaikutusta, jotka lisäävät käyttöliittymän käyttöiän ja hymyilevät käyttäjän kasvot.
Kaikki nämä vaikutukset (bar yksi) ohjataan siirtymäominaisuudella. Joten voimme nähdä nämä vaikutukset toimiviin, luomme divin HTML-sivulle:
Kun olet tehnyt niin, aseta sen leveys ja korkeus (niin se on mitat), sen taustaväri (niin voimme nähdä sen) ja sen siirtymisominaisuuden.
Siirtymäominaisuudella on kolme arvoa: siirtymän ominaisuudet (meidän tapauksessamme kaikki) siirtymän nopeus (meidän tapauksessamme 0,3 sekuntia) ja kolmas arvo, jonka avulla voit muuttaa kiihtyvyyden ja hidastuvuuden laskemista, ll pysäyttää oletusarvon jättämällä tämän tyhjäksi.
Nyt meidän tarvitsee vain muuttaa ominaisuuksia, ja he animoivat meille ...
Jos haluat seurata pitkin, voit lataa demotiedostot täältä.
Kun asiat haalistuvat, on melko tavallinen asiakkaiden pyyntö. Se on erinomainen tapa korostaa toiminnallisuutta tai kiinnittää huomiota toimintaan.
Haalistuminen vaikutuksissa koodataan kahdessa vaiheessa: ensin määrität alkutilan; seuraavaksi asetat muutoksen, esimerkiksi hiiren osoitin:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Varmista, että olet määrittänyt divasi luokan "haalistumaan" nähdäksesi tämän työn.)
Elementin kasvattamiseksi sinun tarvitsi käyttää sen leveyttä ja korkeutta tai sen pehmusteita. Mutta nyt voimme käyttää CSS3: n muunnosta laajentumaan.
Määritä div-luokansi "kasvaa" ja lisää sitten tämä koodi tyylilohkoon:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-muunnoksilla on useita eri käyttötarkoituksia, ja yksi parhaista on muuntaa elementin kierto. Anna div-luokkasi "pyöräytä" ja lisää seuraaviin CSS: ään:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Kolmiulotteiset varjot piti silmänräpäyksessä noin vuoden, koska niitä ei pidetty yhteensopivina tasomallin kanssa, joka on tietenkin hölynpölyä, ne toimivat fantastisesti hyvänä, jotta käyttäjät saisivat palautetta vuorovaikutuksestaan ja toimisivat tasainen tai väärennettyjen 3D-rajapintojen kanssa .
Tämä vaikutus saavutetaan lisäämällä laatikkomassa ja siirtämällä elementti x-akselilla muunnos- ja kääntämisominaisuuksilla niin, että se näyttää kasvavan näytöstä.
Anna juttusi luokalle "kolmasosa" ja lisää sitten seuraava koodi CSS: ään:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Yksi kuumimmista napityypeistä juuri nyt on haamupainike; painike ilman taustaa ja raskas raja. Voimme tietysti lisätä rajan elementtiin yksinkertaisesti, mutta se muuttaa elementin asemaa. Voisimme korjata ongelman laatikoiden koon mukaan, mutta paljon yksinkertaisempi ratkaisu on siirtyminen rajalle upotusruudun varjolla.
Anna diville luokan "border" ja lisää seuraava CSS tyyliisi:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}