Differences

This shows you the differences between two versions of the page.

--- 2015_2016:s1:webdoc:td5 [2015/10/06 12:52] – created urli
+++ 2015_2016:s1:webdoc:td5 [2015/11/30 12:30] (current) – [Manier les selecteurs comme personne] urli
@@ Line 1: / Line 1: @@
-====== TD5 Web ======
+====== TD5 Approfondissement CSS ======
-  * Design menu
+===== Manier les selecteurs comme personne =====
-  * Transition CSS
-  * Ombres, gradients, transformation
+<note>L'objectif de cet exercice est de vous aider à manier avec précision les selecteurs et les propriétés CSS.</note>
+<box round rgb(185,211,238) rgb(220,226,255) 95%|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.
+</box>
+<note tip>Allez, une petite aide : http://www.w3schools.com/cssref/sel_firstchild.asp</note>
+===== Les formulaires 2.0 =====
+<note>L'objectif de cet exercice est de travailler le rendu d'un formulaire.</note>
+<box round rgb(185,211,238) rgb(220,226,255) 95%|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 ?
+</box>
+<note tip>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)
+</note>
+=====  Transformations, Translations, Animations, ... =====
+<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
+  * Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations.
+</box>
+==== Déplacement au survol de l'image ====
+<code css>
+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 */
+*/
+}
+</code>
+(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)
+==== Changement de couleur d'un lien doucement ====
+<code css>
+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; */
+}
+</code>
+(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 [[ http://animateyourhtml5.appspot.com/pres/index.html#5|site ci-après]].
+Par exemple :
+<code css>
+.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; }
+@-webkit-keyframes anim2
+{
+   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
+%  {left: 600px; -webkit-transform: scale(0.5) rotate(10deg)  }
+   to   {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) }
+}
+</code>
+Et un peu plus :  http://html5demo.braincracking.org/, caractéristique par caractéristique.