CSS3 a introduit d'innombrables possibilités pour les concepteurs UX, et la meilleure chose à leur sujet est que les parties les plus cool sont vraiment simples à implémenter.
Seules quelques lignes de code vous donneront un effet de transition génial qui excitera vos utilisateurs, augmentera leur engagement et, en fin de compte, augmentera vos conversions. De plus, ces effets sont accélérés par le matériel et une amélioration progressive que vous pouvez utiliser dès maintenant.
Voici 8 effets très simples qui ajouteront de la vie à votre interface utilisateur et souriront aux visages de vos utilisateurs.
Tous ces effets (une barre) sont contrôlés avec la propriété de transition. Donc, nous pouvons voir ces effets fonctionner, nous allons configurer un div dans une page HTML:
Après l'avoir fait, définissez sa largeur et sa hauteur (de sorte qu'il a des dimensions), sa couleur d'arrière-plan (pour que nous puissions le voir) et sa propriété de transition.
La propriété de transition a trois valeurs: les propriétés de transition (dans notre cas toutes) la vitesse de la transition (dans notre cas de 0,3 seconde) et une troisième valeur qui vous permet de modifier la façon dont l’accélération et la décélération sont calculées, mais nous Je m'en tiendrai à la valeur par défaut en laissant ce champ vide.
Maintenant, tout ce que nous avons à faire est de changer les propriétés, et ils vont nous animer ...
Si vous souhaitez suivre, vous pouvez Téléchargez les fichiers de démonstration ici.
Faire disparaître les choses est une demande assez courante des clients. C'est un excellent moyen de mettre l'accent sur la fonctionnalité ou d'attirer l'attention sur un appel à l'action.
Les effets de fondu sont codés en deux étapes: vous définissez d'abord l'état initial; Ensuite, vous définissez le changement, par exemple en vol stationnaire:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Assurez-vous de définir la classe de votre div pour "fondu" pour voir ce travail.)
Pour développer un élément, vous deviez utiliser sa largeur et sa hauteur, ou son remplissage. Mais maintenant, nous pouvons utiliser la transformation de CSS3 pour l'agrandir.
Définissez la classe de votre div pour "croître", puis ajoutez ce code à votre bloc de style:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Les transformations CSS ont un certain nombre d'utilisations différentes, et l'une des meilleures consiste à transformer la rotation d'un élément. Donnez à votre div la classe "rotate" et ajoutez ce qui suit à votre CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Les ombres 3D ont été mal vues pendant un an environ, parce qu'elles n'étaient pas considérées comme compatibles avec le design plat, ce qui est bien sûr absurde, elles fonctionnent fantastiquement bien pour donner un retour d'utilisateur sur leurs interactions et travailler avec des interfaces 3D plates ou fausses .
Cet effet est obtenu en ajoutant une ombre de boîte, puis en déplaçant l'élément sur l'axe des x en utilisant les propriétés de transformation et de traduction , de manière à ce qu'il semble sortir de l'écran.
Donnez à votre div la classe "threed" puis ajoutez le code suivant à votre CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}L'un des styles les plus populaires en ce moment est le bouton fantôme; un bouton sans arrière-plan et une bordure épaisse. Nous pouvons bien sûr ajouter une bordure à un élément simplement, mais cela changera la position de l'élément. Nous pourrions résoudre ce problème en utilisant le dimensionnement des boîtes, mais une solution beaucoup plus simple est la transition dans une bordure à l’aide d’une ombre en boîte.
Donnez à votre div la classe "border" et ajoutez le CSS suivant à vos styles:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}