mémento css3 (french edition) - livre gratuitlivre.fun › livref › f6 › f006082.pdf ·...

GénéralitésCSS3estuneévolutiondeslangagesCSS1etCSS2présentéesousformed’unetrentainedemodulesdistincts,dontunepartieestencoreàl’étatdebrouillon.

CompatibilitéaveclesnavigateursParmilacentainedepropriétésetlesdizainesdesélecteursnouveaux,unemajorité est déjà reconnue par les dernières versions des navigateursFirefox,Opera,Chrome,Safari,InternetExploreretEdge.

ÀSAVOIRPriseenchargedeCSS(toutesversions)parlesnavigateursactuels:–IE8reconnaîtenviron15%desspécificationsCSS;–IE11reconnaîtenviron53%desspécificationsCSS;–Edgereconnaîtenviron62%desspécificationsCSS;–ChromeetOperareconnaissentenviron77%desspécificationsCSS;

–Safarireconnaîtenviron80%desspécificationsCSS;–Firefoxreconnaîtenviron81%desspécificationsCSS.

PréfixespropriétairesLeW3CproposedepuisCSS2.1unealternativequialeméritedenepasbloquer l’évolution des agents utilisateurs : à partir des informationsdispenséesdanslesspécifications,chaquenavigateuracarteblanchepourconstruiresespropriétéspersonnellesdérivéesenlesfaisantprécéderd’unpréfixe vendeur propriétaire. Lorsque la spécification atteint le stade deRecommendation Candidate (CR), le préfixe doit être supprimé. Celaconcerne:lespropriétésencorenonfinalisées(ex.:-moz-animation,-webkit-regions);les éléments propriétaires (ex. : -ms-filter, -ms-zoom, -webkit-mask).

LISTEDESPRÉFIXES

-moz- MoteurderenduGeckodeMozillaFirefoxouThunderbird

-ms- MicrosoftInternetExplorer

-webkit- MoteursWebKit(ex.:SafarietChrome)

Syntaxedespseudo-élémentsDepuisCSS3,uneconventiond’écritureproposéepar leW3Cdistingueles pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant àl’aidedesdoublesdeux-points(::),mais ilsrestentrétrocompatiblesavecl’écritureCSS2.:first-line[CSS2]devient::first-line[CSS3]:first-letter[CSS2]devient::first-letter[CSS3]:after[CSS2]devient::after[CSS3]:before[CSS2]devient::before[CSS3]

Unitésdevaleur

DÉFINITIONLeviewportreprésentelapartievisibleauseindelafenêtredunavigateur.

rem:commeem,maisuniquementrelatifàlaracine(<html>)vw:pourcentagedelargeurduviewport(leviewportestégalà100vw)vh:pourcentagedehauteurduviewport(leviewportestégalà100vh)vmax:hauteuroulargeurduviewport(lavaleurlaplusgrandeselonl'orientation)vmin:hauteuroulargeurduviewport(lavaleurlapluspetiteselonl'orientation)fr:fractiondel’espacerestant(ex.:GridLayout)minmax() : valeur comprise entre une borne minimale et une bornemaximaledeg,rad,s,ms:degré,radian,seconde,milliseconde

Fonctionsdecalculcalc()introduitlesfonctionsdecalculauseind’unevaleur.ex.:div{width:calc(100%-20px)}

COMPATIBILITÉCes fonctions ne sont actuellement prises en charge que par lesnavigateursrécents(àpartird’InternetExplorer9,parexemple).

Sélecteurs:lang:cibleunélémentselonsalangueoucelledudocument:last-child:dernierenfantd’unélément:nth-child():nièmeenfantd’unélément:nth-last-child():nièmeenfantencommençantparlafin:first-of-type:1erenfantdutypedésigné:nth-of-type():nièmedutypedésigné:last-of-type:dernierdutypedésigné:nth-last-of-type():nièmeenfantd’untypeencommençantparlafin:only-child:enfantunique:only-of-type:élémentuniquedutypedésigné:empty:élémentsansenfants:target:cibled’uneancreex.:<ahref="#cible">...<h1id="cible">:not():négationd’unsélecteur.ex. : p:not(.bloc) désigne tous les paragraphes, sauf les éléments declassebloc.

