Différences

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

--- devweb:css [11-06-2014 20:42] – [Aligner / centrer verticalement] edmc73
+++ devweb:css [16-11-2023 21:13] (Version actuelle) – [Aligner / centrer horizontalement] edmc73
@@ Ligne 8: / Ligne 8: @@
   * A:hover + B (si B est frère directement suivant de A)
   * A:hover ~ B (si B est un frère suivant de A)
+===== Unités =====
+https://www.w3.org/Style/Examples/007/units.fr.html
+Pratique, si on veux une div de la hauteur de la fenetre visible moins 10 pixels
+<code css>
+height: calc(100vh - 10px);
+</code>
 ===== Aligner / centrer verticalement =====
@@ Ligne 30: / Ligne 39: @@
 Soit tout simplement avec ''text-align:center;''
-Sinon il faut ruser
+Sinon il faut ruser si on connait la largeur
 <code css>
 div{
@@ Ligne 36: / Ligne 45: @@
   margin-left: -250px;
   left: 50%;
+}
+</code>
+Sinon
+<code css>
+.parent{
+  position: relative;
+}
+.child{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 </code>
@@ Ligne 48: / Ligne 70: @@
   * http://damirfoy.com/iCheck
+===== Le blend mode =====
+La propriété CSS background-blend-mode décrit comment les éléments d'images d'arrière-plan doivent  fusionner entre elles et avec la couleur de fond de l'élément.
+Exemple => https://css-tricks.com/basics-css-blend-modes/