7/28/2019 prsentation au css3
1/34
CSS3
1
7/28/2019 prsentation au css3
2/34
Plan
Introduction Les Bordures
Effets du texte
Transformations 2D Transformations 3D
Transition
Animations Interface Utilisateur
Exemples
7/28/2019 prsentation au css3
3/34
IntroductionLe CSS3 est le nom employ pour caractriser
lensemble des nouveauts depuis le CSS2.1.Il sagit par exemple dun ensemble de nouveaux
effets appliquer sur nos lments HTML.
CSS3 est galement un ensemble de nouveauxslecteurs, de nouvelles manires de spcifier les
couleurs, une dtection des caractristiques de
lappareil de lutilisateur, des calculs dans les feuilles
de style, des SVG en arrire plan,alors le CSS3est un gnreux enrichissement des feuilles de style
qui, en plus dtre profitable lutilisateur, lest au
dveloppeur galement !
06/06/2013 3
7/28/2019 prsentation au css3
4/34
Bordures
Les bordures, avec le CSS3,atteignent un niveau suprieur
offrant la possibilit d'utiliserdes dgrads, des coins
arrondis, des ombres et des
bordures d'images.
06/06/2013 4
7/28/2019 prsentation au css3
5/34
Bordures
06/06/2013 5
7/28/2019 prsentation au css3
6/34
Bordures
Les coins arrondisd iv
{border :2px sol id ;border-radius:25px;-webkit-border-radius :25px; /* Safari */
-moz-border-radius :25px ; /* firefox */}
06/06/2013 6
7/28/2019 prsentation au css3
7/34
Bordures
Box Shadow (ombre du boite)div
{box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;-webkit-box-shadow: 10px 10px 5px #888888; /*Safari */}
06/06/2013 7
7/28/2019 prsentation au css3
8/34
Bordures
Border Imagediv
{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /*
Firefox */-webkit-border-image:url(border.png) 30 30 round; /*Safari and Chrome */}
06/06/2013 8
7/28/2019 prsentation au css3
9/34
Background Arrire plan
06/06/2013 9
Depuis que les feuilles de style existent, la gestion des images
d'arrire-plan est prvue : les clbres proprits background-
color, background-image, background-position,background-
repeat et background-attachment naissent avec CSS1, mme si
malheureusement leur compatibilit n'est pas encore totale.
Ces proprits connues de tout bon webdesigner permettent decontrler l'apparence de l'arrire plan d'une bote. Un des
modules de CSS3 tend ce contrle de faon rpondre des
besoins plus actuels et volus, notamment via le
redimensionnement et la superposition des images.
7/28/2019 prsentation au css3
10/34
Background Arrire plan
La Proprit : Background Size (taille de larrire plan)
div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 and
earlier */-webkit-background-size:80px 60px; /* Safari */
background-size:80px 60px;
background-repeat:no-repeat;
}
06/06/2013 10
7/28/2019 prsentation au css3
11/34
Background Arrire plan
La Proprit : Background Origindiv
{
background : url(img_flwr.gif);
background-repeat : no-repeat;
background-size : 100% 100%;-webkit-background-origin:content-box; /* Safari */
background-origin : content-box;
}
06/06/2013 11
7/28/2019 prsentation au css3
12/34
Background Arrire plan
La Proprit :Multiple Backgrounds
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
06/06/2013 12
Grce aux nouvelles valeurs multiples utilisables dans la
proprit CSS background , il sera dsormais possible
d'appliquer plusieurs images d'arrire-plan sur le mme lment,
sans devoir en imbriquer plusieurs.
7/28/2019 prsentation au css3
13/34
Effets du texte
06/06/2013 13
7/28/2019 prsentation au css3
14/34
Effets du texte
Text Shadow : La proprit Text-shadow permet de mettre enplace un effet dombre port
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Text Word Wrapping
p {word-wrap:break-word;}
06/06/2013 14
forcer la csure dun mot long
laide de la proprit word-
wrap, applique au parent et
qui aura pour effet de couper le
mot un endroit arbitraire afin
de provoquer un retour la
ligne.
7/28/2019 prsentation au css3
15/34
Transformations 2D
06/06/2013 15
7/28/2019 prsentation au css3
16/34
Transformations 2D
On peut utiliser 5 proprits pour Transform :
translate()
rotate()
scale()
skew()
matrix()
06/06/2013 16
7/28/2019 prsentation au css3
17/34
Transformations 2D
Translate (x-axis, y-axis) : Changer la position dun lment
div{transform: translate(50px,100px);-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */}
06/06/2013 17
7/28/2019 prsentation au css3
18/34
Transformations 2D
Rotate (degree) : faire une rotation dun lmentdiv{transform: rotate(30deg);-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */
}
06/06/2013 18
7/28/2019 prsentation au css3
19/34
Transformations 2D
Scale (x-axis, y-axis): changer la taille dun lmentdiv{transform: scale(2,4);-webkit-transform: scale(2,4); /* Safari and Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */
}
06/06/2013 19
7/28/2019 prsentation au css3
20/34
Transformations 2D
Skew (x-axis-degree, y-axis-degree): tourner un lmentavec un angle donn
div
{
transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
06/06/2013 20
7/28/2019 prsentation au css3
21/34
Transformations 2D
Matrix (n, n, n, n, n, n):elle combine tous les autresmthodes
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and
Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
06/06/2013 21
7/28/2019 prsentation au css3
22/34
Transformations 3D
06/06/2013 22
cest des proprits CSS qui permettent de transformer unlment HTML en 3 dimensions. Ces proprits ont donner
naissance diverses expriences encore inimaginable avec ce
langage il y a quelques annes.
7/28/2019 prsentation au css3
23/34
Transformations 3D
06/06/2013 23
7/28/2019 prsentation au css3
24/34
Transformations 3D
06/06/2013
24
7/28/2019 prsentation au css3
25/34
Transition
06/06/2013 25
Les transitions CSS3 permettent dviter lutilisation du Flash oude librairies danimations Javascript. Cest une alternative
performante car elle utilise le moteur de rendu natif du
navigateur. De plus, cette solution simple et standard offre une
dgradation intressante sur les navigateurs plus anciens.
7/28/2019 prsentation au css3
26/34
Transition
Spcifier la proprit css sur laquelle on veut appliquer laTransition et la dure de lanimation
Example :
d iv
{
transit ion: w idth 2s, height 2s, transform 2s;
-moz-transit ion: w idth 2s, height 2s, -moz-transform 2s;
-webk it-t ransit ion: wid th 2s, height 2s, -webk it-t ransform 2s;
-o-transit io n: w idth 2s, height 2s,-o- transfo rm 2s;
}
06/06/2013 26
EXAMPLE
http://localhost/var/www/apps/conversion/tmp/scratch_13/examples/Transition.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_13/examples/Transition.htm7/28/2019 prsentation au css3
27/34
Animations
06/06/2013 27
7/28/2019 prsentation au css3
28/34
Animations
@keyframes myfirst{from {background: red;}to {background: yellow;}}
@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}
@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background: red;}to {background: yellow;}}
06/06/2013 28
Ils permettent de dfinir une liste de proprits CSS appliquer enfonction dune dure donne
@keyframes
7/28/2019 prsentation au css3
29/34
Les proprits dAnimation
06/06/2013 29
div
{
animation-name: myfirst;
animation-duration: 5s;animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
EXAMPLE DANIMATION
http://localhost/var/www/apps/conversion/tmp/scratch_13/examples/keyframe%20animation.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_13/examples/keyframe%20animation.htm7/28/2019 prsentation au css3
30/34
Interface Utilisateur
06/06/2013 30
CSS3 apporte quelques grandes proprits nouvelles
relatives des lments de redimensionnement,curseurs, soulignant, mise en bote et plus encore
7/28/2019 prsentation au css3
31/34
Interface Utilisateur
06/06/2013 31
7/28/2019 prsentation au css3
32/34
Interface Utilisateur
Examples :
div /* changer la taille */{resize:both;overflow:auto;}
div /* ligne entoure la bordure */{
border:2px solid black;outline:2px solid red;
outline-offset:15px;}
06/06/2013 32
EXAMPLE USER INTERFACE
http://localhost/var/www/apps/conversion/tmp/scratch_13/examples/interface%20utilisateur.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_13/examples/interface%20utilisateur.htm7/28/2019 prsentation au css3
33/34
Exemples de ce quonpeut faire avec css3
7/28/2019 prsentation au css3
34/34
Merci pour votre attention
Top Related