Voici la suite de ma précédente expérimentation CSS sur un formulaire animé. Pour le coup, je me suis « Bon, elle est bien rigolote cette petite enveloppe, mais ça serait mieux si je pouvais y mettre carrément le formulaire dedans… ».
Donc là, on voit les choses un peu plus en grand, prévoyez un bon bourrin sous le capot car les processeurs risquent de frotter un peu les bords.
Compatibilité
Fonctionne avec Firefox, Chrome, Safari et Opera.
Meilleur rendu sur Firefox 4+ car moins de bugs.
Aucun fallback n’est prévu pour Internet Explorer.
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.
Animations
100% CSS3 (transitions).
jQuery : uniquement ajout de classes et de :disabled sur bouton submit, ainsi que l’envoi du formulaire via ajax (mais il n’y a pas de script php pour réellement envoyer l’email, ce n’étais pas le but de cette expérimentation).
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.
Intégration
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.
Images
Aucune à part le fond de page (le fond appliqué à la balise ), tout le reste est fait avec des dégradés CSS.
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).
Commentaires
Commentaire de Korleon.
Je viens de faire le test et c’est vraiment top ! Merci.
Commentaire de Aspic.
Je ne connaissais pas ton site et je doit dire un grand merci a google de m’avoir orienter ici, il est super et t’est explication son géniale, continue STP :D
Commentaire de Véro.
Trrop fort ! je parcoure ton site depuis … 2 heures ? et je suis scotchée ! je prépare un nouveau cours HTML5/CSS3 et sur que j’orienterai mes étudiants vers ton blog. Merci :)
Commentaire de Greg.
Merci à toi, Véro :)
Commentaire de Sretsam.
Bonjour,
Tout simplement bravos pour se magnifique codage. Je me demandais si il était possible concrètement d’ajouter un code php pour envoyer le message ? J’ai essayé, mais sens grand succès, la page ne semble pas être diriger vers le code php … pourtant j’ai bien éditer l’action de <form dans l'html.
Bref encore bravos. Cordialement.
Commentaire de edou.
Excellent site Greg. Je suis tombé là par hasard cherchant à personnaliser mes boutons radio. Là, je suis scotché par toutes les possibilités du CSS 3.
Du coup tu me donnes l’envie d’apprendre à maîtriser ce <> (qui n’en est pas un mais bon…).
Encore chapeau bas maestro !
Commentaire de DecouverteWP.
Bonsoir,
Un peu hasard je tombe sur ton site!! J’adore!!! Merci beaucoup!!! Superbe travail!
Toutefois, une petite question, J’ai essayé d’ajouter du php pour l’envoi du formulaire mais ça n’a pas l’air de fonctionner. Pourrais-tu me dire s’il faut faire quelque chose de spécifique pour l’envoi du formulaire en method=POST? En te remerciant par avance!
Et encore bravo!!!