SélecteuradjacentgénéralE~ F cible tous les frères (F) suivant, directement ou non, un élémentdésigné (E). ex. : blockquote ~ p {font-style: italic;} cible tous lesparagraphesquisuiventunblocdecitation.

Sélecteursd’attributsattr^="kiwi"]:sélectionsil’attributattrdébuteparlachaîne«kiwi»attr$="kiwi"]:sil’attributfinitparlachaîne«kiwi»attr*="kiwi"]:sil’attributcontientlasous-chaîne«kiwi»auseindelachaînecontenantlavaleurattr~="kiwi"] : si l’attributcontientexactement«kiwi»auseind'unelistedevaleursséparéespardesespacesattr|="kiwi"] : si l’attribut débute par « kiwi » au sein d'une liste devaleursséparéespardestraitsd’union

COMPATIBILITÉSélecteursCSS3Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.2+ 10.5+ 9.0+

Exception : les sélecteurs d’attributs sont compatibles depuis InternetExplorer7.

Sélecteursdeformulaires:enabled:élémentactif;:disabled:élémentinactif;:checked:élémentcoché;:required:élémentrequispourlasoumission;:optional:élémentoptionnellorsdelasoumission;:valid:élémentquiremplitlesexigencesdesontype;:invalid : élément qui ne remplit pas (encore) les exigences de sontype;:in-range:valeurdanslepérimètreounon;:out-of-range:valeurhorsdupérimètreounon.

COMPATIBILITÉSélecteursdeformulairesFirefox Chrome Safari Opera IE

4.0+ 10+ 5.0+ 10.5+ 10.0+9+pour:checked

