2015_2016:s1:webdoc:td5
Table of Contents
TD5 Approfondissement CSS
Manier les selecteurs comme personne
L'objectif de cet exercice est de vous aider à manier avec précision les selecteurs et les propriétés CSS.
A Faire :
* Votre mission si vous l'acceptez est de modifier la page web du TD précédent en suivant les 3 points ci-dessous :
- supprimer tous les classes ou id (O_o).
- appliquer les styles uniquement via les selecteurs (http://www.w3schools.com/cssref/css_selectors.asp).
- obtenir exactement le même résultat. Et oui, c'est possible M. Hunt.
Allez, une petite aide : http://www.w3schools.com/cssref/sel_firstchild.asp
Les formulaires 2.0
L'objectif de cet exercice est de travailler le rendu d'un formulaire.
A Faire :
* Nous voulons créer un formulaire d'inscription, celui contiendra les informations suivantes :
- Nom (obligatoire)
- Prénom (obligatoire)
- Adresse de messagerie (obligatoire)
- Téléphone
- Mot de passe (obligatoire)
- Confirmation du mot de passe (obligatoire)
- Offre d'inscription (liste déroulante : Free, Premium, Ultimate, Chuck Norris)
- Recevoir la newsletter (case à cocher)
- Bouton “Valider”
- Bouton “Effacer”
* Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire. * Mettre en forme ce formulaire avec du CSS dans l'objectif :
- D'obtenir quelque chose qui s'approche de ça : http://en.blog.files.wordpress.com/2010/11/grunion-form-builder.png
- D'obtenir quelque chose qui ne ressemble surtout pas à ça : http://wiki.lws-hosting.com/lib/exe/fetch.php/formail1.jpg
* Et c'est pas fini, veiller à :
- Lorsqu'un champs est en train d'être modifié, appliquer “une mise en surbrillance” de ce dernier.
- Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.
* Quiz final :
- Quelles limites sont atteintes avec le HTML5/CSS3 pour les formulaires ?
- Quelles solutions sont disponibles ?
Un peu d'aide ?
* Pseudos-formats : :required, :invalid, :focus
* Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html)
Transformations, Translations, Animations, ...
A Faire :
- Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations.
Déplacement au survol de l'image
img:hover { -webkit-transform: translate(0, -20px); /* -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -o-transform: translate(0, -20px); transform: translate(0, -20px); /* déclenchement de la transition au survol */ */ }
(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)
Changement de couleur d'un lien doucement
a { font-size: 3em; font-weight: bold; color: #789; text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 3s; /* Pour Firefox */ /* -moz-transition-property: color; -moz-transition-duration: 2s; */ /* … et lorsque ce sera standardisé transition-property: color; transition-duration: 1s; */ }
(source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm)
Amusez-vous
http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm
Regardez et amusez vous à partir du site ci-après.
Par exemple :
.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; } @-webkit-keyframes anim2 { from {left: 0px; -webkit-transform: scale(1.0) rotate(0deg) } 50% {left: 600px; -webkit-transform: scale(0.5) rotate(10deg) } to {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) } }
Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique.
2015_2016/s1/webdoc/td5.txt · Last modified: 2015/11/30 12:30 by urli