CSS3
www.w3schools.com

TYPO

text-align

[left | right | center | justify]
Pour gérer l'alignement du texte.

text-align : left ; blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
text-align : right ; blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
text-align : center ; blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
text-align : justify ; blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla

@font-face

Permet d'utiliser n'importe quelle typo dans la page web, mais requiert de télécharger la fonte côté utilisateur. Ça alourdi donc la page et ça prend l'autorisation de distribution de la police en question.

Générateur de format de polices @font-face : squirrel font generator

Google web fonts

@font-face {
font-family: "Arial Rounded MT Bold";

src: url("font/arial_rounded_bold-webfont.eot");
src: local("☺"),
url("font/arial_rounded_bold-webfont.woff") format("woff"),
url("font/arial_rounded_bold-webfont.svg#webfontRIeo6EtR") format("svg"),
url("font/arial_rounded_bold-webfont.ttf") format("TrueType");
}

font-family

Permet de modifier la fonte typographique (inclue les @font-face.)

font-family : Georgia, serif ;
font-family : "Trebuchet MS", sans-serif ;
font-family : "Comic Sans MS", cursive ;
font-family : Sand, fantasy ;
font-family : "Andale Mono", "Monotype.com", monospace ;

alinéas (text-indent)

text-indent: -100px ; text-indent: 50px ; text-indent: 0 ; text-indent: 50px ; text-indent: 100px ; text-indent: 150px ;

line-height

Permet de modifier l'interligne. Détermine également la hauteur du bloc inline texte.

line-height : 8px ;

line-height : 10px ;

line-height : 14px ;

line-height : 20px ;

line-height : 30px ;

line-height : 60px ;

letter-spacing

Permet de modifier l'espace entre les caractères.

letter-spacing : -2px ;
letter-spacing : 0px ;
letter-spacing : 1px ;
letter-spacing : 2px ;
letter-spacing : 4px ;
letter-spacing : 8px ;
letter-spacing : 16px ;

font-weight

[bold | normal | thin | extended | 400 | 600 | ...]

Permet de modifier la graisse de la typo.
VIP : seul normal et bold sont dispo pour toutes les fontes, les cas spécials comme extended ne sont dispo que si la typo la possède au départ.

font-weight : bold ; font-weight : normal ; font-weight : thin ;

font-size

Permet de modifier la taille de la typo.

font-size : 8px ; font-size : 10px ; font-size : 14px ; font-size : 18px ; font-size : 24px ; font-size : 40px ;

word-spacing

Permet de modifier l'espace entre les mots.

word-spacing : -15px ; word-spacing : -15px ; word-spacing : 0px ; word-spacing : 2px ; word-spacing : 4px ; word-spacing : 8px ; word-spacing : 16px ; word-spacing : 32px ;

font-style

[italic | normal]

Permet d'appliquer le style italic au texte.

font-style : italic ; font-style : normal ;

changer la casse

text-transform / font-variant
[uppercase | lowercase | capitalize | none | small-caps]

Permet d'appliquer la capitalisation ou petite capitalisation.

text-transform : uppercase ; text-transform : lowercase ; text-transform : capitalize ; text-transform : none ; font-variant : small-caps ;

text-decoration

[overline | underline | line-through | blink | none]

Permet d'ajouter les lignes sous les hyperliens et d'autres effets.

text-decoration : overline ; text-decoration : underline ; text-decoration : line-through ; text-decoration : blink ; text-decoration : none ;

list-style-type

Permet de styliser la façon de présenter les listes.

Pour les listes non ordonnées (ul):

  • list-style-type : disc ;
  • list-style-type : circle ;
  • list-style-type : square ;
  • list-style-type : none ;

Pour les listes ordonnées (ol):

  • list-style-type : decimal ;
  • list-style-type : decimal-leading-zero ;
  • list-style-type : upper-roman ;
  • list-style-type : lower-roman ;
  • list-style-type : upper-alpha ;
  • list-style-type : lower-alpha ;
  • list-style-type : lower-greek ;

Pour mettre ou enlever le retrait en début de ligne:

  • list-style-position : inside ;
  • list-style-position : outside ;

Pour remplacer le bullet par une image:

  • list-style-image : url("image.png") ;

overflow

[visible | hidden | scroll | auto]

Permet de décider comment gérer le contenu qui déborde du container.

overflow : auto ;
un scroll sera fourni si le contenu déborde.
overflow : visible ;
force l'affichage des éléments qui déborde.
overflow : hidden ;
le contenu qui déborde sera caché.
overflow : scroll ;
une barre de scroll sera forcée même si inutile

