Les Tutos de Gabriel

Réalisation d'une cible de couleurs.

Application HTML5, CSS3

Cible en couleurs

Le but de cet exercice est de vous faire utiliser quelques propriétés CSS3 que vous pourriez trouver intéressantes.

3 petites lignes suffisent comme trame de base :

1 - Dans votre fichier html ou php, écrivez ce code :

<div id="cible"> <div class="cible01"></div> </div>

2 - Ecrivez ce code css3 :

#cible { float: left; display: block; width: 200px; height: 200px; margin: 10px; border: 1px solid black; background: #fff; }

Bien sûr, pour le moment, vous ne voyez rien, puisque nous avons simplement défini des emplacements vides, sans bordure et sans couleur.

Il y a juste la boîte principale que nous faisons apparaître en lui attribuant un fond blanc et une bordure noire. Nous supprimerons ce fond et cette bordure à la fin.

Passons donc à notre feuille CSS3 et définissons en premier la boîte qui contiendra notre exemple.

Toujours avec le Css, faisons apparaître la cible01 :

3 - Ecrivez ce code css3 :

.cible01 { background-color: rgba(0, 0, 255, 0.8); width: 200px; height: 200px; position: relative; left: 0; top: 0; border: 1px solid red; border-radius: 100%; z-index: 1; } .cible01:hover { opacity: 0.3; cursor: pointer}

Explications :

Toujours avec le Css, faisons apparaître la cible02 :

<div id="cible"> <div class="cible01"></div> <div class="cible02"></div> </div>

4 - Ecrivez ce code css3 :

.cible02 { background-color: rgba(0, 255, 0, 0.8); width: 160px; height: 160px; position: relative; left: 20px; top: -180px; border: 1px solid green; border-radius: 100%; z-index: 2; } .cible02:hover { opacity: 0.3; cursor: pointer}

Toujours avec le Css, faisons apparaître la cible03 :

<div id="cible"> <div class="cible01"></div> <div class="cible02"></div> <div class="cible03"></div> </div>

5 - Ecrivez ce code css3 :

.cible03 { background-color: rgba(255, 255, 0, 0.8); width: 120px; height: 120px; position: relative; left: 40px; top: -320px; border: 1px solid blue; border-radius: 100%; z-index: 3; } .cible03:hover { opacity: 0.3; cursor: pointer}

Enfin, faisons apparaître la cible04 :

<div id="cible"> <div class="cible01"></div> <div class="cible02"></div> <div class="cible03"></div> <div class="cible04"></div> </div>

6 - Ecrivez ce code css3 :

.cible04 { background-color: rgba(255, 0, 0, 0.8); width: 80px; height: 80px; position: relative; left: 60px; top: -420px; border: 1px solid yellow; border-radius: 20%; z-index: 4; } .cible04:hover { opacity: 0.3; cursor: pointer}