====== CSS ======

===== Modifier un élément sur action d'un autre élément =====


  * A:hover B (si B est descendant de A)
  * A:hover > B (si B est fils de A)
  * 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/