Médiaforma

All posts in HTLM5 / CSS3

Les bases de la gestion événementielle

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function load()
      {
        document.getElementById("status").innerHTML = "L'événement 'load' a été généré.";
      }
      function bouton(b)
      {
        document.getElementById("status").innerHTML = "Le bouton " +b + " a été cliqué.";
      }
    </script>
  </head>
  <body onload="load()" onunload="unload();">
    <p>Status: <span id="status">En attente.'</span></p>
    <button onClick="bouton(1)">Bouton 1</button>
    <button onClick="bouton(2)">Bouton 2</button>
  </body>
</html>

Evénements liés à la fenêtre

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <title>Evénements liés à la fenêtre</title>
    <script>
      function unload()
      {
        document.getElementById("status").innerHTML = "L'événement 'unload' a été généré";
      }
      function load()
      {
        document.getElementById("status").innerHTML = "L'événement 'load' a été généré";
      }
    </script>
  </head>
  <body onload="load()" onunload="unload();">
    <p>Status: <span id="status">En attente de l'événement 'unload'</span></p>
  </body>
</html>

Evénements clavier

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function faitecho(ev)
      {
        document.getElementById("echo").innerHTML = document.getElementById("echo").innerHTML + String.fromCharCode(ev.keyCode);
      }
    </script>
  </head>
  <body>
    <p>echo: <span id="echo"></span></p>
    <input type="text" id="saisie" onkeypress="return faitecho(event);">
  </body>
</html>

Evénements souris

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function traitement(param)
      {
        document.getElementById("activite").innerHTML = param;
      }
    </script>
  </head>
  <body>
    <img src="ecureuil.jpg"
         onclick="traitement('clic souris');"
         ondblclick="traitement('double-clic souris');"
         ondrag="traitement('déplacement');"
         ondrop="traitement('relâchement de l''image');"
         onmousedown="traitement('bouton souris enfoncé');"
         onmousemove="traitement('déplacement de la souris');"
         onmousemove="traitement('déplacement du pointeur en
dedors de l''image');"
         onmouseover="traitement('déplacement du pointeur au-
dessus de l''image');"
         onmouseup="traitement('relâchement du bouton de la
souris');"
         onmousewheel="traitement('déplacement de la roulette de
la souris');"
    >
    <p>Activité : <span id="activite"></span></p>
  </body>
</html>