text-overflow (...)

[clip | ellipsis | string]

Pour gérer le texte qui déborde du container.
string : pas implanté?

VIP : ne fonctionne QUE POUR UNE LIGNE DE TEXTE, donc text-wrap : no-wrap et overflow : hidden DOIVENT être utilisés.

text-overflow : clip ;
overflow : hidden ;
white-space : nowrap ;

le contenu qui déborde est coupé :blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
text-overflow : ellipsis ;
overflow : hidden ;
white-space : nowrap ;

le contenu qui déborde est remplacé par une elipse(...)blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla

white-space

[normal | nowrap | pre | pre-line | pre-wrap]

Spécifie comment les espaces et retours de chariots doivent être traités. Normalement, les espaces consécutifs sont réduits à un seul et les navigateurs ignorent les retours de chariots, sauf avec la balise <pre>.

white-space : normal ;
mot grand espace retour de chariot
(les espaces consécutifs sont réduits à un seul
et les retours de chariots ignorés.
Le texte retourne à la ligne quand nécessaire.)
white-space : nowrap ;
mot grand espace retour de chariot
(les espaces consécutifs sont réduits à un seul
et les retours de chariots ignorés.
Le texte ne retourne PAS à la ligne,
sauf si une balise<br> est rencontrée.)
white-space : pre ;
mot grand espace retour de chariot
(les espaces consécutifs et retour de chariots sont préservés.
Le texte ne retourne PAS à la ligne,
sauf si une balise<br> est rencontrée.)
white-space : pre-line ;
mot grand espace retour de chariot
(les espaces consécutifs sont réduits à un seul,
mais les retour de chariots sont préservés.
Le texte retourne à la ligne quand nécessaire.)
white-space : pre-wrap ;
mot grand espace retour de chariot
(les espaces consécutifs et retour de chariots sont préservés.
Le texte retourne à la ligne quand nécessaire.)

text-shadow

[h-shadow v-shadow blur-radius color | none]

Permet de mettre de l'ombre sur et derrière le texte.
Possible de mettre plusieurs ombres sur un même élément, la première sera celle affiché au dessus.
Pas de inset, contrairement à l'ombre sur les blocs.

h-shadow : déplacement de l'ombre sur l'axe horizontal
v-shadow : déplacement de l'ombre sur l'axe vertical
blur-radius : étendue flouettée de l'ombrage
color : la couleur

text-shadow: 2px 2px 2px black ;
ombre simple
text-shadow: 1px 1px 0px black,
2px 2px 0px black, 2px 2px 0px black,
3px 3px 0px black,
4px 4px 0px black,
5px 5px 0px black ;

ombres multiples appliquées

word-wrap

[normal, break-word]

Permet de couper les mots trop long automatiquement.
normal : ne permet les césure que là où déterminé par la balise <wbr>.

word-wrap : break-word ; trèstropénomrmémentridiculementtroptroptroplongmotdansuncontaineurtroppetitpourlui.
word-wrap : normal ; trèstropénomrmémentridiculementtroptroptroplongmotdansuncontaineurtroppetitpourlui.

content

[normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url]

Permet d'ajouter du contenu dans un élément avant ou après son contenu, le tout déclaré uniquement en CSS.
VIP : content ne fonctionne QUE pour les pseudo éléments :before et :after.

code:before {
content : normal ;
}

(none)
code:before {
content : none ;
}
div#beforecounter {
counter-increment : myIndex ;
}
div#beforecounter code:before {
content : counter(myIndex) ;
}

(Pour utiliser counter, il faut déclarer counter-increment pour le parent.
Tous les childs avec :before{counter} seront incrémenté automatiquement.)
code:before {
content : attr(href) ;
}

