voici quelques liens bien utiles pour créer rapidement des styles et des boutons en CSS3.
Je rappelle que les navigateurs n’interprètent pas tous de la même manière les propriétés CSS3, notamment IE qui n’interprète les border-radius et les les box-shadow qu’à partir de la version 9, et n’interprètera le text-shadow que sur la version 10. Pas de problèmes pour Firefox, Chrome et Safari.
Vous pouvez comparer les compatibilités entre tous les navigateurs web et mobile sur le site http://caniuse.com.
Créer des styles, des transitions et des animations en CSS3
Personnellement, j’utilise le site http://www.css3maker.com/ qui permet en quelques clics de choisir les styles de son blocs et on aperçoit les changements graphiques en temps réels. Le site précise sur quels navigateurs les propriétés sélectionnées sont compatibles.
Pour créer des effet sur le survol d’un bouton par exemple il suffit de choisir l’état du bouton normal et au survol. On peut modifier le timing de l’animation, on peut jouer sur la déformation en perspective (skew), le degré de rotation (rotate), l’échelle (scale) et le déplacement latéral (translate).
http://www.css3maker.com/css3-transition.html
Un autre site qui propose ce service : http://css3generator.com/ on peut taper directement les valeurs souhaitées donc très pratique.
Créer un bouton d’action en CSS3
Autre site bien pratique http://www.webarti.com/best-CSS3-button-maker/
Il permet, toujours à l’aide d’outils graphiques, de choisir l’apparence de votre bouton et de générer du code CSS3 compatibles avec le maximum de navigateurs.
Il y a plusieurs propriétés telles que la police, les dimensions du boutons, l’ombre portée, les dégradés de couleurs, etc… et le code généré style aussi le survol du bouton, merci bien !
Voilà, amusez-vous bien avec vos CSS3 !
Si vous avez des questions sur les transitions, les animations, le CSS3 ou autre, n’hésitez pas à laisser un commentaire plus bas 😉