Evénements liés aux formulaires

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function traitement(param)
      {
        document.getElementById("activite").innerHTML = param;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire" method="post" >
      <label>Quel est le meilleur système d'exploitation selon vous ?</label>
      <input name="texte"
           placeholder="Entrez votre réponse ici"
           onforminput="traitement('Saisie de données');"
           onformchange="traitement('Le contenu du formulaire change');"
           onfocus="traitement('La zone de texte a le focus');"
           onblur="traitement('La zone de texte a perdu le focus');"
      >
      <input type="submit" value="Envoyer" onsubmit="traitement
('Le bouton Submit a été pressé');">
    </form>
    <p>Activité : <span id="activite"></span></p>
  </body>
</html>

Evénements liés aux médias

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function etat(param)
      {
        document.getElementById("activite").innerHTML = param;
      }
    </script>
  </head>
  <body>
    <video id="video" src="https://www.mediaforma.com/uneminuteparjour/video/godmode.mp4"
      controls="controls"
      poster="https://www.mediaforma.com/uneminuteparjour/thumbs/godmode.jpg"
      onabort="etat('onabort');"
      oncanplay="etat('oncanplay');"
      oncanplaythrough="etat('oncanplaythrough');"
      ondurationchange="etat('ondurationchange');"
      onemptied="etat('onemptied');"
      onended="etat('onended');"
      onerror="etat('onerror');"
      onloadeddata="etat('onloadeddata');"
      onloadedmetadata="etat('onloadedmetadata');"
      onloadstart="etat('onloadstart');"
      onpause="etat('onpause');"
      onplay="etat('onplay');"
      onplaying="etat('onplaying');"
      onprogress="etat('onprogress');"
      onratechange="etat('onratechange');"
      onreadystatechange="etat('onreadystatechange');"
      onseeked="etat('onseeked');"
      onseeking="etat('onseeking');"
      onstalled="etat('onstalled');"
      onsuspend="etat('onsuspend');"
      ontimeupdate="etat('ontimeupdate');"
      onvolumechange="etat('onvolumechange');"
      onwaiting="etat('onwaiting');"
      >
    </video>
    <p>Activité : <span id="activite"></span></p>
  </body>
</html>

Stockage local de données

Tester le code


<!DOCTYPE HTML>
<html>
 <head>
    <meta charset=UTF-8" />
  <title>Stockage local HTML5</title>

  <style>
    div
    {
      border-width: 1px;
      border-style: dotted;
    }
  </style>
  
  <script>
     function Affiche()
     {
       var key = "";
       var NomValeur = "<tr><th>Nom</th><th>Valeur</th></tr>\n";
       var i=0;
       for (i=0; i<=localStorage.length-1; i++)
       {
         key = localStorage.key(i);
         NomValeur += "<tr><td>"+key+"</td>\n<td>"+localStorage.getItem(key)+"</td></tr>\n";
       }
       document.getElementById('NomValeur').innerHTML = NomValeur;
     }

     function Enregistre()
     {
       var nom = document.forms.editor.name.value;
       var valeur = document.forms.editor.data.value;
       localStorage.setItem(nom, valeur);
       Affiche();
     }
 
     function Lit()
     {
       var nom = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.getItem(nom);
       Affiche();
     }
 
     function Efface()
     {
       var nom = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.removeItem(nom);
       Affiche();
     }
 
     function EffaceTout()
     {
       localStorage.clear();
       Affiche();
     }
   </script>
 </head>

 <body onload="Affiche()">
  <h1>Stockage local HTML5</h1>
   <form name=editor>
     <div id="donnees">
     <h2>Entrez la donnée à stocker</h2>
     <p><label>Nom <input name=name></label></p>
     <p><label>Donnée <textarea name=data cols=41 rows=10></textarea></label></p>
     <p>
      <input type="button" value="Lit" onclick="Lit()">
      <input type="button" value="Enregistre" onclick="Enregistre()">
      <input type="button" value="Efface" onclick="Efface()">
      <input type="button" value="Efface tout" onclick="EffaceTout()">
     </p>
   </div>
   <br><br>
   <div id="valeurs">
     <h2>Données stockées</h2>
     <table id="NomValeur" border="1"></table>
   </div>
  </form>
 </body>
</html>


Bordures autour des cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Bordures autour d'un tableau</title>
    <style>
      table
      {
        border: 4px dashed black;
      }
      th, td
      {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
      <th>Titre colonne 1</th>
      <th>Titre colonne 2</th>
      <th>Titre colonne 3</th>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
  </table>
  </body>
</html>

Espacer les cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Espacer les cellules d'un tableau</title>
    <style>
      table
      {
        border: 1px solid black;
        text-align: center;
        border-collapse: separate;
        border-spacing: 10px;
      }
      td
      {
        width: 120px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
    <td>Date</td>
    <td>Articles</td>
    <td>Prix</td>
    </tr>
    <tr>
    <td>12/08</td>
    <td>21</td>
    <td>5412</td>
    </tr>
    <tr>
    <td>17/08</td>
    <td>14</td>
    <td>1519</td>
    </tr>
  </table>
  </body>
</html>

Ajouter une légende à un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Légender un tableau</title>
    <style>
      table
      {
        border: 2px solid red;
      }
      table > caption
      {
        caption-side: bottom;
        font-style: italic;
        text-align: right;
      }
    </style>
  </head>
  <body>
  <table>
    <caption>Titre du tableau</caption>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 2</td>
      <td>Elément 2 ligne 2</td>
      <td>Elément 3 ligne 2</td>
    </tr>
  </table>

  </body>
</html>

Mise en forme des cellules vides

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Bordure des cellules vides</title>
    <style>
      table
      {
        border: 2px solid red;
        background-color: #dfd;
      }
      #table1 { empty-cells: show; }
      #table2 { empty-cells: hide; }
      td { border: 1px dashed black;}
    </style>
  </head>
  <body>
    <table id="table1">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td></td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td></td>
        <td>Elément 2 ligne 2</td>
        <td>Elément 3 ligne 2</td>
      </tr>
    </table>
    <br><table id="table2">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td></td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td></td>
        <td>Elément 2 ligne 2</td>
        <td>Elément 3 ligne 2</td>
      </tr>
    </table>
  </body>
</html>

Mise en forme des adjacents et enfants

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Adjacents et enfants</title>
    <style>
    body
    {
      font-family: arial;
      color: black;
    }
    #tableau1
    {
      color: blue;
    }
    #tableau1 tr > td
    {
      font-style: italic;
    }
    #tableau1 td:first-child
    {
      font-weight: bolder;
    }
    #tableau1 td:first-child + td
    {
      background: yellow;
    }
    #tableau1 td:first-child + td + td
    {
      background: red;
    }
    </style>
  </head>
  </body>
    <p>Utilisation des opérateurs > et + pour mettre en forme un tableau</p>
    <table id="tableau1">
      <tr>
        <td>Elément 1 ligne 1</td>
        <td>Elément 2 ligne 1</td>
        <td>Elément 3 ligne 1</td>
      </tr>
      <tr>
        <td>Elément 1 ligne 1</td>
        <td>Elément 2 ligne 1</td>
        <td>Elément 3 ligne 1</td>
      </tr>
    </table>
  </body>
</html>

Habillage d’un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Habillage d'un tableau</title>
    <style>
    table
    {
      border: 1px solid silver;
      background-color: #dfd;
    }
    caption
    {
      text-align: left;
      color: red;
      font-weight: bold;
      font-size: 130%;
      border-bottom: 5px solid blue;
      margin-bottom: 10px;
    }
    th
    {
      border: 1px solid red;
      empty-cells: hide;
      background-color: yellow;
    }
    tr
    {
      text-align: center;
    }
    td
    {
      border: 1px dashed black;
    }
    td:first-child
    {
      color: red;
      font-weight: bold;
      border: 0;
      text-align: right;
    }
    tr#dernier
    {
      background-color: silver;
    }
    </style>
  </head>
  </body>
    <table>
      <caption>Recettes budgétaires par région</caption>
      <th></th>
      <th colspan = 2>En Millions de F</th>
      <th rowspan = 2>1985 en F/hab.</th>
      <tr>
      <th></th>
      <th>1984</th>
      <th>1985</th>
      <tr>
      <td>Ile-de-France</td>
      <td>399258</td>
      <td>415920</td>
      <td>178,8</td>
      </tr>
      <tr>
      <td>Midi-Pyrénnées</td>
      <td>73961</td>
      <td>63826</td>
      <td>219,4</td>
      </tr>
      <tr id=dernier>
      <td>Centre</td>
      <td>43638</td>
      <td>55802</td>
      <td>185,9</td>
      </tr>
    </table>
  </body>
</html>

Arrière-plan des cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Arrière-plan des cellules</title>
    <style>
      table
      {
        border: 1px solid black;
        text-align: center;
        color: blue;
        font-weight: bold;
        font-size: 200%;
      }
      td {width: 200px;}
      td.fond1 { background:url(fond1.jpg); }
      td.fond2 { background:url(fond2.jpg); }
      td.fond3 { background:url(fond3.jpg); }
    </style>
  </head>
  </body>
    <table>
      <tr>
      <td class=fond1>Date</td>
      <td class=fond1>Articles</td>
      <td class=fond1>Prix</td>
      </tr>
      <tr>
      <td class=fond2>12/08</td>
      <td class=fond3>21</td>
      <td class=fond3>5412</td>
      </tr>
      <tr>
      <td class=fond2>14/08</td>
      <td class=fond3>10</td>
      <td class=fond3>2215</td>
      </tr>
      <tr>
      <td class=fond2>16/08</td>
      <td class=fond3>15</td>
      <td class=fond3>3219</td>
      </tr>
      <tr>
      <td class=fond2>19/08</td>
      <td class=fond3>17</td>
      <td class=fond3>2719</td>
      </tr>
    </table>
  </body>
</html>

Différentier les lignes paires des lignes impaires

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Différentiation des lignes paires/impaires</title>
      <style>
        table
        {
          border: 1px solid black;
        }
        tr:nth-child(odd)
        {
          background-color: silver;
        }
        tr:nth-child(even)
        {
          background-color: white;
        }
        td
        {
          width: 200px;
        }
      </style>
  </head>
  </body>
  <table>
    <tr>
    <td>Date</td>
    <td>Articles</td>
    <td>Prix</td>
    </tr>
    <tr>
    <td>12/08</td>
    <td>21</td>
    <td>5412</td>
    </tr>
    <tr>
    <td>14/08</td>
    <td>10</td>
    <td>2215</td>
    </tr>
    <tr>
    <td>16/08</td>
    <td>15</td>
    <td>3219</td>
    </tr>
    <tr>
    <td>19/08</td>
    <td>17</td>
    <td>2719</td>
    </tr>
  </table>
  </body>
</html>

Alignement dans les cellules

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement des cellules</title>
    <style>
      table { border: 1px solid black; }
      td
      {
        border: 1px dashed red;
        width: 200px;
        height: 40px;
      }
      td.c1
      {
        text-align: center;
        vertical-align: middle;
      }
      td.c2
      {
        text-align: left;
        vertical-align: top;
      }
      td.c3
      {
        text-align: right;
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
      <tr>
      <td class="c1">Date</td>
      <td class="c1">Articles</td>
      <td class="c1">Prix</td>
      </tr>
      <tr>
      <td class="c2">12/08</td>
      <td class="c2">21</td>
      <td class="c2">5412</td>
      </tr>
      <tr>
      <td class="c3">17/08</td>
      <td class="c3">14</td>
      <td class="c3">1519</td>
      </tr>
    </table>
  </body>
</html>

Accessibilité des tableaux complexes

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Accessibilité dans un tableau complexe</title>
    <style>
      td
      {
        color:red;
        text-align: center;
      }
    </style>
  </head>
  </body>
    <table border="1">
    <tr>
      <th id="hea1">Nom</th>
      <th id="hea2">Indemnité</th>
      <th id="hea3">Valeur</th>
    </tr>
    <tr>
      <th id="hea1_1" headers="hea1" rowspan="2">Daniel Dumond</th>
      <th id="hea2_1" headers="hea2 hea1_1">Repas</th>
      <td headers="hea3 hea1_1 hea2_1">186</td>
    </tr>
    <tr>
      <th id="hea2_2" headers="hea2 hea1_1">Déplacements</th>
      <td headers="hea3 hea1_1 hea2_2">87</td>
    </tr>
    <tr>
      <th id="hea1_2" headers="hea1" rowspan="2">Pierre PetitJean</th>
      <th id="hea2_4" headers="hea2 hea1_2">Repas</th>
      <td headers="hea3 hea1_2 hea2_4">28</td>
    </tr>
    <tr>
      <th id="hea2_5" headers="hea3 hea1_2">Déplacements</th>
      <td headers="hea3 hea1_2 hea2_5">43</td>
    </tr>
    </table>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Accessibilité dans un tableau complexe</title>
    <style>
      td
      {
        color:red;
        text-align: center;
      }
    </style>
  </head>
  </body>
    <table border="1" summary="Indemnités de déplacement et de repas pour Janvier, Février et Mars">
      <tr>
        <td> </td>
        <th scope="col">Janvier</th>
        <th scope="col">Février</th>
        <th scope="col">Mars</th>
      </tr>
      <tr>
        <th scope="row">Déplacements</th>
        <td>145</td>
        <td>214</td>
        <td>89</td>
      </tr>
      <tr>
        <th scope="row">Repas</th>
        <td>227</td>
        <td>195</td>
        <td>48</td>
      </tr>
    </table>
  </body>
</html>

Des infos-bulles dans un tableau

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des info-bulles dans un tableau</title>
      <style>
        td
        {
          border: 1px solid black;
        }
      </style>
  </head>
  </body>
  <table>
    <tr>
      <th title="infobulle sur la première cellule de titre">Titre colonne 1</th>
      <th>Titre colonne 2</th>
      <th>Titre colonne 3</th>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td title="infobulle sur la deuxième cellule de la première ligne de données">Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
    <tr>
      <td>Elément 1 ligne 1</td>
      <td>Elément 2 ligne 1</td>
      <td>Elément 3 ligne 1</td>
    </tr>
  </table>
  </body>
</html>

Mise en forme sophistiquée CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en forme sphistiquée CSS3</title>
    <style>
      table
      {
        border: 4px double black;
        border-spacing: 0;
        text-align: center;
        color: blue;
        font-weight: bold;
        font-size: 200%;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-box-shadow: gray 5px 5px 6px;
        -webkit-box-shadow: gray 5px 5px 6px;
      }
      th
      {
        color: #fff;
        font-size: 110%;
        text-shadow: gray 2px 2px 2px
      }
      tr:nth-child(odd)
      {
        background-color: silver;
      }
      tr:nth-child(even)
      {
        background-color: white;
      }
      td
      {
        width: 200px;
      }
    </style>
  </head>
  </body>
    <table>
      <tr>
      <th>Date</th>
      <th>Articles</th>
      <th>Prix</th>
      </tr>
      <tr>
      <td>12/08</td>
      <td>21</td>
      <td>5412</td>
      </tr>
      <tr>
      <td>14/08</td>
      <td>10</td>
      <td>2215</td>
      </tr>
      <tr>
      <td>16/08</td>
      <td>15</td>
      <td>3219</td>
      </tr>
      <tr>
      <td>19/08</td>
      <td>17</td>
      <td>2719</td>
      </tr>
    </table>
  </body>
</html>


Les éléments dédiés aux formulaires

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <fieldset>
        <legend>Légende du <fieldset></legend>
        Contenu du du <fieldset>
      </fieldset>

      <br><label>Un champ texte</label>
      <input type="text" name="Nom" value="valeur">

      <br><label>Un bouton</label>
      <input type="button" name="Nom" value="Légende du bouton">

      <br><label>Un bouton image</label>
      <input type="image" src="commande.jpg">

      <br><label>Un champ mot de passe</label>
      <input type="password" name="Nom" value="valeur par défaut">

      <br><label>Une case à cocher</label>
      <input type="checkbox" name="Nom" value="Valeur">
      <label>Un bouton radio</label>
      <input type="radio" name="Nom" value="Valeur">

      <br><label>Des boutons <submit> et <reset></label>
      <input type="submit" name="Nom" value="Envoyer">
      <input type="reset" name="Nom" value="Annuler">

      <br><label>Champs spécialisés date et heure</label>
      <input type="date" name="Nom" title="Date(aaaa-mm-jj)" value="2010-11-22">
      <input type="time" name="Nom" title="Heure(hh-mm)" value="10:00">
      <input type="datetime" name="Nom">

      <br><label>Saise de nombres entiers autour de la valeur 55</label>
      <input type="number" name="Nom" value="55">

      <br><label>Une zone de texte spécialisée recherche</label>
      <input type="search" name="Nom" list="datalist" value="Valeur par défaut">

      <br><label>Un curseur pour sélectionner des valeurs numériques</label>
      <input type="range" min="-500" max="500" value="0" step="10" name="Nom">

      <br><label>Un bouton pour désigner un fichier local</label>
      <input type="file" name="Nom">

      <br><label>Une zone de saisie multiligne</label>
      <textarea cols="40" rows="4">Texte par défaut</textarea>

      <br><label>Liste déroulante et zone de liste</label>
      <select name="Nom">
        <option>Valeur 1</option>
        <option>Valeur 2</option>
        <option>Valeur 3</option>
        <option>Valeur 4</option>
        <option>Valeur 5</option>
      </select>

      <select size="2" name="Nom">
        <option>Valeur 1</option>
        <option>Valeur 2</option>
        <option>Valeur 3</option>
        <option>Valeur 4</option>
        <option>Valeur 5</option>
      </select>

      <br><label>Résultat d'un calcul : </label>
      <output name="resultat">123</output>
    </form>
  </body>
</html>

L’attribut placeholder

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une zone de texte améliorée</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <label>Quel est le meilleur système d'exploitation selon vous ?</label>
      <input name="texte" placeholder="Entrez votre réponse ici">
      <input type="submit" value="Envoyer">
    </form>
  </body>
</html>

L’attribut autofocus

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Autofocus compatible avec tous les navigateurs</title>
  </head>
  <body>
    <form action="action.php" method="post">
      <fieldset>
        <legend>Positionnement du point d'insertion dans le premier champ input</legend>
        <label>Nom</label>
        <input type="text" id="champ1" autofocus>
        <script>
          if (!("autofocus" in document.createElement("input")))
          {
           document.getElementById("champ1").focus();
          }
        </script>
        <label>Prénom</label>
        <input type="text" id="champ2">
        <label>Adresse</label>
        <input type="text" id="champ3">
        <label>Ville</label>
        <input type="text" id="champ4">
      </fieldset>
    </form>
  </body>
</html>

Validation de données

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Champ de saisie obligatoire</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom</label><input name="Nom" required><br><br><br><br>
   <input type=submit value="Valider"></p>
  </form>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Validation e-mail et url</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom</label><input name="Nom"><br>
   <label>e-mail</label> <input type=email name="email" required><br>
   <label>Adresse URL</label> <input type=url name="url" required><br>
   <label>Commentaire</label> <textarea name="comment"></textarea><br>
   <input type=submit value="Valider"></p>
  </form>
  </body>
</html>

Labels implicites

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
  </head>
  <body>
  <form id="validation">
   <label>Nom<input id="Nom"></label><br>
   <label>Prénom</label> <input id="prenom"><br>
   <label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
  </form>
  </body>
</html>

Labels explicites

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
  </head>
  <body>
  <form id="validation">
   <label for="nom">Nom<input id="nom"></label><br>
   <label for="prenom">Prénom</label> <input id="prenom"><br>
   <label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
  </form>
  </body>
</html>

Aligner les éléments d’un formulaire

Tester le code

Exemple 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Labels implicites et explicites</title>
    <style>
      label
      {
        display: inline-block;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom"><br>
    <label>Prénom</label><input id="Prenom"><br>
    <label>Adresse</label><textarea id="Adresse" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider">
   </form>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Alignement d'éléments dans un formulaire</title>
    <style>
      input, textarea
      {
        position: absolute;
        left: 85px;
      }
      .button
      {
        position: absolute;
        left: 85px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom"><br>
    <label>Prénom</label><input type=email id="email"><br>
    <label>Adresse</label><textarea id="adresse" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider" class="button">
   </form>
  </body>
</html>

Arrondir les angles des éléments d’un formulaire

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Arrondir les angles d'un formulaire</title>
    <style>
      .arrondi
      {
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        -ms-border-radius: 15px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <label>Nom</label><input id="Nom" class="arrondi"><br>
    <label>Prénom</label><input id="Prenom" class="arrondi"><br>
    <label>Adresse</label><textarea id="adresse" class="arrondi" rows="8" cols="30"></textarea><br><br>
    <input type="button" name="Nom" value="Valider" class="arrondi">
   </form>
  </body>
</html>

Modifier l’allure d’un bouton avec un style

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un bouton de formulaire entièrement redéfini</title>
    <style>
      @font-face
      {
        font-familly: algerian;
        src: url('ALGER.TTF');
      }
      .arrondi
      {
        width: 220px;
        height: 50px;

        -moz-border-radius: 50px 50px 200px 50px;
        -webkit-border-radius: 50px 50px 200px 50px;
        -khtml-border-radius: 50px 50px 200px 50px;
        -ms-border-radius: 50px 50px 200px 50px;
        border: 1px solid black;

        background: -moz-linear-gradient(top, #40FFFF, #C0FFFF);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#40FFFF), to(#C0FFFF));

        box-shadow: 5px 5px 5px grey;
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;

        font-family: 'algerian';
        font-size: 40px;
      }
      .arrondi:hover
      {
        background: -moz-linear-gradient(top, #C0FFFF, #40FFFF);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0FFFF), to(#40FFFF));
      }

      .arrondi:active
      {
        background: white;
        background: white;
      }
    </style>
  </head>
  <body>
    <form id="validation">
    <input type="button" name="bouton1" value="Valider" class="arrondi">
   </form>
  </body>
</html>


Un menu vertical élémentaire

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu vertical élémentaire</title>
    <style>
      ul#vertical
      {
        width: 100px;
        float: left;
      }
      li
      {
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul id="vertical">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet.
  </body>
</html>

Menu vertical graphique

Tester le code


<!DOCTYPE html>

<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu vertical graphique</title>
    <script>
      function clicMenu1()
      {
        alert('Menu 1 cliqué');
      }
      function clicMenu2()
      {
        alert('Menu 2 cliqué');
      }
      function clicMenu3()
      {
        alert('Menu 3 cliqué');
      }
    </script>
  
    <style>
    li
    {
        list-style:none;
        padding:2px;
        height:64px;
      -moz-transition: all 500ms linear;
      -webkit-transition: all 500ms linear;
      -o-transition: all 500ms linear;
      font-size: 40px;
      color: white;
    }
  
    li:hover
    {
      -moz-transform: translate(50px, 0);
      -webkit-transform: translate(50px, 0);
      -o-transform: translate(50px, 0);
      color:black;
    }

    span
    {
      position: relative;
      left: 80px;
      top: 5px;
      width: 200px;
    }
    </style>
  </head>

  <body>
    <ul id="menu">
      <li style="background: url('folder.png') no-repeat;" onclick="clicMenu1()">
        <span>Télécharger</span>
      </li>
 
      <li style="background: url('ie.png') no-repeat;" onclick="clicMenu2()">
        <span>Internet Explorer</span>
      </li>
 
      <li style="background: url('skype.png') no-repeat;" onclick="clicMenu3()">
        <span>Skype</span>
      </li>
    </ul>
  </body>
</html>

Un menu horizontal élémentaire avec display: inline-block

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal élémentaire</title>
    <style>
      ul#horizontal
      {
        list-style: none;
      }
      ul#horizontal li
      {
        display: inline-block;
        padding-right: 1em;
        padding-left: 1em;
      }
    </style>
  </head>
  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Menu horizontal avec border-radius

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal avec border-radius</title>
    <style>
      ul#horizontal
      {
        list-style: none;
        font-size: 30px;
      }

      ul#horizontal li
      {
        display: inline;
        padding-right: 1em;
        padding-left: 1em;
      }

      ul#horizontal li a
      {
        text-decoration:none;
      }

      ul#horizontal li:hover
      {
        -moz-border-radius:0 20px 20px 20px;
        -webkit-border-radius: 0 20px 20px 20px;
        -khtml-border-radius: 0 20px 20px 20px;
        -ms-border-radius: 0 20px 20px 20px;
        background-image:url("fond.jpg");
      }
    </style>
  </head>

  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal amélioré</title>
    <style>
      ul#horizontal
      {
        list-style: none;
        font-size: 30px;
      }

      ul#horizontal li
      {
        display: inline;
        padding-right: 1em;
        padding-left: 1em;
        border: 1px solid white;
        -moz-transition: all 200ms linear;
        -webkit-transition: all 200ms linear;
        -khtml-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
      }

      ul#horizontal li a
      {
        text-decoration:none;
      }

      ul#horizontal li:hover
      {
        -moz-border-radius:0 20px 20px 20px;
        -webkit-border-radius: 0 20px 20px 20px;
        -khtml-border-radius: 0 20px 20px 20px;
        -ms-border-radius: 0 20px 20px 20px;
        border: 1px solid black;
        background-image:url("fond.jpg");
      }
    </style>
  </head>

  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Un menu déroulant

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu déroulant</title>
    <style>
      #principal
      {
        background: #E0FCC8;
        width: 800px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
      }
      #principal li
      {
        list-style-type: none;
        float: left;
        width: 150px;
        border-style: dashed;
        border-width: 1px;
      }
      #principal li a:link, #principal li a:visited
      {
       display: block;
       background: #E0FCC8;
       margin: 0;
       padding: 5px 6px;
       text-decoration: none;
       color: black;
       height: 1%;
      }
      #principal li a:hover
      {
        background-color: #A5F95B;
      }
      #principal .secondaire
      {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 0;
      }
      #principal .secondaire li
      {
        float: none;
        border: 0;
      }
      #principal .secondaire li a:link, #principal .secondaire li a:visited
      {
        display: block;
        text-decoration: none;
      }
      #principal .secondaire li a:hover
      {
        background-color: #A5F95B;
      }
      #principal li:hover > .secondaire
      {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul id="principal">
      <li><a href="#">Page 1</a>
        <ul class="secondaire">
          <li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
          <li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
          <li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
        <ul class="secondaire">
          <li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
          <li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
          <li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 3</a>
        <ul class="secondaire">
          <li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
          <li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
          <li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Une menu déroulant avec effets

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu déroulant avec effets</title>
    <style>
      ul#principal
      {
        list-style: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -ms-border-radius: 10px;
        border: 1px solid black;
        width: 300px;
        height:30px;
        background: -moz-linear-gradient(top, #CCFEFD, #01FFFC);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFEFD), to(#01FFFC));
        font-size: 20px;
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;
      }

      ul#principal li
      {
        float: left;
        padding-right: 1em;
        padding-left: 1em;
        opacity: .2;
        -moz-transition: all .5s ease-in;
        -webkit-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
      }

      ul#principal li a
      {
        text-decoration: none;
      }

      #principal .secondaire
      {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: -moz-linear-gradient(top, #FFC0C0, #FF8080);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFC0C0), to(#FF8080));
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -ms-border-radius: 10px;
        width: 220px;
      }

      #principal li:hover
      {
        opacity: 1;
      }

      #principal li:hover > .secondaire
      {
        display: block;
        position: absolute;
        top: 43px;
      }
    </style>

  </head>
  <body>
    <ul id="principal">
      <li><a href="#">Page 1</a>
        <ul class="secondaire">
          <li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
          <li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
          <li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
        <ul class="secondaire">
          <li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
          <li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
          <li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 3</a>
        <ul class="secondaire">
          <li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
          <li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
          <li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>


Transition de couleur

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .anim-couleur
      {
        font-size: 40px;
        -moz-transition: color 2s ease-in;
        -webkit-transition: color 2s ease-in;
        -o-transition: color 2s ease-in;
      }
      .anim-couleur:hover
      {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="anim-couleur">Placez le pointeur sur ce texte</p>
  </body>
</html>

Transition sur l’opacité

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .anim-opacite
      {
        -moz-transition: opacity 2s linear;
        -webkit-transition: opacity 2s linear;
        -o-transition: opacity 2s linear;
      }
      .anim-opacite:hover
      {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <img class="anim-opacite" src="ecureuil.jpg" />
  </body>
</html>

Animer une transformation

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .animation
      {
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
      }
      .animation:hover
      {
        -moz-transform: translate(50px, 0);
        -webkit-transform: translate(50px, 0);
        -o-transform: translate(50px, 0);
      }
    </style>
  </head>
  <body>
    <img class="animation" src="ecureuil.jpg" />
  </body>
</html>

Animation en JavaScript

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Animation déclenchée en JavaScript</title>
    <style>
      div
      {
        position: absolute;
        left: 100px;
        top: 40px;
        height: 100px;
        width: 100px;
        background: Yellow;
        -webkit-transition: top 1s ease-in;
        -moz-transition: top 1s ease-in;
        -o-transition: top 1s ease-in;
        transition: top 1s ease-in;
      }
    </style>
    <script>
      function animer()
      {
        var el = document.getElementById('madiv');
        el.setAttribute("style","top: 150px;");
      }
      function reinit()
      {
        var el = document.getElementById('madiv');
        el.setAttribute("style","left: 100px; top:40px;");
      }
    </script>
  </head>
  <body>
    <button onclick="animer()">Cliquez ici pour animer la <div></button>
    <button onclick="reinit()">Cliquez ici pour réinitilaiser la <div></button>
    <div id="madiv">Une simple <div></div>
  </body>
</html>

Transitions multiples

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .animation
      {
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
      }
      .animation:hover
      {
        -moz-transform: translate(50px, 0) rotate(360deg);
        -webkit-transform: translate(50px, 0) rotate(360deg);
        -o-transform: translate(50px, 0) rotate(360deg);
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <img class="animation" src="ecureuil.jpg" />
  </body>
</html>


Translations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Translations</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin: 20px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
      }
      .droite
      {
        -webkit-transform : translate(20px, 0px);
        -moz-transform : translate(20px, 0px);
        -o-transform : translate(20px, 0px);
        -ms-transform : translate(20px, 0px);
      }
      .gauche
      {
        -webkit-transform : translate(-20px, 0px);
        -moz-transform : translate(-20px, 0px);
        -o-transform : translate(-20px, 0px);
        -ms-transform : translate(-20px, 0px);
      }
      .haut
      {
        -webkit-transform : translate(0px, -5px);
        -moz-transform : translate(0px, -5px);
        -o-transform : translate(0px, -5px);
        -ms-transform : translate(0px, -5px);
      }
      .bas
      {
        -webkit-transform : translate(0px, 20px);
        -moz-transform : translate(0px, 20px);
        -o-transform : translate(0px, 20px);
        -ms-transform : translate(0px, 20px);
      }
      .hautdroite
      {
        -webkit-transform : translate(15px, -15px);
        -moz-transform : translate(15px, -15px);
        -o-transform : translate(15px, -15px);
        -ms-transform : translate(15px, -15px);
      }
    </style>
  </head>
  <body>
    <div>
      Boîte sans déplacement
    </div>
    <div class="droite">
      Boîte déplacée à droite de 20px
    </div>
    <div class="gauche">
      Boîte déplacée à gauche de 20px
    </div>
    <div class="haut">
      Boîte déplacée vers le haut de 5px
    </div>
    <div class="bas">
      Boîte déplacée vers le bas de 5px
    </div>
    <div class="hautdroite">
      Boîte déplacée vers le haut et la droite de 15px
    </div>
    <div class="quex">
      Boîte déplacée de 80px vers la droite
    </div>
  </body>
</html>

Rotations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Rotations</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin-top: 120px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
        display: inline-block;
      }
      .rotdroite45
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
      }
      .rotgauche90
      {
        -webkit-transform : rotate(-90deg);
        -moz-transform : rotate(-90deg);
        -o-transform : rotate(-90deg);
        -ms-transform : rotate(-90deg);
      }
    </style>
  </head>
  <body>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rotdroite45">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rotgauche90">
      La <div> après une rotation à gauche de 90°
    </div>
  </body>
</html>

Définir le centre de la transformation

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Définition du centre de la rotation</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin-top: 120px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
        display: inline-block;
      }
      .rd45-olefttop
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        -ms-transform-origin: left top;
      }
      .rd45-ocenterbottom
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -o-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
      }
    </style>
  </head>
  <body>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rd45-ocenterbottom">
      La <div> après une rotation à droite de 45°
    </div>
    <br>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
  </body>
</html>

Changements d’échelle

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Changements d'échelle</title>
    <style>
      .e200
      {
        -webkit-transform : scale(2);
        -moz-transform : scale(2);
        -o-transform : scale(2);
        -ms-transform : scale(2);
      }
      .e50
      {
        -webkit-transform : scale(.5);
        -moz-transform : scale(.5);
        -o-transform : scale(.5);
        -ms-transform : scale(.5);
      }
    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="e200">
    <img src="ecureuil.jpg" class="e50">
  </body>
</html>

Inclinaison

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Inclinaison</title>
    <style>
      img
      {
        margin-top: 60px;
        margin-left: 40px;
      }
      .xy15
      {
        -webkit-transform : skew(15deg, 15deg);
        -moz-transform : skew(15deg, 15deg);
        -o-transform : skew(15deg, 15deg);
        -ms-transform : skew(15deg, 15deg);
      }
      .xy-25
      {
        -webkit-transform : skew(-25deg, -25deg);
        -moz-transform : skew(-25deg, -25deg);
        -o-transform : skew(-25deg, -25deg);
        -ms-transform : skew(-25deg, -25deg);
      }

    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="xy15">
    <img src="ecureuil.jpg" class="xy-25">
  </body>
</html>

Matrices

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Matrices de transformation</title>
    <style>
      img
      {
        margin-top: 60px;
        margin-left: 40px;
      }
      .mat90
      {
        -webkit-transform : matrix(0, 1, -1, 0, 0, 0);
        -moz-transform : matrix(0, 1, -1, 0, 0, 0);
        -o-transform : matrix(0, 1, -1, 0, 0, 0);
        -ms-transform : matrix(0, 1, -1, 0, 0, 0);
      }

    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="mat90">
  </body>
</html>


Une boîte à coins arrondis, l’ancienne méthode

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis, ancienne méthode</title>
    <style>
      .boite {width: 400px; background-color: #80FF80;}
      .hg { float: left; background-image: url(hautgauche.gif); height: 20px; width: 20px; }
      .hd { float: right; background-image: url(hautdroite.gif); height: 20px; width: 20px; }
      .bg { float: left; background-image: url(basgauche.gif); height: 20px; width: 20px; }
      .bd { float: right; background-image: url(basdroite.gif); height: 20px; width: 20px; }
      .texte { margin: 20px 20px -20px 20px; }
    </style>
  </head>
<body>
<div class="boite">
<div class="hg"></div><div class="hd"></div>
<div class="texte">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat.
</div>
<div class="bg"></div><div class="bd"></div>
</div>
</body>
</html>

Une boîte à coins arrondis, la méthode CSS3

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
    .arrondi
    {
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      -ms-border-radius: 15px;
      border: 1px solid black;
      padding: 10px;
      width: 250px;
      background:cyan;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="arrondi">Boîte à bords arrondis en CSS3</div>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
    .arrondi
    {
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      -ms-border-radius: 15px;
      border: 5px solid black;
      padding: 10px;
      width: 250px;
      height:300px;
      color: white;
      font-size: 60px;
      background: url("ecureuil.jpg") repeat;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="arrondi">Boîte à bords arrondis en CSS3</div>
  </body>
</html>

Exemple 3

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
      .arrondi
      {
        -moz-border-radius: 50px 50px 200px 50px;
        -webkit-border-radius: 50px 50px 200px 50px;
        -khtml-border-radius: 50px 50px 200px 50px;
        -ms-border-radius: 50px 50px 200px 50px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p class="arrondi">
      <br>
      Boîte à bords arrondis en CSS3
      <br><br>
    </p>
  </body>
</html>

Une mise en page CSS3 avec arrondis

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en page en arrondis</title>
    <link rel="stylesheet" href="style3.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  <aside>
    <p>Contenu texte ajouté sur le côté avec la balise <aside></p>
  </aside>

  <article>
    <header>
      <h2>Titre de l'article</h2>
    </header>
    <p>Contenu principal de l'article, suivi d'une image.</p>
    <img src="grenouille.jpg" width="300px" /><br>
    <footer>
      <a href="#">Afficher les commentaires</a>
    </footer>
  </article>
</body>
</html>

style3.css

header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

header
{
  background-color: red;
}

nav
{
  float:left;
  width:20%;
  background-color:yellow;
}

article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
}

footer
{
  clear:both;
  background-color: #99FF66;
}
header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

Ombre portée autour d’une image, ancienne technique

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage d'une image en CSS2</title>
    <style>
      .ombre
      {
        float:left;
        background: url(back.gif) no-repeat bottom right;
      }
      .ombre img
      {
        display: block;
        position: relative;
        border: 1px solid #aaa;
        margin: -5px 5px 5px -5px;
      }
    </style>
  </head>
  <body >
    <div class="ombre">
      <img src="animal.gif" />
    </div>
  </body>
</html>

Ombrage CSS3 sur un élément

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage CSS3</title>
    <style>
      .ombrageCSS3
      {
        width: 230px;
        box-shadow: 10px 10px 5px cyan;
        -moz-box-shadow: 10px 10px 5px cyan;
        -webkit-box-shadow: 10px 10px 5px cyan;
        -khtml-box-shadow: 10px 10px 5px cyan;
      }
    </style>
  </head>
  <body>
    <p class="ombrageCSS3">
        Texte à l'intérieur de la balise <p>
    </p>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage CSS3</title>
    <style>
      .ombrageCSS3
      {
        width: 230px;
        box-shadow: 10px 10px 5px #bbb;
        -moz-box-shadow: 10px 10px 5px #bbb;
        -webkit-box-shadow: 10px 10px 5px #bbb;
        -khtml-box-shadow: 10px 10px 5px #bbb;
      }
    </style>
  </head>
  <body>
    <img class="ombrageCSS3" src="ecureuil.jpg" width="400px" />
  </body>
</html>

Ombrage de texte en CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte en CSS3</title>
    <style>
      .otexte
      {
        font-size: 60px;
        text-shadow: 4px 4px 4px grey;
      }
    </style>
  </head>
  <body>
    <p class="otexte">Ce texte est ombré</p>
  </body>
</html>

Ombrage de texte dans Internet Explorer

Exemple 1

Tester le code

<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte dans Internet Explorer</title>
    <style>
    body
    {
      background-color: #cc0;
    }

    .texte-ombre
    {
      font-size: 100px;
    }
    .principal
    {
      position: absolute;
      z-index: 2;
      color: white;
      top: 0;
      left: 0;
    }
    .ombre
    {
      position: absolute;
      z-index: 1;
      color: black;
      top: 0px;
      left: 4px;
    }
    </style>
  </head>

  <body >
    <p class="texte-ombre">
      <span class = "principal">Ce texte est ombré</span>
      <span class = "ombre">Ce texte est ombré</span>
    </p>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte avec DropShadow()</title>
    <style>
      .dropshadow-texte
      {
        font-size:64px;
        color:red;
        zoom:1; /* déclenche le layout (concept du haslayout d’IE7 et inférieur), nécessaire pour le fonctionnement des filtres */
        filter:DropShadow(color=#C0C0C0, offx=3, offy=3)
      }
    </style>
  </head>
  <body>
    <p class="dropshadow-texte">Texte avec ombrage</p>
  </body>
</html>

Effets sur du texte dans Internet Explorer

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Effets sur le texte</title>
    <style>

    .fondu
    {
      Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100);
      Width:30em;
      font-size:40px;
      color: red;
      font-weight: bold;
    }

    .estompage
    {
      Filter: Blur(add=0, direction=90, strength=5);
      Width:14cm;
      font-size:40px;
      color: red;
      font-weight: bold;
    }

    .bords-flambants
    {
      width: 100%;
      font-size:40px;
      color: blue;
      filter: Glow(Color=#FF0000, Strength=10);
    }

    .ondulations
    {
      width: 20cm;
      font-size:40px;
      color: red;
      font-weight: bold;
      filter: wave(add=0, freq=5, lightstrength=5, phase=220, strength=2);
    }
    </style>
  </head>

  <body >
    <p class="fondu">Effet Fondu linéaire progressif</p>
    <p class="estompage">Effet Estompage</p>
    <p class="bords-flambants">Effet Bords flambants</p>
    <p class="ondulations">Effet Ondulations</p>
  </body>
</html>

Mise en page CSS3 avec arrondis et ombrages

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en page en arrondis</title>
    <link rel="stylesheet" href="style4.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  <aside>
    <p>Contenu texte ajouté sur le côté avec la balise <aside></p>
  </aside>

  <article>
    <header>
      <h2>Titre de l'article</h2>
    </header>
    <p>Contenu principal de l'article, suivi d'une image.</p>
    <img src="grenouille.jpg" width="300px" /><br>
    <footer>
      <a href="#">Afficher les commentaires</a>
    </footer>
  </article>
</body>
</html>
style4.css
header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

header
{
  background-color: red;
}

nav
{
  float:left;
  width:20%;
  background-color:yellow;
  text-shadow: 4px 4px 4px grey;
}

article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
  box-shadow: 5px 5px 5px grey;
  -moz-box-shadow: 5px 5px 5px grey;
  -webkit-box-shadow: 5px 5px 5px grey;
  -khtml-box-shadow: 5px 5px 5px grey;
}

footer
{
  clear:both;
  background-color: #99FF66;
}

img
{
  box-shadow: 5px 5px 5px grey;
  -moz-box-shadow: 5px 5px 5px grey;
  -webkit-box-shadow: 5px 5px 5px grey;
  -khtml-box-shadow: 5px 5px 5px grey;
}
li
{
  filter:DropShadow(color=#c0c0c0, offx=3, offy=3)
}