Certaines propriétés fonctionnent directement, certaines nécessitent le préfixage par -moz- pour Firefox et sont probablement inconnues d'Internet Explorer?

Animation

Déclaration

@keyframes nom_animation { selecteur {style}}

selecteur : pourcentage de durée du style [ 0-100% from (comme au début) to (comme à la fin)

Exemple : @keyframes Vas-y{ 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;}}

Définition

animation : name | duration | timing-function | delay | iteration-count | direction | play-state

animation-name : nom de l'animation @keyframes

animation-duration : durée de l'animation [en secondes]

animation-timing-function : description de l'animation

• linear : même vitesse du début à la fin

• ease : lent - rapide - lent

• ease-in : départ lent

• ease-out : fin lente

• cubic-bezier(n,n,n,n) : valeurs personnalisées entre 0 et 1

animation-delay : délai avant le départ de l'animation [en secondes]

animation-iteration-count : nombres de fois que la page doit jouer l'animation [ nombre | infinite ]

animation-direction : spécifie si l'animation doit se jouer normalement, à l'envers, alterner les deux [ normal | reverse | alternate | alternate-reverse ]

animation-play-state : animation lancée ( running) ou en pause ( paused)

Exemple : animation : Vas-y 5s infinite;

Transparence

rgba est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.

rgba(rouge , vert , bleu , opacité entre 0 et 1

Transformation

Origine

détermine l'axe de la transformation

transform-origin : left | top | right | bottom | Valeur horizontale Valeur verticale

Déformation

Rotation

transform : rotate(valeurdeg)

Taille

transform : scale(multiplicateur)

Inclinaison

transform : skew(valeur horizontaledeg , Valeur verticaledeg)

Animation

transform: translate(déplacement horizontal , déplacement vertical);

transition: propriété durée fonction_temps délai_début;

fonction_temps = cubic-bezier(cp1x, cp1y, cp2x, cp2y) - ease - line ease-in-out -

transform: scale(coefficient_largeur , coefficient_hauteur);

Affichage en colonne

-moz-column-count : Nombre de colonnes

-moz-column-width : Taille

-moz-columns : Nombre Taille

-moz-column-gap : Écart entre les colonnes

-moz-column-fill : Équilibre (balance) ou remplit colonne après colonne (auto)

-moz-column-rule : Ligne de séparation (comme border)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Fond dégradé

background-image : dégradé ou background : dégradé

linear-gradient([ [ [ angle | to [top|bottom] || [left|right] ],] color-stop[, color-stop]+);

radial-gradient( [position || angle,] [shape || size,] stop, stop[, stop]* )

repeating-linear-gradient( [ angle | to side-or-corner ,] color-stop [, color-stop]+ )

side-or-corner = [left | right] || [top | bottom]

color-stop = color [percentage | length ]

repeating-radial-gradient

Bordure arrondie

border-radius : taille {1,4}

1= haut gauche - 2 = haut droit - 3 = bas droit - 4 = bas gauche

taille : en px ou en %

exemples

Effet d'ombre

box-shadow : décalage_horizontal décalage_verticale taille du flou étendue couleur inset

Bordure image

border-image: url('source') slice width outset repeat

slice : découpage de l'image par 4 traits (9 zones).

width : largeur de la bordure

outset : écart entre le contenu et la bordure

repeat

• stretch :l'image n'est pas répétée mais étirée

• repeat :l'image n'est pas étirée mais répétée ; la dernière occurrence peut être tronquée.

• round : l'image est répétée mais adaptée pour tomber juste.

• space :

Image originale.