@supports@supports permet de détecter quelles sont les fonctionnalités CSSsupportéesparlenavigateur.Exemple:@supports(display:grid){

.container{

display:grid;

@supportsnot(display:grid){.container{

display:flex;

COMPATIBILITÉFirefox Chrome Safari Opera Edge

22+ 28+ 9+ 12+ Toutesversions

MediaQueriesGrâce aux « requêtes demédias » CSS, il devient possible de limiter laportéedesstylesàunenvironnementdéfini.Voiciquelquescritèresusuels:width,height:dimensions(largeur,hauteur)delazoned’affichage;device-width,device-height:dimensionsdupériphérique;orientation:orientationdupériphérique(portaitoupaysage);resolution:résolutiondupériphérique(endpi,dpcmetdppx);color:priseenchargedelacouleur(enbits/pixels);aspect-ratio:ratiodupériphériquedesortie(ex.:16/9);

Exemple:@media(max-width:480px){body{background:green;}}La couleur de <body> devient verte lorsque la largeur de fenêtre estinférieureouégaleà480pixels.

COMPATIBILITÉFirefox Chrome Safari Opera MSIExplorer

3.5+ 9.0+ 4.0+ 10.5+ 9.0+

Propriétésdeboîtesetcontenu

box-sizing:content-boxborder-boxinherit

p{box-sizing:content-box;}

Lescomposantesdepadding etborder sont incluses à l’intérieur de laboîte.Ellesnes’ajoutentplusàlalargeurgénéraledel’élément;lalargeurtotaledel’élémentcorrespondparconséquentàwidth.

COMPATIBILITÉFirefox Chrome Safari Opera IE

3.0+ 9+ 3.1+ 10.5+ 8.0+

word-wrap:normalbreak-word #aside{word-wrap:break-word;}

Césured’unmotlongàunendroitarbitraire,afindeprovoquerunretouràlaligne.

3.5+ 9.0+ 3.1+ 10.5+ 6.0+

text-overflow:clipellipsischaîne

#intro{text-overflow:ellipsis;}

Ajoutd’unsignepourindiquerquelecontenud’unélémentestrogné.ex.:Lavaleurellipsisafficheradespointsdesuspension(…)àl’endroitoùleterme est masqué. La déclaration overflow: hidden est nécessaire pourappliquertext-overflow.

5.0+ 9.0+ 3.1+ 10.5+ 6.0+

overflow-x:overflow-y:

visiblehiddenscrollautono-displayno-content

p{overflow-x:auto;overflow-y:hidden;}

VariantesspécifiquesdelapropriétéCSS2overflow,quiagissentsurunseulaxeàlafois:overflow-xgèrelesdébordementshorizontauxetoverflow-ylesdépassementsverticaux.

3.0+ 9.0+ 3.1+ 10.5+ 6.0+

overflow-style:autoscrollbarpannermovemarquee

#advert{overflow-style:marquee;}

Découvrir les différentes possibilités de débordement de contenu : scroll,défilementautomatique(marquee)oudéplacementmanuel(move).

non non non non non

appearance:normaliconwindowbuttonmenufield

div{appearance:button;}

Donner un rendu d’élément au sein de l'interface utilisateur standard dunavigateur.

1+ 1+ 3.0+ 24+ non

resize:nonebothhorizontalvertical

textarea{resize:vertical;}

Définirsil’élémentdoitêtreredimensionnableounonparl’utilisateur.

4+ 9+ 4.0+ 12.1+ non

font-smoothing:

nonesubpixel-antialiasedantialiased

body{font-smoothing:antialiased;}

Adoucirleseffetsdecrénelagedescaractèresdetexte.

non 10Mac 5.0+Mac non non

font-stretch:widernarrowerultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expandedinherit

h1{font-stretch:expanded;}

Étireroucondenserunefamilledepolices.

9+ non non non 9.0+

text-stroke:text-fill-colortext-stroke-colortext-stroke-width

#stroke{text-fill-color:#fff;text-stroke-color:lightblue;text-stroke-width:2px;}

Définiruncontourautourdechaquelettred’untexte.

non 9.0+ 3.1+ 24+ non

text-align-last:auto(valeurinitiale)startendleftrightcenterjustifyinherit

p{text-align:justify;text-align-last:center;}

Spécifier l’alignementdescontenusdeladernièrelignedetexte,ouavantunsautdeligneforcé.Écraselavaleurglobaledetext-align.

12+ 25+ 7+ non 6

white-space:normalprenowrappre-wrappre-line

div{white-space:pre;}

Traiterlesespacesblancsentrelesmotsouleséléments.

3.5+ 3+ 3+ 9+ 8+

hyphens:nonemanual(valeurinitiale)auto

p{hyphens:auto;/*césureautorisée*/}

Communiqueraunavigateurlaméthodeàutiliserpourappliquerlacésuredesmots.Lavaleurautoconfèreaunavigateur lapossibilitédecouper lesmotsselonlesrèglestypographiquesdelalanguedudocument.

6+ non 5.1+ non 10+

Propriétésdécoratives@font-faceAfficherunepoliceexotiqueembarquéesurleserveur.

NOTELesdifférentsformatsdepolicesactuelssont:

.ttf:TrueTypeFont;

.otf:OpenTypeFont;

.eot:EmbeddedOpenType(propriétaireMicrosoft);

.woff,.woff2:WebOpenFontFormat.

Exemple:@font-face{

font-family:“Kiwi”;src:url(‘Kiwi-Regular.ttf’)format(“truetype”),url(‘Kiwi-Regular.woff’)format(“woff”);

3.5+ 9.0+ 3.2+ 10.5+ 6.0+

Formats@font-facereconnusFirefox Chrome Safari Opera IE9+ IE6,IE7,IE8

.eot .eot

.ttf .ttf .ttf .ttf .ttf

.otf .otf .otf .otf

.woff .woff .woff .woff .woff

.woff2 .woff2 .woff2 .woff2

ValeursRGBaetHSLaRGBaetHSLanesontpasdespropriétés,maisdesvaleursquiajoutentdelatransparence ou semi-transparence à une couleur définie pour les propriétéscolor,background-color,border-color,box-shadowettext-shadow.ex. : border-color: rgba(0,255,0,0.8) indique une bordure de couleur verte,opaqueà80%.

3.0+ 1.0+ 3.0+ 10.5+ 9.0+

opacity:valeurentre0et1inherit #nava{opacity:0.6;}

Agirsurl’opacitéd’unélément,c’est-à-diresondegrédetransparence.0rendl’élément (et ses descendants) entièrement invisible, tandis qu’avec la valeurpardéfautde1,ilesttotalementopaque.

3.0+ 9.0+ 3.1+ 10.5+ 9.0+

border-radius:

longueur(éventuellementparpaires:longueur1/longueur2)pourcentage

.bloc{border-radius:15px01em50%;}/*arrondide15pxenhautàgauche,dezéroenhautàdroite,puisdanslesensdesaiguillesd’unemontre*/

3.0+ 9.0+ 3.1+ 10.5+ 9.0+

border-image:largeurdelabordurecheminversl’imagevaleurdechacundestraitsdecouperound/stretch/repeat/space

.border{border-width:7px7px16px7px;border-image:url(block.png)77167stretch;}

Afficher une image entre les bordures d’un élément et jouer sur différentsaspectsde l’image telsque l’étirementou la répétition.round (répétition) etstretch (étirement) indiquent lemodededistributiondesparties latéralesdel’image.border-image: est la propriété raccourcie dont sont dérivées les propriétéssuivantes:border-image-source::URLdel’image;border-image-slice::valeursdestraitsdecoupe;border-image-width::largeurdelabordure;border-image-outset::décalagedel’imageparrapportàlabordure;border-image-repeat::typederépétitiondel’image.

3.5+ 9.0+ 3.1+ 10.5+ 11+

outline-offset:nombreinherit

pre{outline:solid1pxorange;outline-offset:5px;}

Définir l’espacement entre un contour (outline) et le côté ou la bordure(border)d’unélément.Uncontourestunelignedessinéeautourdeséléments,endehorsdelabordure.

3.5+ 9.0+ 4.0+ 10.5+ non

box-shadow:décalagehorizontalàdroitedécalageverticalenbasfondu(taille)couleur(inset/outset)

img{box-shadow:8px8px10px#aaa;}/*8pxàdroiteetenbas,10pxdediffusionetcouleur#aaa*/

Ajouter une ombre portée sur n’importe quel élément HTML. La valeuroptionnelleinsetdiffusel’ombreàl’intérieurdelaboîte.

3.5+ 9.0+ 3.1+ 10.5+ 9.0+

text-shadow:décalagehorizontalàdroitedécalageverticalenbasfonducouleur

h1{text-shadow:2px2px4px#999;}

Créeruneombreportéesousuntextedecontenu.

3.5+ 9.0+ 3.1+ 10.5+ 10.0+

Arrière-plansImagesmultiplesCSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur unmêmeélément,encumulant lesvaleursauseindespropriétésbackground-image, background-position et background-repeat, ces valeurs étantsimplementséparéesparunevirgule.Exemple:div{

background:url(“first.jpg”)lefttopno-repeat,url(“second.jpg”)rightbottomno-repeat;}

3.6+ 9.0+ 3.1+ 10.5+ 9.0+

background-position:Ilestpossibledepréciser4valeursdeposition,àl’aided’unnombreassociéauxmots-cléstop,right,bottometleft.Exemple:background-position:left3pxbottom10%(à3pxdelagaucheetà10%dubas)

13+ 27+ 7+ 12 9.0+

DégradélinéaireLa valeur linear-gradient de la propriété background-image permet degénérerdesarrière-plansdecouleurdégradée,d’unecouleuràl’autreouviaplusieurscouleursintermédiaires(dites«color-stops»).

background-image:

orientationdudégradé:totop/toright/tobottom/toleftouanglecouleurs(positiondescouleursstopenpourcentage)

.button { background-image: linear-gradient(toright,#D3DAE9,#576E94);}

3.6+ 9.0+ 4.0+ 11.1+ 10.0+

DégradéradialLa valeur radial-gradient de la propriété background-image permet degénérerdesarrière-plansdansundégradédecouleursradial,d’unecouleuràl’autreouviaplusieurscouleursintermédiaires(color-stops).

background-image:

orientationdudégradé:forme(ellipse,circle)etpointdedépart(attop,atright,atbottom,atleft,atcenter)ouangle(positiondescouleursstopenpourcentage)

div {background-image: radial-gradient(circleatcenter,blue,orange25%)

3.6+ 10.0+ 5.1+ 11.1+ 10.0+

Dimensions,limitesetorigine

background-size:longueurpourcentagecovercontain

div{background:url(background.jpg)lefttopno-repeat;background-size:80%80%;}

Spécifierlesdimensionsdesimagesd’arrière-plandanslebutdelesadapteràcelles de l’élément sur lequel elles sont appliquées. cover (optionnelle)redimensionnel’imageàlatailleminimalepouvantêtrecontenue,etcontainàlataillemaximale.

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

background-clip:padding-boxborder-boxcontent-box

p{background-clip:content-box;}

Spécifierleslimitesderendudufondd’unélément.

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

background-origin:

padding-boxborder-boxcontent-box

p{background-origin:padding-box;}

Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan).

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

PropriétésdepositionnementMulticolonnageCSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, àl’instar des journaux papier, via la propriété raccourcie column et sespropriétésdérivées:column-count::nombredecolonnes;column-gap::espaceentrelescolonnes;column-width::largeurdescolonnes;column-span::répartitiond’unélémentsurplusieurscolonnes;column-rule::traitdeséparationentrelescolonnes;break-before::sautdecolonneavantl’élément;break-after::sautdecolonneaprèsl’élément;break-inside::sautdecolonneauseindel’élément.

Exemple:.chapo{

column-count:2;column-gap:10px;column-rule:1pxsolid#ccc;

3+ 9+ 3.1+ 10.5+ 10.0+

FlexibleBoxModelLemodèledeboîteflexibleajouteaumodèledeboîteclassiquedenouvellesfonctionnalités, parmi lesquelles les possibilités d’alterner entre unedistribution horizontale ou verticale des éléments, de disposer de largeursfluides dans les deux sens et, surtout, de pouvoir définir l’ordre exact del'affichagedesboîtesàl’écran.Propriétés:display:flex:attributiondumodèleflexible(autrevaleur:inline-flex);flex-direction: : sens d’affichage (valeurs : column, column-reverse,row,row-reverse);order::ordred’affichage(pondération);justify-content: : alignement dans l’axe principal (valeurs : flex-start,flex-end,center,space-between,space-around);align-items::alignementdansl’axesecondaire(valeurs:flex-start,flex-end,center,baseline,stretch).

Exemple:#main{

display:flex;flex-direction:column-reverse;/*distributionencolonneinversée*/

NOTE Les spécifications sur Flexible Box Model ont été radicalementmodifiées en mars 2012. Un certain nombre de propriétés ont étérenommées et leurs fonctions précisées. Nous adoptons ici les dernièresconventionsdenommage.

3.5+ 10.0+ 3.2+ 24+ 10.0+

GridLayoutModuleCSS3introduitdenouvellespropriétésparmilesschémasdepositionnement(grid-columns: et grid-rows:), conjointement avec la nouvelle unité demesure"fr":display:grid(ouinline-grid):créeunconteneurdegrille;grid-template-columns:définitlenombredecolonnesetleurtaille;grid-template-rows:définitlenombrederangéesetleurtaille;grid-template-areas:créedeszonesnommées;grid-column, grid-row, grid-area : positionnent un élément dans lagrille;justify-content, justify-items, justify-self, align-content, align-items,align-self:modifientl'alignementdescellulesoudeséléments;grid-gap:génèreunespace(gouttière)entrelescellules;grid-auto-flow:modifiel'ordredeplacementautomatiquedeséléments.

Exempledeconstructionde2colonneset3rangées:body{

display:grid;grid-template-columns:150px1fr;grid-template-rows:50px1fr50px;

}Lesélémentssontensuitedisposésdanslagrilleàl’aidedespropriétésgrid-columnetgrid-row:#item{grid-column:2;grid-row:14;}/*s’étendsurtoutelahauteurdes4lignes*/#item2,#item3{grid-column:1;grid-row:2;}

52+ 55+ 10.1+ 44+ 10.0+

ExclusionsetshapesSurfacesdéfiniesdanslesquelleslecontenupeut(ounon)s’écouler.Exemple:#exclusion{shape-outside:polygon();}/*lecontenus’écouleautourdelaforme*/

#rond{shape-inside:circle();}/*lecontenus’écoulecirculairement*/

non 37+ 7.1+ 24+ non

TransformationsTransform

transform:rotate()rotationdel’élémentscale(),scaleX(),scaleY()zoom(agrandissementouréduction)translate(),translateX(),translateY()translationselonl’axeXet/ouYskewX(),skewY()déformationdel’élémentmatrix()matricemathématique

Exemple:a:hover,a:focus{

transform:scale(2)rotate(15deg)translate(5px,10px);}

3.5+ 10.0+ 3.2+ 10.6+ 9.0+

Transform3DPropriétés:transform-origintransform-styleperspectiveperspective-originbackface-visibility

Exemple:div{transform-style:preserve-3d;transform:rotateY(10deg)}

10+ 12.0+ 4.0+ non 10.0+

Transitions

transition:estlapropriétéraccourciedontsontdérivéeslespropriétéssuivantes:transition-property::propriété(s)àanimer;transition-duration::duréedelatransition(ensoums);transition-delay::délaiavantdedémarrer(ensoums);transition-timing-function: : accélération de la transition. Valeurs :linear (linéaire), ease/ease-out (rapide puis lent), ease-in (lent puisrapide),ease-in-out(lent-rapide-lent),cubic-bezier().

Les propriétés concernées par les transitions sont toutes celles quipeuvent être définies par une valeur numérique : width, height,min/max-width,min/max-height,position,margin,padding,maisaussibackground,opacity, font-weight, text-shadow, color, line-height,vertical-align,letter-spacing,visibility,z-index,etc.

Exemple:#nava{transition:all0.5sease-in;}

4.0+ 10.0+ 3.2+ 10.6+ 10.0+

Animationsanimation: est la propriété raccourcie dont sont dérivées les propriétéssuivantes:animation-name:nomdel’animation;animation-duration:duréetotale;animation-delay:attenteavantledébutdel’animation;animation-iteration-count:nombred’itérations;animation-timing-function:accélération(voirTransitions);animation-direction:sensdel’animation(normaloualternate);animation-play-state:encoursouenpause(runningoupaused);animation-fill-mode : propriétés conservées par l’élément à la fin del’animation.

Exemple:@keyframesdisparition{0%{opacity:1;}/*opacitécomplète*/50%{opacity:0;}/*opaciténulleàlamoitiédel’animation*/100%{opacity:1;}/*retouràl’étatinitial*/}img{animation:disparition2sinfinite;}

5.0+ 10.0+ 4.0+ 12+ 10+

Chezlemêmeéditeur…MémentoHTML5,2eéd.R.RIMELÉMémentoPHP7etSQL,C.PIERREDEGEYER,G.PONÇONCSSavancées:VersHTML5etCSS3.2eéd.R.GOETTERCSS3:Pratiquedudesignweb.R.GOETTER,H.GIRAUDELCSS3pourleswebdesigners.D.CEDERHOLMHTML5pourleswebdesigners.J.KEITHMémentoMySQL5,4eéd.R.RIMELÉMémentojQuery,3eéd.É.SARRION

Codeéditeur:G67432ISBN:978-2-212-67432-3

Attention:pourlirelesexemplesdelignesdecode,réduisezlapolicedevotresupportaumaximum.

PoursuivretouteslesnouveautésnumériquesduGroupeEyrolles,retrouvez-noussurTwitteretFacebook

@ebookEyrolles

EbooksEyrolles

Etretrouveztouteslesnouveautéspapiersur

@Eyrolles

Eyrolles

mémento css3 (french edition) - livre gratuitlivre.fun › livref › f6 › f006082.pdf ·...

Documents

html5 & css3

css3 속성 - kangwoncs.kangwon.ac.kr › ~whcho ›...

presentation html5 css3 by thibaut

html5 css3 mait standard app web-[www.worldmediafiles.com]

css et css3

html5 et css3 chap 01 avant-propos€¦ · html5 et css3...

rmll2010 html5 css3

premiers pas en css3 et html5

css3 pour les web designer

formation html5 css3 offerte par ippon 2014

responsive web design avec html5 et css3

visa cahier3 f6

html5 and css3

formation html3 css3

jouons un peu avec css3 (kiwiparty avril 2010)

le programmeur java 1 - livre...

pratique de mysql et php - livre...

سرهفلا - مكتبة تحميل الكتب...

et html5 css3

javascript animée avec css3 et créer une...