présentation au css3

7/28/2019 prsentation au css3

1/34

CSS3

1


2/34

Plan

Introduction Les Bordures

Effets du texte

Transformations 2D Transformations 3D

Transition

Animations Interface Utilisateur

Exemples


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


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


5/34

Bordures

06/06/2013 5


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/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


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


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.


10/34


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


11/34


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


12/34


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.


13/34

Effets du texte

06/06/2013 13


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.


15/34

Transformations 2D

06/06/2013 15


16/34

Transformations 2D

On peut utiliser 5 proprits pour Transform :

translate()

rotate()

scale()

skew()

matrix()

06/06/2013 16


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


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


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


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


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


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.


23/34

Transformations 3D

06/06/2013 23


24/34

Transformations 3D

06/06/2013

24


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.


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.htm


27/34

Animations

06/06/2013 27


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


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.htm


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


31/34


06/06/2013 31


32/34


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.htm


33/34

Exemples de ce quonpeut faire avec css3


34/34

Merci pour votre attention

Documents

présentation au css3