Différences

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

--- devweb:css [21-09-2013 23:14]
edmc73 créée
+++ devweb:css [16-11-2023 22:13] (Version actuelle)
edmc73 [Aligner / centrer horizontalement]
@@ 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 =====
+Exemple pour centrer une image verticalement dans une div
+<code html>
+<style>
+div{
+  height:150px;
+  line-height: 150px;
+}
+img{
+  vertical-align: middle;
+}
+</style>
+<div>
+  <img src...>
+</div>
+</code>
+===== Aligner / centrer horizontalement =====
+Soit tout simplement avec ''text-align:center;''
+Sinon il faut ruser si on connait la largeur
+<code css>
+div{
+  width: 500px;
+  margin-left: -250px;
+  left: 50%;
+}
+</code>
+Sinon
+<code css>
+.parent{
+  position: relative;
+}
+.child{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</code>
+===== Styliser les checkbox et boutons radio =====
+  * http://www.screwdefaultbuttons.com/
+  * http://www.jquery4u.com/plugins/15-jquery-radio-button-checkbox-style-plugins/
+  * 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/

Outils pour utilisateurs

Outils du site

Différences

Outils de la page