daw - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...la notionde boite :...
TRANSCRIPT
![Page 1: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/1.jpg)
DAWDéveloppement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
![Page 2: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/2.jpg)
Conception de page web statique
2. CSS3
Validation CSS
W3C Validator at http://jigsaw.w3.org/css-validator/
![Page 3: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/3.jpg)
• Tous les navigateurs ne reconnaissent pas les mêmes propriétés CSS et ne les implémentent pas de la même manière. Afin d’avoir le même rendu par tous les navigateurs, ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant.
Les préfixes vendeurs
![Page 4: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/4.jpg)
Les préfixes vendeurs-webkit- → Chrome, Safari, Android
-moz- → Mozilla & Firefox
-o- → Opera
-khtml- → Safari 1.1
-ms- → IE9
-ms-filter → IE8
filter → IE5-7
th{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; }
Propriétés préfixées
Propriété sans préfixe
http://caniuse.com/
http://shouldiprefix.com/
![Page 5: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/5.jpg)
Le modèle de boites
• Le navigateur représente chaque élément comme une boîte.
• La boîte des éléments de type bloc commence sur une nouvelle ligne et prend toute la largeur disponible.
• La boîte des éléments de type inline se comporte comme un mot dans le texte, et sa largeur dépend de son contenu.
![Page 6: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/6.jpg)
• flux du document : ordre dans lequel le navigateur affiche ces boîtes.• flux normal (par défaut)
• un élément père est un conteneur
• un élément fils s'affiche dans son conteneur
• élément bloc• s'affiche en dessous de son frère précédent.
• occupe toute la largeur disponible dans son conteneur.
• élément en ligne• s'affiche à côté de son frère précédent.
• retour à la ligne quand il n'y a plus de place dans le conteneur.
• flux personnalisé• certaines propriétés CSS permettent de sortir des éléments du flux normal
Flux d’affichage du documentHTML
![Page 7: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/7.jpg)
• exemple de flux normal
NNNNNNoooooouuuuuussssss nnnnnneeeeee ppppppoooooouuuuuuvovovovovovonnnnnnssssss ppppppaaaaaassssss aaaaaafffffffichfichfichfichfichficheeeeeerrrrrr cecececececetttttttttttteeeeee iiiiiimamamamamamaggggggeeeeee ppppppoooooouuuuuurrrrrr llllll’’’’’’iiiiiinnnnnnststststststaaaaaannnnnntttttt......
Flux d’affichage du documentHTML
![Page 8: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/8.jpg)
• <div> et <span> éléments génériques sans information
structurante prédéfinie• utilisés en association avec des feuilles de style CSS ou du Javascript via les attributs id,
class ou style
Flux d’affichage du documentHTML
Remarque
div : balise de type bloc
• peut contenir tous les autres éléments de type
bloc ou en ligne
span : balise de type en ligne (inline)• Ne peut contenir que les éléments en ligne
![Page 9: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/9.jpg)
• Une boîte est composée de 4 parties :• Contenu (contenu de l'élément : texte, image… autres éléments…)
• Marge interne (Padding) :marge entre le contenu et la bordure
• Cadre (Border): une bordure
• Marge externe (Margin): marge entre le cadre et les boîtes matérialisant les
éléments adjacents dans le flux
marge externe
bordure
marge interne
contenu
La notion deboite
![Page 10: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/10.jpg)
• Tous les éléments d'une boîte peuvent être contrôlés par des
propriétés CSS.
marge externebordure
Contenulargeur et
hauteur
width
height
Marge interne
épaisseur
padding
Borduretype, épaisseur
et couleur
border-style
border-width
border-color
Marge externe
épaisseur
margin
Arrière plan
couleur
image
background
margin-right
height
background-color
marge interne padding-top
width
La notion de boite : Propriétés CSS
Hauteur
élément
border-bottom-width
Width + padding-left + padding-right + border-width
Largeur élément
![Page 11: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/11.jpg)
La notion de boite : Propriétés CSS
![Page 12: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/12.jpg)
Notions de réseaux
La notion de boite : Propriétés CSS
exemple
![Page 13: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/13.jpg)
La notion de boite : Propriétés CSS
Box-sizing: permet de ternir compte de la largeur, de la bordure et des
padding
EXEMPLE
![Page 14: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/14.jpg)
• exemple (sans positionnement)
Positionnement des éléments avecCSS
![Page 15: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/15.jpg)
250px
400px 400px
250px 20px20px
30px 30px
• attribution de dimensions aux éléments div1 et p1
ajout de marges
internes (padding)
aux élémentsdiv1 et p1
Positionnement des éléments avecCSS
![Page 16: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/16.jpg)
20px
• ajout d'une marge externe (margin) a l'élément div1
div1 sans marge
20px
div1 avec marge
55
Positionnement des éléments avecCSS
![Page 17: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/17.jpg)
• positionnement relatif
• l'élément est décalé à l'aide des propriétés top, right, left, bottom par
rapport à sa position normale dans le flux courant
40px
50px
Positionnement des éléments avecCSS
EXEMPLE
![Page 18: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/18.jpg)
100px 90px
• positionnement absolu
• sort un élément du flux
• expriment des décalages non plus par rapport à position
théorique (positionnement relatif) mais par rapport à la position
d'un bloc conteneur de référence
Positionnement des éléments avecCSS
![Page 19: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/19.jpg)
Positionnement des éléments avecCSS
![Page 20: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/20.jpg)
• Dans le cas où tous les ancêtres de l'élément positionné en absolu ne sont pas positionnés (static), le navigateur les ignorent tous en rétablissant le positionnement par rapport aux bords de la page.
Positionnement des éléments avecCSS
![Page 21: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/21.jpg)
Exemple
<body>
<p> <img src="dessin.gif" style="position: absolute;
left: 100px; top: 70px;"> </p>
</body>
Positionnement des éléments avecCSS
![Page 22: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/22.jpg)
Positionnement absolu par rapport aux bords du premier ancêtre positionné
Exemple<body>
<p style="position: absolute; top: 40px; left: 100px; background-color: #FFFF99"> du texte : bla bla
<img src="rap.gif" style="position: absolute; left: 80px; top :60px;">
</p>
</body>
Positionnement des éléments avecCSS
![Page 23: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/23.jpg)
Positionnement des éléments avecCSS
![Page 24: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/24.jpg)
• positionnement fixe
• cas particulier du positionnement absolu
• l'élément reste fixe dans la page par rapport à la zone de visualisation (pas de
scroll)
positionnement
absolu
scrolling en
liaisonavec l'élément de référence
positionnement
fixe
pas de scrolling
Positionnement des éléments avecCSS
![Page 25: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/25.jpg)
• En cas de chevauchement entre des éléments , la propriété z-index permet de choisir quel élément va apparaître au dessus de quel autre
• z-index va prendre un nombre en valeur : un nombre plus grand positionnera un élément devant un autre ayant un z-index plus petit.
Positionnement des éléments avecCSS
exemple
![Page 26: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/26.jpg)
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
exemple
![Page 27: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/27.jpg)
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
![Page 28: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/28.jpg)
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
![Page 29: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/29.jpg)
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
![Page 30: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/30.jpg)
• positionnement flottant
1. sort l'élément du flux
2. l'élément est "poussé" à gauche (float: left)
ou à droite (float: right) de son conteneur.
3. les éléments qui le suivent dans le
conteneur prennent place autour de lui.
positionnement flottant (right)
Positionnement des éléments avecCSS
![Page 31: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/31.jpg)
p4p5
• possibilité de rendre invisible des éléments
Positionnement des éléments avecCSS
•visibility:hidden masque
l'élément mais réserve sa
position et ses dimensions.
L'élément occupe de
l'espace sur la page.
•
![Page 32: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/32.jpg)
p4
• possibilité de rendre invisible des éléments
Positionnement des éléments avecCSS
•display:none l'élément n'est plus du tout affiché.Tout se passe comme si il n'existait pas
![Page 33: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/33.jpg)
div.bandeau {
width:100%; height:20%;
border-style:solid; border-width:2px;
border-color:black;
background-color:#22FF99;
}
div.menu {
float:left;
width:15%; height:80%;
background-color:#EEEEEE;
}
div.contenu {
float:center;
width:75%; height:80%;
background-color:#FFFFFF;
}
div.pied_page {
clear:both;
width:100%; height:20%;
background-color:#33FF99;
}
Mise en page avec CSS
Menu Contenu
Utilisation :
<div class="bandeau">
<h1>bandeau</h1>
</div>
<div class="menu">
<p> Menu</p>
</div>
<div class="contenu">
<p> Contenu </p>
</div>
<div class="pied_page">
<p>pied_page</p>
</div>
bandeau
Pied_page
![Page 34: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/34.jpg)
exemple
![Page 35: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/35.jpg)
La direction: flex-direction
row : organisés sur une ligne (par défaut)
column : organisés sur une colonne
row-reverse : organisés sur une ligne, mais en ordre
inversé
column-reverse : organisés sur une colonne,
mais en ordre inversé
![Page 36: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/36.jpg)
Le retour à la ligne: flex-wrap
nowrap : pas de retour à la ligne (par défaut)
wrap : les éléments vont à la ligne lorsqu'il n'y a
plus la place
wrap-reverse : les éléments vont à la ligne
lorsqu'il n'y a plus la place en sens inverse
![Page 37: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/37.jpg)
![Page 38: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/38.jpg)
justify-content: Pour changer l’alignement,
flex-start : alignés au début (par défaut)
flex-end : alignés à la fin
center : alignés au centre
space-between : les éléments sont étirés
sur tout l'axe (il y a de l'espace entre eux)
space-around : les éléments sont étirés
sur tout l'axe, mais ils laissent aussi de
l'espace sur les extrémités
![Page 39: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/39.jpg)
![Page 40: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/40.jpg)
Agrandir la taille avec flex
.element:nth-child(1){ flex: 2;}
.element:nth-child(2){ flex: 1;}
![Page 41: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/41.jpg)
Les transitions permettent de modifier la valeur
d'une propriété CSS de façon fluide, dans le
temps, créant ainsi une transition entre les
différentes valeurs de la propriété.
Exemple changer progressivement la couleur de
nos textes.
Les transitions avecCSS
![Page 42: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/42.jpg)
Les transitions avecCSS
Pour définir une nouvelle transition animée, il est
nécessaire de préciser au minimum :
•La ou les propriété(s) à changer
•La durée de la transition
•Les conditions de déclenchement de ces
transitions
![Page 43: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/43.jpg)
Propriété color concernée
par la transition
Durée de la transition
La transition sera
effectuée au moment
du survol du lien
Les transitions avecCSS
exemple
![Page 44: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/44.jpg)
Au survol
de l’image
de pomme
Le texte
apparait
Les transitions avecCSS
exemple
![Page 45: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/45.jpg)
Transition-property: précise les propriétés css à
transformer
a { transition-property: color, width; }
Transition-duration: précise le temps que dure la
transition
a { transition-duration: .2s; }
.
Les transitions avecCSS
![Page 46: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/46.jpg)
Transition-delay: précise le temps de début de
l ’animation
a { transition-delay: 2s; }
Transition-timing-animation: indique quel type de
transition on veut voir. D'une certaine façon, cela détermine
quelle est "l'accélération" de l'effet d'animation.
a { transition-timing-duration: ease /*Rapide sur le
début et ralenti sur la fin*/
Les transitions avecCSS
![Page 47: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/47.jpg)
Ces 4 propriètés peuvent être rassemblée en une
seule meta-proprièté avec l’obligation de préciser la
Transition-property et la Transition-duration
.
p{
transition: width 2s ,
background-color 5s;
}
p:hover{
width: 400px;
background-color: red;}
Les transitions avecCSS
![Page 48: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/48.jpg)
Les animations CSS3 sont semblables aux
transitions. La majeure différence entre les deux est
que les animations permettront un contrôle très
précis dans le temps de la valeur que prendront les
différentes propriétés CSS.
Pour créer une animation en CSS, nous avons
besoin de la propriété animation ainsi que la règle
CSS @keyframes qui représentent le déroulement
temporel de l’animation.
Les animations avecCSS
exemple
![Page 49: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/49.jpg)
p {
animation: monanimation 60s;
}
@keyframes monanimation {
0% { color: blue; }
50%{color:green;}
100%{ color: yellow; }
}
Nom de
l’animation
Durée de
l’animation
Temps de
chaque
changement
Les animations avecCSS
![Page 50: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/50.jpg)
Les différentes propriétés d'animation sont :
animation-name: Où on indique le nom de
l'animation à utiliser. (obligatoire)
animation-duration: Où on indique la durée en
milliseconde (ms) ou en seconde (s) de l'animation.
(Obligatoire)
animation-iteration-count: Le nombre de fois que
l'animation doit être effectué. La valeur devra être un
nombre entier ou le mot clé infinite
animation-direction: Définira si l'animation doit
toujours jouer du début à la fin, ou si une fois rendu
à la fin, elle doit refaire l'animation en sens inverse.
Les animations avecCSS
![Page 51: DAW - e-monsitesalimaouadfel.e-monsite.com/medias/files/2017-css3-p...La notionde boite : Propriétés CSS Box-sizing: permet de ternir compte de la largeur, de la bordure et des padding](https://reader033.vdocuments.pub/reader033/viewer/2022042918/5f5d1fd74afceb7c2a3e9422/html5/thumbnails/51.jpg)
Nom de
l’animation
Répétition
Les animations avecCSS