(ajoute l'attribue de balise spécifié devant la balise!)
code:before {
content : "STRING! - " ;
}

(ajoute le texte spécifier devant la balise.)
code:before {
content : open-quote ;
}

(ajoute une quote ouvrante)
code:before {
content : close-quote ;
}

(ajoute une quote fermante)
code:before {
content : no-open-quote ;
}

(supprime la quote)
code:before {
content : no-close-quote ;
}

(supprime la quote)
code:before {
content : url("image.png") ;
}

DESIGN DE BLOC

les filtres CSS

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

resize

[none | both | horizontal | vertical]

Permet à l'utilisateur de redimentionner l'élément!
Note: resize ne fonctionne que si l'élément n'a pas la prop overflow : visible.

resize : both ;
overflow : auto ;

resize libre
resize : none ;
overflow : auto ;

resize interdit
resize : horizontal ;
overflow : auto ;

resize horizontal seulement
resize : vertical ;
overflow : auto ;

resize vertical seulement

cursor

Permet de modifier le curseur de la souris.

Hover pour voir les curseurs :

cursor : alias ;
cursor : all-scroll ;
cursor : auto ;
cursor : cell ;
cursor : context-menu ;
cursor : col-resize ;
cursor : copy ;
cursor : crosshair ;
cursor : default ;
cursor : e-resize ;
cursor : ew-resize ;
cursor : grab ;
cursor : grabbing ;
cursor : help ;
cursor : move ;
cursor : n-resize ;
cursor : ne-resize ;
cursor : nesw-resize ;
cursor : ns-resize ;
cursor : nw-resize ;
cursor : nwse-resize ;
cursor : no-drop ;
cursor : none ;
cursor : not-allowed ;
cursor : pointer ;
cursor : progress ;
cursor : row-resize ;
cursor : s-resize ;
cursor : se-resize ;
cursor : sw-resize ;
cursor : url(image.png), auto ;
toujours ajouter une alternative lorsqu'on utilise le curseur image.
cursor : vertical-text ;
cursor : w-resize ;
cursor : wait ;
cursor : zoom-in ;
cursor : zoom-out ;

border

[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

[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 ;

border-radius

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 ;

box-shadow

[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

linear-gradient

[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é?)

opacity

Permet de définir la transparence d'un objet.

opacity : 1 ;
opacity : 0.75 ;
opacity : 0.5 ;
opacity : 0.25 ;
opacity : 0.1 ;

vertical-align

[baseline | px | sub | super | top | text-top | middle | bottom | text-bottom]

Permet de définir comment aligner verticalement un élément inline ou inline bloc. Fonctionne donc pour les balises <span> et <img> par exemple.
VIP : la line-height du texte est la mesure utilisé pour vertical-align, pas la hauteur du container! vertical-align : bottom ne placera PAS l'élément en bas du container!

vertical-align : baseline ;
vertical-align : 30px ;
vertical-align : sub ;
vertical-align : super ;
vertical-align : top ;
l'élément est placé au plus haut de la ligne de texte
(ici, puisque l'image est plus grande que la ligne, elle déborde par dessous).
vertical-align : text-top ;
l'élément est placé en haut de la ligne de texte
(ici, puisque l'image est plus grande que la ligne, elle déborde par dessous).
vertical-align : middle ;
The element is placed in the middle of the parent element.
vertical-align : bottom ;
vertical-align : text-bottom ;

clip

[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 ;

BOX MODEL

box-sizing

[border-box | content-box]

La propriété box sizing permet de modifier ce que les propriétés width et height doivent inclure. Normalement, le padding et le border sont exclue de width et height. Avec box-sizing : border-box, la width inclue le padding et le border. Beaucoup plus simple de faire du flexible layout et les colonnes!

box-sizing : content-box ;
border : 10px ;
float : left ;
width : 50% ;
box-sizing : content-box ;
border : 10px ;
float : left ;
width : 50% ;

Les floats à 50% ne se juxtaposent pas...

box-sizing : border-box ;
border : 10px ;
float : left ;
width : 50% ;

float réussit à 50%!
box-sizing : border-box ;
border : 10px ;
float : left ;
width : 50% ;

AUTRES

transition

[property duration timing-function delay]

Permet de créer une animation lorsqu'une propriété de l'élément change. ex : des links, des hovers de souris...

transition-property : la propriété à animer. Inscrire all pour tout animer.
transition-duration : durée de l'animation
transition-timing-function : [linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n)]
transition-delay : délai avant de démarrer l'animation

transition : all 0.3s ease 0s ;
transition immédiate
transition : all 0.3s ease-out 0.5s ;
delait de 500 millisecondes avant la transition en mouseover et mouseout.

calc()

[+ - * /]

Permet calculer une valeur CSS! EXTRÈMEMENT utile pour centrer un élément verticalement, par exemple (c'est pas la seule solution, mais voilà).
Permet d'être plus clair dans certains calculs aussi.

width : 200px ;
margin-left : calc(50% - 200px/2) ;

bloc centré horizontalement!
height : 200px ;
top : calc(50% - 200px/2) ;
... centrer verticalement ne fonctionne qu'en positionnement absolue.
width : 200px ;
margin-left : calc( 50% - 200px / 2 ) ;
height : 200px ;
top : calc(50% - 200px / 2) ;
bloc centré verticalement et horizontalement... Enfin, presque...