ex 31 - 42 + update v3.0

_ instructions

Instructions pour la mise à jour 
des exercices css v3.0

-- 13 oct. 2014 -- 

*********************************

1°  Fichier: css/mi-ca.css 
    Ligne 8 changer la valeur du z-index de 1 à 10
    z-index:1; -> z-index:10;
    
    Raison : 
    Les exercices 31 à 42 utilisent certaines
    fois des z-index qui passeront par dessus 
    la navigation principale si le visiteur scroll et survole
    les exercices concernés.
    
********************************
// 2.1 -> 2.20

2°  Fichier: index.html ex 24 -> 30
    Lignes (peuvent varier): ~567 -> ~663
    Il s'agit de changer le nom des ancres dans la section TRANSITION
    Le préfix des ancres est selector-XX au lieux de transition-XX 
    <h2><a name="selector-exXX"><i class="ic-bookmark"></i></a>exercice XX</h2>
    ->
    <h2><a name="transition-exXX"><i class="ic-bookmark"></i></a>exercice X</h2>
    Répéter l'opération pour les exercices 24,25,26,27,28,29 et 30
    Sorry
    
    Raison : 
    C'est une erreur de copier-coller. 
    Elle affecte le nom des ancres et rends
    de ce fait les url illogiques. 
    
********************************
3°  Fichier: index.html
    Lignes (peuvent varier) :  (~678) après la fermeture de l'exercice 30 
    </article>
    Ajouter les articles du fichier index-update-3.0.html ci-dessous
  
********************************
4°  Fichier: img/ex
    Télécharger le fichier https://dl.dropboxusercontent.com/u/2044943/exWeb-v3-ex31-42.zip 
    OU 
    Sur le serveur backup/profs/cailletm/public/exWeb-v3-ex31-42.zip
    Enregistrer ce fichier dans votre dossier /img/ex/ et le décompresser.

index-update-3.0.html

        <article class="row ex31">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex31"><i class="ic-bookmark"></i></a>exercice 31</h2>
            <div class="content">
              <p>Créer 5 carrés qui se déplacent vers la gauche au survol du <code>div.exemple</code>. Chacun de ces carrés utilisent une courbe de déplacement différente.</p>
              <p>Voir le <a href="img/ex/ex30.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb"></i>
              <p>Voir <a href="http://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html">chapitre 4 sur le transitions</a> sur le site Alsacreations.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
          </div>
        </article>
        <article class="row ex32">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex32"><i class="ic-bookmark"></i></a>exercice 32</h2>
            <div class="content">
              <p>Créer un carre avec une courbe de déplacement personnalisée.</p>
              <p>Voir le <a href="img/ex/ex31.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Vous pouvez utiliser le site <a href="http://cubic-bezier.com">cubic-bezier</a> pour générer les valeurs.</p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre purple"></div>
          </div>
        </article>
        <article class="row ex33">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex33"><i class="ic-bookmark"></i></a>exercice 33</h2>
            <div class="content">
              <p>Créer un carre avec une courbe de déplacement personnalisée. Modifier la largeur, la hauteur et la rotation de ce carré.</p>
              <p>Chaque propriété est interpollée de manière différente. Vous pouvez ainsi maîtriser de manière séparée chacune des propriétés d'un objet interpollé et gérer la durée, la courbe de déplacement et le délai.</p>
              <p>Voir le <a href="img/ex/ex33.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb"></i>
              <p>Utiliser la virgule comme pour les multiples background de l'<a href="#css-ex14">exercice 14</a></p>
            </div>
          </div>
          <div class="exemple col-sm-8">
            <div class="carre orange"></div>
          </div>
        </article>
        
        <article class="row ex34">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex34"><i class="ic-bookmark"></i></a>exercice 34</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex34.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Utiliser le positionnement absolut et l'overflow pour cacher en bas le titre de l'image</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex35">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex35"><i class="ic-bookmark"></i></a>exercice 35</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex35.mov">résultat</a></p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>
        
        <article class="row ex36">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex36"><i class="ic-bookmark"></i></a>exercice 36</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex36.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Dans cet exercice, l'image est aussi interpollée afin de renforcer un peu l'effet</p>
              <p>Ajouter un léger délai sur l'apparition du titre.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex37">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex37"><i class="ic-bookmark"></i></a>exercice 37</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex37.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Utiliser la propriété <code>transform:rotateX()</code> <em>coucher</em> le texte.</p>
              <p>Le texte est entrouré d'un <code>&lt;span&gt;</code> afin de séparer le fond(<code>&lt;figcaption&gt;</code>) et le texte(<code>&lt;span&gt;</code>).</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex38">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex38"><i class="ic-bookmark"></i></a>exercice 38</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex38.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-eye"></i>
              <p>Dans cet exercice, nous ajoutons une ombre interne à l'image, pour simuler qu'elle s'enfonce dans la page.</p>
              <p>Nativement, il n'est pas possible d'ajouter une ombre interne. Il est donc nécessaire de créer une "boîte" <code>:after</code> pour créer cette ombre interne.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex39">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex39"><i class="ic-bookmark"></i></a>exercice 39</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>

              <p>Voir le <a href="img/ex/ex39.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb"></i>
              <p>Nous réutilisons le background <a href="img/dot.png">dot.png</a> de l'<a href="#css-ex14">exercice 14</a> sur une boîte <code>:after</code> de la <code>figure</code> afin de rentre le texte plus lisible</p>
              <p>Nous ajoutons une grosse ombre interne à l'image (selon méthode <a href="#transition-ex38">exercice 38</a>) pour simuler un effet vignette</p>
              <p>L'animation des traits se fait avec des bordures sur des boîtes <code>:before</code> et <code>:after</code> du <code>figcaption</code>.</p>
              <p>Jouer avec des délais sur toutes ces transitions pour donner du style.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex40">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex40"><i class="ic-bookmark"></i></a>exercice 40</h2>
            <div class="content">
              <p>Reproduire l'effet de rollover de cette figure.</p>
              <p>Voir le <a href="img/ex/ex40.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>A l'aide de la propriété <code>transform:scale()</code> partir d'une échelle à 123% et réduire l'échelle à 80%.</p>
              <p>Ajouter une ombre interne à la figure et jouer sur les délais des propriété pour faire monter l'image et le texte une fois que la réduction est terminée.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
            <figure class="carre grey">
              <img src="img/city.jpg" alt="city">
              <figcaption><span>a big city</span></figcaption>
            </figure>
          </div>
        </article>

        <article class="row ex41">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex41"><i class="ic-bookmark"></i></a>exercice 41</h2>
            <div class="content">
              <p>Faire apparaître la deuxième image au survol du div.exemple</p>
              <p>Voir le <a href="img/ex/ex40.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Une boîte contient les images qui flottent les unes à côté des autres.</p>
              <p>Au survol on déplace la boîte vers la gauche.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
          </div>
        </article>

        <article class="row ex42">
          <div class="desc col-sm-4">
            <h2><a name="transition-ex42"><i class="ic-bookmark"></i></a>exercice 42</h2>
            <div class="content">
              <p>Faire apparaître la deuxième image au survol du div.exemple</p>
              <p>Voir le <a href="img/ex/ex40.mov">résultat</a></p>
            </div>
            <div class="tips clearfix">
              <i class="ic-light-bulb2"></i>
              <p>Une boîte contient les images les unes en dessous des autres.</p>
              <p>Au survol on déplace la boîte vers le haut.</p>
            </div>
          </div>
          <div class="exemple col-sm-4 col-sm-offset-2">
          </div>
        </article>