background-blend-mode :
[normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity] ;
Permet de recréer un effet de layer comme dans Photoshop!
background-blend-mode mélange l'image et couleur de l'élément avec l'image et couleur de l'élément derrière.
background-blend-mode n'affecte que le background de l'élément, pas ses childs.
background-blend-mode : normal ;
background-blend-mode : multiply ;
background-blend-mode : screen ;
background-blend-mode : overlay ;
background-blend-mode : darken ;
background-blend-mode : lighten ;
background-blend-mode :color-dodge ;
background-blend-mode : saturation ;
background-blend-mode : color ;
background-blend-mode : luminosity ;
filter :
[none | blur | brightness | contrast | drop-shadow | grayscale | hue-rotate | invert | opacity | saturate | sepia | url] ;
Permet de recréer un effet de filtres comme dans Photoshop!
filter ne mélange pas les couleurs de l'élément avec les objets derrières lui, contrairement à background-blend-mode.
Si un élément possède des childs, ceux-ci sont également affectés par le filtre.
VIP : filter : url nécesite un filter SVG placé dans un fichier XML. (donc, à oublier.)
filter modifie également ses childs.
filter : none ;
filter : blur(1px) ;
filter : brightness(200%) ;
0% = noir, 100% = image originale, +100% = plus clair
filter : brightness(20%) ;
0% = noir, 100% = image originale, +100% = plus clair
filter : contrast(50%) ;
0% = noir, 100% = image originale, +100% = moins contrasté
filter : contrast(150%) ;
0% = noir, 100% = image originale, +100% = moins contrasté
filter : drop-shadow(5px 5px 5px black) ;
semblable à box-shadow
filter : grayscale(100%) ;
0% = image originale, 100% = grayscale
filter : hue-rotate(90deg) ;
de 0 à 360deg
filter : invert(100%) ;
0% = image originale, 100% = inversion
filter : opacity(20%) ;
semblable à opacity
filter : saturate(0%) ;
0% = désaturé, 100% = image originale, +100% = sur-saturé
filter : saturate(200%) ;
0% = désaturé, 100% = image originale, +100% = sur-saturé
filter : sepia(80%) ;
0% = image originale, 100% = sepia
[border-width border-style border-color]
Permet de définir la présence ou l'absence de trait de contour ainsi que son style. Possible de déterminer un trait différent pour les quatres côtés.
border-top : 10px groove black ;
border-left : 4px dashed yellow ;
border-right : 1px solid red ;
border-bottom : 10px dotted blue ;
border-width
border : 0 ;
border : 1px solid black ;
border : 2px solid black ;
border : 4px solid black ;
border : 8px solid black ;
border-style
[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]
border : 10px none black ;
border : 10px hidden black ;
border : 10px dotted black ;
border : 10px dashed black ;
border : 10px solid black ;
border : 10px double black ;
border : 10px groove black ;
border : 10px ridge black ;
border : 10px inset black ;
border : 10px outset black ;
[outline-color outline-style outline-width]
Permet d'ajouter un autre border. Ce border est purement stylistique, il n'occupe pas d'espace et sera peinturé par dessus les autres éléments.
VIP : outline ne supporte malheureusement PAS border-radius.
outline-color : la couleur du outline.
outline-style : [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]
outline-width :
l'épaisseur du outline.
outline-offset
permet de déterminer une marge entre le bloc et l'outline.
outline : black solid 10px ;
outline-offset : 30px ;
outline : black solid 10px ;
Permet d'arrondir les coins de la boîte.
Possible de déterminer un border-radius différent pour les quatres coins.
Si une seule valeur est spécifiée, elle sera appliquée aux quatres coins.
Si deux valeurs sont spécifiées, la première sera appliquée aux coins top gauche et bas droit, la deuxième aux coins haut droit et bas gauche.
Si quatre valeurs sont spécifiées, la première est appliquée au coin haut gauche et les autres sont distribuées en sens horaire.
border-radius : 0 ;
border-radius : 10px ;
border-radius : 50px ;
border-radius : 50px 10px ;
border-radius : 50px 10px 5px 0 ;
[h-shadow v-shadow blur spread color | none]
Permet d'appliquer de l'ombre au bloc. Possible de mettre l'ombre dans le bloc avec le mot clé inset.
Possible d'accumuler plusieurs ombres sur un même bloc. La première ombre déclarée sera au premier plan.
h-shadow : offset horizontal de l'ombre
v-shadow : offset vertical de l'ombre
blur : mesure du flouetté de l'ombre
spread : permet de modifier l'étendue de l'ombre.
color : la couleur de l'ombre
box-shadow : inset -5px -5px black ;
sans flou, interne
box-shadow : -5px -5px black ;
sans flou
box-shadow : inset -5px -5px 5px black ;
avec flou, interne
box-shadow : -5px -5px 5px black ;
avec flou
box-shadow : 2px 2px 0 10px black ;
avec spread externe
(spread positif)
box-shadow : 70px 70px 0 -50px black ;
avec spread externe
spread négatif (l'ombre est plus petite que le bloc)
box-shadow : inset 0 0 0 40px black ;
avec spread interne positif
box-shadow : inset 0 80px 0 -40px black ;
avec spread interne négatif
(l'ombre est plus grande que le bloc)
box-shadow : 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black ;
ombres multiples
box-shadow : inset 0px -80px 40px -40px black,
inset -5px -5px 10px 10px black,
1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black ;
ombres multiples intégrant ombres internes et externes
[direction, color1, color2, ...]
Permet de créer une couleur de fond en dégradé. Possible de spécifier jusqu'où les couleurs s'étendent.
background : linear-gradient(300deg, black , red) ;
direction spécifié avec un angle
background : linear-gradient(to left, red , rgba(255,255,0,0.3), yellow) ;
plus de deux couleurs + transparence
background : linear-gradient(to bottom, red 60%, orange 90%, yellow) ;
avec positionnement des couleurs
radial-gradient()
pour des motifs circulaire. infos plus complètes
background : radial-gradient(red 60%, orange 90%, yellow) ;
avec positionnement des couleurs
repeating-linear-gradient()
repeating-radial-gradient()
permet de répéter le motif de background (mais sans façon de spécifier la taille du dégradé?)
[top right(from left) bottom(from top) left]
Permet de définir un masque pour un élément positionné de façon absolue.
VIP : ne fonctionne que pour les élément avec position : absolute et overflow : hidden.
clip : rect(0px, 310px, 108px, 12px) ;
position : absolute ;
clip : rect(0px, 240px, 108px, 12px) ;
position : absolute ;
