Blog de l'Agence web KN

Webdesign : animations et dégradés avec le CSS3

Webdesign: Faites vos animations et dégradés facilement avec le CSS3 Generator !

image pour Webdesign : animations et dégradés avec le CSS3
AccueilBlogWebdesign : animations et dégradés avec le CSS3

Le webdesign joue, en effet, un rôle essentiel dans l’attractivité d’un site. Les animations et dégradés rendent les pages interactives mais surtout attractives. En effet, les clients et prospects doivent avoir envie d’explorer et de revisiter le plus souvent possible le site Web que vous concevez.  Pour cela, n’hésitez pas à utiliser le CSS3 Generator !

Voici les animations et les dégradés propres au CSS3 Generator. Vous trouverez aussi des liens vers des sites ressources pour vous aider à coder plus rapidement.

1 – Webdesign : les animations avec le CSS3

Les animations CSS sont enfin disponibles dans tous les principaux navigateurs, même dans IE (depuis la version 10).

Deux façons de créer des animations CSS

Une façon très simple

Elle se fait en animant les changements de propriétés CSS avec la déclaration de transition. Avec les transitions, vous pouvez créer des effets de survol ou de souris, ou vous pouvez déclencher l’animation en changeant le style d’un élément avec JavaScript. 

Une façon un peu plus compliquée mais intéressante

Un peu plus compliquée, cette façon implique la description de moments spécifiques de l’animation avec le code @keyframe. Cela vous permet d’avoir des animations répétitives, qui ne dépendent pas des actions de l’utilisateur, ni de JavaScript pour être déclenchées.

Un conseil

Je vous conseille le site CSS3 Generator pour se simplifier la tâche et perfectionner l’art du copié/collé !

Voir le site

 

2 – Webdesign : les dégradés avec le CSS3

Lors du Webdesign, l’utilisation de dégradés est assez courante. Les dégradés CSS donnent aux webdesigners le pouvoir de créer des transitions fluides entre les couleurs sans avoir à recourir aux images. Par conséquent, cela évite de surcharger le poids d’une page et permet d’accélérer le temps de chargement.

Disponibles maintenant presque partout 

Les dégradés CSS ont également fière allure sur les écrans Rétina (HD). En effet, ils sont générés à la volée. Ils sont linéaires ou radiaux. En même temps, ils peuvent être configurés pour se répéter. Ils existent depuis un certain temps. Mais, après quelques changements mineurs de syntaxe, ils sont enfin disponibles maintenant presque partout, sans préfixe !

Un exemple

Voici un site pour générer vos dégradés:

Gradient Editor

En résumé,

En webdesign, les animations et dégradés permettent une attractivité intéressante et sont attractifs pour les internautes. Les réaliser en utilisant le CSS3 Generator permet une facilité que les développeurs devraient apprécier ! 

 

 

Les requêtes SQL lors d’une migration ou d’une création WordPress

Quelques lignes de codes pour gagner de précieuses minutes lors d'une mise en production...

Lire la suite
Back to top