Différences

Ci-dessous, les différences entre deux révisions de la page.

--- css [2016/03/22 14:10]
luc
+++ css [2018/10/13 20:32] (Version actuelle)
@@ Ligne 83: / Ligne 83: @@
 </code>
+==== CSS Sprite ====
+L'idée est d'avoir une seule image composées de plusieurs petites , et d'en afficher seulement une partie. On limite ainsi les appels et les téléchargements (méthode des années 2000 pour fluidifier le chargement des pages)
+<code css>
+#nav li a {background-image:url('../img/image_nav.gif')}
+#nav li a.item1 {background-position:0px 0px}
+#nav li a:hover.item1 {background-position:0px -72px}
+#nav li a.item2 {background-position:0px -143px;}
+#nav li a:hover.item2 {background-position:0px -215px;}
+</code>
+Par défaut toutes les images sont cachés grâce à notre bon vieux ''display:none'', et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
+Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.
@@ Ligne 436: / Ligne 450: @@
-==== transition.. ====
+==== Transition ====
+On peut faire des transitions dynamiques lors du passage d'une mise en forme à une autre (par exemple au passage de la souris par dessus l'élément).
+C'est schönn ;)
-On peut faire des tra
 <code css>
 /* Transitions to provide some eye candy */
@@ Ligne 445: / Ligne 461: @@
     -ms-transition: all ease-in 0.5s;
     -o-transition: all ease-in 0.5s;
-display : none ;
-div[id^=image]:target .close {
-div[id^=image]:target {
-div[id^=image]:target .expand {
-div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
-<div id="images-box">
-    <div class="holder">
-        <div id="image-1" class="image-lightbox">
-            <span class="close"><a href="#">X</a></span>
-            <img src="1.jpg" alt="earth!">
-            <a class="expand" href="#image-1"></a>
-        </div>
-    </div>
 </code>
-==== CSS Sprite : une seule image, on déplace le fond visible ====
+On reviendra là-dessus plus tard, ok ?
-#nav li a {background-image:url('../img/image_nav.gif')}
-#nav li a.item1 {background-position:0px 0px}
-#nav li a:hover.item1 {background-position:0px -72px}
-#nav li a.item2 {background-position:0px -143px;}
-#nav li a:hover.item2 {background-position:0px -215px;}
-Par défaut toutes les images sont cachés grâce à notre bon vieux display:none, et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
-Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.
-opacity: 0.5;

L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Différences

Outils de la page