CSS3 heeft talloze mogelijkheden voor UX-ontwerpers geïntroduceerd, en het beste ding over hen is dat de coolste onderdelen echt eenvoudig te implementeren zijn.
Slechts een paar regels code geven je een geweldig overgangseffect dat je gebruikers enthousiast maakt, de betrokkenheid verhoogt en uiteindelijk, wanneer goed gebruikt, je conversies verhoogt. Bovendien zijn deze effecten hardware-versneld en een progressieve verbetering die u nu kunt gebruiken.
Hier zijn 8 heel simpele effecten die uw gebruikersinterface een nieuw leven zullen geven en een glimlach op de gezichten van uw gebruikers zullen toveren.
Al deze effecten (balk één) worden bestuurd met de overgangseigenschap. Dus we kunnen deze effecten zien werken, we zullen een div opstellen in een HTML-pagina:
Nadat u dit hebt gedaan, stelt u de breedte en hoogte in (dus het heeft dimensies), de achtergrondkleur (zodat we het kunnen zien) en de overgangseigenschap.
De overgangseigenschap heeft drie waarden: de eigenschappen om over te schakelen (in ons geval allemaal) de snelheid van de overgang (in ons geval 0,3 seconden) en een derde waarde waarmee u kunt wijzigen hoe de versnelling en vertraging worden berekend, maar wij ' blijf bij de standaard door dit leeg te laten.
Nu hoeven we alleen maar de eigenschappen te veranderen en ze zullen voor ons animeren ...
Als je mee wilt volgen, kan dat download hier de demo-bestanden.
Dingen laten vervagen is een vrij algemeen verzoek van klanten. Het is een geweldige manier om functionaliteit te benadrukken of de aandacht te vestigen op een oproep tot actie.
Fade-in effecten worden in twee stappen gecodeerd: eerst stelt u de begintoestand in; vervolgens stelt u de wijziging in, bijvoorbeeld bij zweven:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Zorg ervoor dat u de klasse van uw div instelt op "fade" om dit te laten werken.)
Om een element te laten groeien, moest je de breedte en hoogte of de vulling gebruiken. Maar nu kunnen we CSS3's transformatie gebruiken om te vergroten.
Stel de klasse van je div in op "groeien" en voeg deze code vervolgens toe aan je stijlblok:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}CSS-transformaties kunnen op verschillende manieren worden gebruikt en een van de beste is het transformeren van de rotatie van een element. Geef je div de klasse "roteren" en voeg het volgende toe aan je CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}3D-schaduwen werden een jaar of zo afgekeurd, omdat ze niet werden gezien als compatibel met plat ontwerp, wat natuurlijk onzin is, ze werken fantastisch goed om een gebruiker feedback te geven over hun interacties en te werken met platte of nep 3D-interfaces .
Dit effect wordt bereikt door een doosschaduw toe te voegen en vervolgens het element op de x-as te verplaatsen met behulp van de eigenschappen transformeren en vertalen, zodat het lijkt te groeien buiten het scherm.
Geef je div de klasse "threed" en voeg vervolgens de volgende code toe aan je CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Een van de populairste knopstijlen op dit moment is de Ghost-knop; een knop zonder achtergrond en een zware rand. We kunnen natuurlijk eenvoudig een rand aan een element toevoegen, maar dat zal de positie van het element veranderen. We kunnen dat probleem oplossen met behulp van box-dimensionering, maar een veel eenvoudigere oplossing is de overgang in een rand met behulp van een inzetbakschaduw.
Geef je div de klasse "border" en voeg de volgende CSS toe aan je stijlen:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}