<!-- Slide number: 1 -->
CSS3
OUALI Mohamed
<!-- Slide number: 2 -->
S lecteurs, propri t s et valeurs
Un s lecteur d termine quel l ment un style doit tre appliqu .
Une propri t d termine le style qui va tre appliqu un l ment.
Une valeur d termine le comportement dune propri t .
S lecteur
p {
color : blue;
font-size : 16px;
}
Valeurs
Propri t s
<!-- Slide number: 3 -->
O crire le CSS?
3 possibilit s :
Dans la balise ouvrante dun l ment
Dans l l ment HEAD du document HTML
Dans un fichier CSS s par
Pour lier un fichier HTML avec un fichier CSS, on crit :
<link rel="stylesheet" href="fichier.css" />
<!-- Slide number: 4 -->
Les s lecteurs
Un s lecteur d termine quel l ment un style doit tre appliqu .
Un s lecteur universel (s lectionne tous les l ments) : *
Un s lecteur peut tre :
Un l ment HTML : body, p, a, h1, etc.
Une classe : (on ajoute un point . au d but du nom de la classe)
Un identifiant : (on ajoute un di ze (croisillon) # au d but du nom de lidentifiant)
<!-- Slide number: 5 -->
Les s lecteurs avanc s
Il est possible de combiner les s lecteurs pour cibler pr cis ment du contenu.
Appliquer un style aux l ments A et B:
A, B {propri t : valeur;}
S lectionner un l ment B contenu dans A:
A B {propri t : valeur;}
S lectionner le premier l ment B suivant un l ment A:
A + B {propri t : valeur;}
<!-- Slide number: 6 -->
Les s lecteurs avanc s
S lectionner tous les l ments C poss dant un attribut en particulier:
C {propri t : valeur;}
S lectionner tous les l ments D poss dant un attribut en particulier et une valeur exactement:
D {propri t : valeur;}
S lectionner tous les l ments E poss dant un attribut en particulier et une valeur:
E {propri t : valeur;}
<!-- Slide number: 7 -->
Les s lecteurs avanc s
S lectionner le dernier enfant, ind pendamment du type de son parent:
C:nth-last-child () {propri t : valeur;}
S lectionner le premier enfant, ind pendamment du type de son parent:
C:nth-first-child () {propri t : valeur;}
<!-- Slide number: 8 -->
Les s lecteurs avanc s
S lectionner le ni me enfant, ind pendamment du type de son parent:
C:nth-child (n) {propri t : valeur;}
n peut tre
un nombre (cible un seul enfant)
un mot cl : odd, even
une formule : (an + b)
La formule (an + b)
a : une taille de cycle
n : un compteur (commence partir de 0)
b : une valeur de d calage.
<!-- Slide number: 9 -->
Les s lecteurs avanc s
Pour chaque entier sup rieur ou gal 0, je remplace la valeur de n et je trouve les l ments s lectionn s.
Ainsi, 2n+2 nous donne 20+2=2, 21+2=4, 2*2+2=6 et ainsi de suite.
Par exemple, 8n-3 nous donne : 80-3=-3, 81-3=5, 8*2-3=13, etc. Les 5e, 13e, 21e, ... enfants seront cibl s.
p:nth-child(3n+0) { background: #ff0000;}
li:nth-child(n+6) {
color: green;
}
Multiple de 3
A partir du 6 me
<!-- Slide number: 10 -->
Les s lecteurs avanc s
Les pseudo- l ments :after et :before permettent dajouter du contenu directement apr s ou directement avant un l ment.
Les pseudo- l ments doivent tre utilis s avec la propri t content.
Cette propri t permet de sp cifier le contenu qui est ins r .
h1::before{
content: "Titre:" ;
}
<!-- Slide number: 11 -->
Lh ritage
Les l ments en HTML h ritent des styles de leurs parents.
Do le cascading de CSS.
En cas de conflit, le style le plus proche de l l ment en question sera appliqu .
<!-- Slide number: 12 -->
Le mod le des boites
Tout l ment dune page est une boite rectangulaire et peut avoir :
Un padding
Une marge
Des bordures
Publicité
<!-- Slide number: 13 -->
MARGIN & PADDING
La propri t margin permet de d finir la taille de lespace entourant l l ment.
Elle peut tre utilis e pour positionner des l ments.
La propri t padding permet de d finir la marge int rieure ( lint rieur des bordures) dun l ment.
Elle ne doit pas tre utilis e pour positionner des l ments.
<!-- Slide number: 14 -->
Les bordures
On peut cr er des bordures et les personnaliser gr ce aux propri t s :
border-width
border-style
border-color
Nouveaut :
border-radius : pour des coins arrondis
Et ses d riv s : border-top-left-radius, etc.
<!-- Slide number: 15 -->
Les couleurs et la transparence
On utilise la propri t color
color : valeur textuelle (nom de la couleur)
color : un code couleur (#code en hexad cimal)
color : rgb(vr,vv,vb)
<!-- Slide number: 16 -->
Les couleurs et la transparence
Pour la transparence, on a 2 m thodes :
La propri t opacity (une valeur entre 0 et 1)
La fonction de couleur rgba(vr, vv, vb, opacit )
<!-- Slide number: 17 -->
Les ombres des bo tes (box-shadow)
Pour cr er des ombres autour des bo tes, on utilise la propri t box-shadow
Cette propri t a besoin de 4 valeurs :
La 1 re : le d calage horizontal de lombre
La 2 me : le d calage vertical de lombre
La 3 me : le flou gaussien de lombre (la force du d grad )
La 4 me : la couleur de lombre
Remarque : la m me logique peut sappliquer un texte en utilisant la propri t text-shadow
<!-- Slide number: 18 -->
Les ombres des bo tes (box-shadow)
Exemple :
img {
box-shadow: 8px 8px 0px #aaa;
}
img {
box-shadow: 8px 8px 12px #aaa;
}
<!-- Slide number: 19 -->
Les coins arrondis (border-radius)
Pour cr er des cr er facilement des coins arrondis.
#img1 {
border-radius:25%;
box-shadow: 8px 8px 0px #aaa;
}
#img3 {
border-radius:100%;
box-shadow: 8px 8px 0px #aaa;
}
#img2 {
border-top-left-radius: 10%;
border-bottom-right-radius: 10%; box-shadow: 8px 8px 12px #aaa;
}
<!-- Slide number: 20 -->
Fond en d grad
Deux types de d grad s :
D grad lin aire (linear)
Radial (radial)
Pr fixes vendeurs pour les d grad s :
Chrome et safari : -webkit-
Mozilla Firefox : -moz-
Internet Explorer : -ms-
Opera : -o-
<!-- Slide number: 21 -->
Fond en d grad (linear)
La valeur linear-gradient() de la propri t : background
background : linear-gradient (liste de couleurs);
Exemple 1:
body {
background: linear-gradient(blue, white);
}
<!-- Slide number: 22 -->
Fond en d grad (linear)
On peut ajouter plusieurs couleurs
background : linear-gradient (liste de couleurs);
Exemple 3:
body {
background: linear-gradient(blue, white, red);
}
<!-- Slide number: 23 -->
Fond en d grad (linear)
On peut ajouter la direction du d grad
background : linear-gradient (direction, liste de couleurs);
Directions :
to left, to right, to top, to bottom
To top right, to top left, etc.
Publicité
Exemple 2:
body {
background: linear-gradient(to right, blue, white);
}
<!-- Slide number: 24 -->
Fond en d grad (linear)
On peut utiliser les degr s pour la direction du d grad
background : linear-gradient (degr , liste de couleurs);
Exemple 3:
body {
background: linear-gradient(50deg, blue, white, red);
}
<!-- Slide number: 25 -->
Fond en d grad (radial)
La valeur radial-gradient() de la propri t : background
background : radial-gradient (liste de couleurs);
Exemple 3:
body {
background: radial-gradient(blue, white, red);
}
<!-- Slide number: 26 -->
Fond en d grad (radial)
On peut des pourcentages pour chaque couleur
background : radial-gradient (couleur1 %, couleur2%, &);
Exemple 3:
body {
background: radial-gradient(blue 50%, white 10%, red);
}
<!-- Slide number: 27 -->
Fond en d grad (radial)
On peut sp cifier lorigine du rayon
background : radial-gradient (rayonX rayonY, liste de couleurs);
Exemple 3:
body {
background: -moz-radial-gradient(0 0, blue , white , red)
}
<!-- Slide number: 28 -->
Larri re-plan image
Les types dimages
Jpeg (ou jpg) : pour les photographies
Png : pout tout autre type dimages (pour la transparence)
Gif : pour les images anim es
Bitmap : viter absolument
<!-- Slide number: 29 -->
Larri re-plan image
Pour ins rer un image :
On utilise l l ment img lint rieur dun l ment de type block (p, div, etc).
On a besoin dau moins 2 attributs pour l l ment img
src : source de limage
alt : un message afficher lorsque limage ne saffiche pas
On peut aussi utiliser lattribut title pour afficher un texte au survol de la souris
<!-- Slide number: 30 -->
Larri re-plan image
On utilise la propri t : background-image
Ainsi que des propri t s annexes :
background-repeat
background-position
background-attachment (fixed, scroll)
<!-- Slide number: 31 -->
Polices "exotiques " (@font-face)
La propri t @font-face de CSS3 permet d'afficher une police exotique (personnelle ou non standard) embarqu e sur le serveur.
@font-face {
font-family: 'mapolice';
src: url('pacifico-webfont.eot');
src: url('pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('pacifico-webfont.woff2') format('woff2'),
url('pacifico-webfont.woff') format('woff'),
url('pacifico-webfont.ttf') format('truetype'),
url('pacifico-webfont.svg#pacificoregular') format('svg');
}
h1 {
font-family:mapolice;
}
<!-- Slide number: 32 -->
Transformations
On utilise la propri t : transform
permet de manipuler un l ment HTML sur les axes X et Y (horizontal et vertical) gr ce des fonctions diverses de transformation graphique.
transform: function(value);
Elle poss de les valeurs suivantes:
rotate() pour la rotation
scale() pour les zooms
translate() pour les d calages
skew()
matrix() pour les d formations
<!-- Slide number: 33 -->
Transformations
La propri t transform-origin
Pour pouvoir appliquer des transformations, nous avons besoin de savoir quel est le point d'origine (d'ancrage) de la transformation.
La valeur initiale de cette propri t est le centre de l' l ment, ce qui quivaut la notation
transform-origin: 50% 50%;
Il est possible de changer cette valeur en utilisant un mot-clef de position (top, right, bottom, left) suivi d'une valeur chiffr e dont l'unit peut varier (px, %, etc.)
! (Picture4.jpg)
Publicité
div {
transform-origin: top 0 left 0;
transform: scale(1.25);
}
<!-- Slide number: 34 -->
Transformations
rotate()
permet d'effectuer une rotation de l' l ment cibl
La valeur x s'exprime en degr s (unit deg)
transform: rotate(x);
! (Picture4.jpg)
<!-- Slide number: 35 -->
Transformations
rotate() - exemple
#bloc {
width:100px;
height:100px;
background-color:#099;
margin:100px 0 0 100px;
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-ms-transform:rotate(25deg);
-o-transform:rotate(25deg);
transform:rotate(25deg);
}
<!-- Slide number: 36 -->
Transformations
scale()
permet d'agir sur l' chelle (les dimensions) de l' l ment
La valeur y est optionnelle et sera gale la valeur de x si elle est non renseign e.
transform: scale(x,y);
! (Picture2.jpg)
<!-- Slide number: 37 -->
Transformations
scale() - exemple
transform: scale(1.25)
Avant redimensionnement
Apr s redimensionnement
<!-- Slide number: 38 -->
Transformations
translate()
Elle permet d'effectuer une translation (un d placement) de l' l ment sur les axes X et Y.
y est une valeur optionnelle quivalente 0 si elle n'est pas renseign e. Les deux valeurs peuvent tre n gatives.
transform: translate(x,y);
! (Picture2.jpg)
<!-- Slide number: 39 -->
Transformations
translate() - exemple
transform: translate(30px,45px)
Avant transaltion
Apr s transaltion
<!-- Slide number: 40 -->
Transformations
skew()
permet d'obliquer la forme d'un l ment.
transform: skew(x, y);
! (Picture2.jpg)
<!-- Slide number: 41 -->
Transformations
La fonction "absolue" matrix()
permet de r unir en une seule d claration toutes les fonctions pr c dentes.
prend six param tres, contenant des fonctions math matiques, qui vous permet :
la rotation,
la mise en chelle,
le d placement (traduisez),
et l'inclinaison des l ments.
http://www.useragentman.com/matrix/
<!-- Slide number: 42 -->
Transitions
Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propri t CSS lorsqu'un v nement est d clench :
soit via une pseudo-classe telles que :hover, :focus ou :active
soit via JavaScript
Pour d finir une nouvelle transition anim e, il est n cessaire de pr ciser au minimum :
La ou les propri t (s) animer
La dur e de l'animation
<!-- Slide number: 43 -->
Les propri t s de transition CSS
| Propri t | Explication |
| --- | --- |
| transition-property | Pr cise les propri t s CSS transformer |
| transition-duration | Pr cise la dur e de la transition |
| transition-timing-function | Pr cise la fonction de transition utiliser, le mod le d'interpolation (acc l ration, d c l ration...) |
| transition-delay | Pr cise le retard (ou l'avance) du d part de la transition |
<!-- Slide number: 44 -->
Les propri t s de transition CSS
La propri t transition-property
permet de d finir quelles propri t s seront affect es par les transitions
transition-property: valeur;
| Valeur | Explication |
| --- | --- |
| all | (Valeur par d faut) Toutes les propri t s animables seront anim es |
| property | Liste de propri t s s par es par des virgules |
Publicité
| none | Aucune propri t ne sera anim e |
Exemple
a { transition-property: color, font-size; }
<!-- Slide number: 45 -->
Les propri t s de transition CSS
La propri t transition-duration
permet de pr ciser la dur e de la transition
Les valeurs accept es sont des valeurs de temps
Les deux unit s de temps d finies en CSS sont :
s : la seconde
ms : la milliseconde
transition-duration : dur e;
Exemple
a {
transition-property: color, font-size;
transition-duration: 2s;
}
<!-- Slide number: 46 -->
Les propri t s de transition CSS
La propri t transition-timing-function
Pour calculer les valeurs interm diaires, le navigateur proc de une interpolation.
La fonction calculant la valeur de cette interpolation influence directement la fluidit de l'animation
Les fonctions pr d finies sont les suivantes :
ease : Rapide sur le d but et ralenti sur la fin.
linear : La vitesse est constante sur toute la dur e de l'animation.
ease-in : Lent sur le d but et acc l re de plus en plus vers la fin.
ease-out : Rapide sur le d but et d c lere sur la fin.
ease-in-out : Le d part et la fin sont lents.
<!-- Slide number: 47 -->
Les propri t s de transition CSS
! (Picture2.jpg)
<!-- Slide number: 48 -->
Les propri t s de transition CSS
La propri t transition-delay
La transition commence, par d faut, d s que la propri t est chang e suite l' v nement.
La propri t transition-delay permet d'adapter ce comportement en retardant ou en avan ant le d but de la transition.
Exemple
a {
transition-property: color, font-size;
transition-duration: 2s;
}
<!-- Slide number: 49 -->
Les propri t s de transition CSS
Exemple 1 avec javascript
a {
transition-property : color, font-size;
transition-duration : 2s;
transition-timing-function : ease-out;
transition-delay : 1s;
}
a:hover {
color : red;
font-size : 28px;
}
<!-- Slide number: 50 -->
Les propri t s de transition CSS
Exemple 2 sans javascript
#div2 {
width:100px;
height:100px;
background:#0FF;
transition:width 2s, height 2s, transform 2s;
}
#div2:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}
<!-- Slide number: 51 -->
Les propri t s de transition CSS
Exemple avec javascript
<button onClick="demarrer()">D marrer</button>
<div id="div1">
#div1 {
width:150px;
border: 1px solid black;
background-color:rgba(195,192,237,1.00);
}
function demarrer() {
var box = document.getElementById('div1');
box.style.transitionDuration = "2s";
box.style.width = "300px";
}
<!-- Slide number: 52 -->
Les propri t s de transition CSS
La notation raccourcie transition
Cette notation permet de d crire facilement et de mani re concise les diff rentes propri t s en jeu l'aide d'une seule propri t .
La syntaxe est la suivante
selecteur {
transition:
<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>;
}