CSS3

Plan
Introduction Les Bordures Effets du texte Transformations 2D Transformations 3D Transition Animations Interface Utilisateur Exemples

Introduction
Le 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 nouveaux slecteurs, 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 CSS3 est un gnreux enrichissement des feuilles de style qui, en plus dtre profitable lutilisateur, lest au dveloppeur galement !
06/06/2013 3

Bordures
Les bordures, avec le CSS3, atteignent un niveau suprieur offrant la possibilit d'utiliser des dgrads, des coins arrondis, des ombres et des bordures d'images.

06/06/2013

Bordures

06/06/2013

Bordures
Les coins arrondis
div { border:2px solid; border-radius:25px; -webkit-border-radius:25px; /* Safari */ -moz-border-radius:25px; /* firefox */ }

06/06/2013

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

Bordures
Border Image
div {
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

Background Arrire plan

Depuis que les feuilles de style existent, la gestion des images d'arrire-plan est prvue : les clbres proprits backgroundcolor, background-image, background-position,backgroundrepeat et background-attachment naissent avec CSS1, mme si malheureusement leur compatibilit n'est pas encore totale.
Ces proprits connues de tout bon webdesigner permettent de contrler 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.

06/06/2013

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

Background Arrire plan

La Proprit : Background Origin
div { 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

Background Arrire plan

La Proprit :Multiple Backgrounds
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.

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

06/06/2013

12

Effets du texte

06/06/2013

13

Effets du texte
Text Shadow : La proprit Text-shadow permet de mettre en
place un effet dombre port

h1 {
text-shadow: 5px 5px 5px #FF0000; } Text Word Wrapping p {word-wrap:break-word;}
forcer la csure dun mot long laide de la proprit wordwrap, applique au parent et qui aura pour effet de couper le mot un endroit arbitraire afin de provoquer un retour la ligne.

06/06/2013

14

Transformations 2D

06/06/2013

15

Transformations 2D
On peut utiliser 5 proprits pour Transform : translate() rotate() scale() skew() matrix()

06/06/2013

16

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

Transformations 2D
Rotate (degree) : faire une rotation dun lment
div { transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

06/06/2013

18

Transformations 2D
Scale (x-axis, y-axis): changer la taille dun lment
div { 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

Transformations 2D
Skew (x-axis-degree, y-axis-degree): tourner un lment avec 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

Transformations 2D
Matrix (n, n, n, n, n, n):elle combine tous les autres mthodes
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

Transformations 3D
cest des proprits CSS qui permettent de transformer un lment HTML en 3 dimensions. Ces proprits ont donner naissance diverses expriences encore inimaginable avec ce langage il y a quelques annes.

06/06/2013

22

Transformations 3D

06/06/2013

23

Transformations 3D

06/06/2013

24

Transition
Les transitions CSS3 permettent dviter lutilisation du Flash ou de 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.

06/06/2013

25

Transition
Spcifier la proprit css sur laquelle on veut appliquer la Transition et la dure de lanimation
Example :
div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }

EXAMPLE

06/06/2013

26

Animations

06/06/2013

27

@keyframes

Animations
@keyframes myfirst Ils permettent de dfinir une liste de proprits CSS appliquer en { fonction dune dure donne 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

Les proprits dAnimation

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; }
06/06/2013

EXAMPLE DANIMATION

29

Interface Utilisateur
CSS3 apporte quelques grandes proprits nouvelles relatives des lments de redimensionnement, curseurs, soulignant, mise en bote et plus encore

06/06/2013

30

Interface Utilisateur

06/06/2013

31

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

EXAMPLE USER INTERFACE

06/06/2013 32

Exemples de ce quont peut faire avec css3

Merci pour votre attention