CMC NADOR HAIJ Oussama

TP 5 CSS

Exercice 1 :
Écrire une page HTML contenant :

• Un titre h1,
• Un titre h2,
• Faire en sorte que le titre h2 effectue une rotation avec zoom lors du survol par le curseur de la
souris,

Exercice 2 :
1. Créez une boîte <div> identifiée #boite.

Avec une mise en forme très simple :

#boite {

background-color: red;

position: relative;

width: 100px;

height: 100px;

2. L'animation

La boîte rouge doit aller à une position fixée à la moitié de la durée totale, puis revenir à sa position
initiale à la fin de l'animation. Nous aurons donc trois keyframes : à 0 %, 50 % et 100 %. À chaque étape
nous indiquerons la position à atteindre avec la propriété left. L'animation est nommée redBox.

Dans les propriétés CSS de la boîte <div>, nous indiquons les propriétés nécessaires :

• Le nom de l'animation, animation-name.

• La durée de l'animation, animation-duration.
• Les itérations de l'animation

3. L'affichage : Voilà le résultat à l'écran.

1
CMC NADOR HAIJ Oussama

Exercice 3 :
Nous souhaitons mettre en évidence un formulaire dans une page Web en faisant clignoter son contour.

• La structure du formulaire :

<form id="inscription" method="#" action="#">

<p>
<label for="nom">Votre nom : </label>
<input type="text" id="nom" />
</p>
<p>
<label for="email">Votre eMail : </label>
<input type="email" id="email" />
</p>
<p>
<input type="submit" id="envoi" value="Envoyer" />
</p>
</form>
• La mise en forme :

#inscription {

width: 300px;

padding: 10px;

border: 1px solid #333;

border-radius: 10px;

• L'animation

Pour faire clignoter son contour, nous allons ajouter une ombre au formulaire qui passera du rouge au
jaune !

Nous créons une animation nommée ombre. La première étape à 0 % propose une ombre de 15 pixels
rouge, et à 100%, une ombre jaune.

2
CMC NADOR HAIJ Oussama

Nous appliquons cette animation au formulaire, elle est sans fin (infinite), elle alterne le sens de
l'animation (alternate) et dure 500 millisecondes (500ms).

• L'affichage

Voici le résultat obtenu : imaginez que cela "clignote"