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 :
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 :

* 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.