Recommencer
Fonctionne avec Firefox, Chrome, Safari et Opera.
Meilleur rendu sur Firefox 4+ car moins de bugs.
Cette expérimentation CSS demande toutefois pas mal de ressources car les blocs animés sont de taille importante,
il se peut donc que les animations soient peu fluides sur certains ordinateurs.
Aucun fallback n'est encore prévu pour Internet Explorer.
Animations : 100% CSS3 (transitions). jQuery : uniquement ajout de classes et de :disabled sur bouton submit, ainsi que l'envoi du formulaire via ajax.
Ces classes et pseudo-classe permettent de tenir compte de la réponse du formulaire via l'ajax. Ainsi, les animations ne pourront fonctionner qu'avec l'aide de ces classes.
Les unités rem et % sont utilisées, la page entière tient compte de la taille de caractère par défaut du navigateur, et tout est redimensionné en conséquence.
Seule image dans cette page : le fond appliqué à la balise <html>, tout le reste est fait avec des dégradés CSS.
Formulaire dynamique en CSS3 - v2 sur www.screenfeed.fr
Bugs :
- border-radius + scale() avec Safari et Opera,
- border-radius + box-shadow + scale() avec Safari et Chrome (fallback avec une couleur en moins),
- :after + transition avec Safari, Chrome et Opera,
- background-attachment:local non supporté par Firefox et Opera,
- radial-gradient non supporté par Opera (fallback avec linear-gradient),
- rem non supporté par Opera (fallback en px).