1.
Kiwiparty ! Raphael Goetter alsacreations.fr alsacreations.com goetter.fr

2.
HTML5, CSS3 : lalbum de lamaturitéIE6, souvenez-vous...Tableaux → Float → etmaintenant ? Raphaël Goetter - #kiwiparty 2010-04-16

3.
CSS3 cest pas pour demain ! L « Working Draft » (2012 ?) L IE8 reconnaît à peine CSS2Alors pourquoi tout cebuzz ramdame ?! Raphaël Goetter - #kiwiparty 2010-04-16

4.
Quatre générations ?Imaginez le monde à lépoque devotre arrière arrière grand-père !→ prise en charge graduelle (yahoo, google, amazon, youtube,...) Raphaël Goetter - #kiwiparty 2010-04-16

5.
CSS3Qui est prêt aujourdhui ?

6.
Raphaël Goetter - #kiwiparty 2010-04-16

7.
CSS3 Un avant-goût de laprès IE8...➔ Propriétés CSS3 (border-radius, box-shadow, text-shadow, border-image, columns, font-face,...)➔ Sélecteurs CSS3 (:last-child, :nth-child, :target, :not, :empty, ...)➔ Préfixes propriétaires (-moz-, -webkit-, -o-, -ms-,...)➔ Media Queries (ex: @media screen and (max-width: 480px))➔ CSS transitions, transformations (durée, accélération, scale, rotate, skew,...) Raphaël Goetter - #kiwiparty 2010-04-16

8.
Ressources➔ css3please.com générateur instantané et multi-navigateurs (IE compris) d’effets CSS3➔ fetchak.com/ie-css3/ support de border-radius, box-shadow et text-shadow pour IE via .htc➔ fontsquirrel.com/fontface/generator générateur de polices pour font-face multi-navigateurs➔ findmebyip.com/litmus reconnaissance des CSS3 par navigateurs➔ ie7nomore.com mon « bac à sable » personnel pour tester HTML5, CSS2.1 et CSS3 Raphaël Goetter - #kiwiparty 2010-04-16

9.
Jouons un peu avec CSS3 1- le but du jeu Raphaël Goetter - #kiwiparty 2010-04-16

10.
Jouons un peu avec CSS3 2- le code HTML<div id="gallery"> <img alt="..." src="illust1.jpg" /> <img alt="..." src="illust2.jpg" /> <img alt="..." src="illust3.jpg" /></div> Raphaël Goetter - #kiwiparty 2010-04-16

11.
Jouons un peu avec CSS3 3- l’opacitéCSS3 → opacityimg { opacity: 0.8; /* Opacité pour Webkit, Firefox et standard */ filter: alpha(opacity=80); /* Opacité pour IE5-IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Opacitépour IE8 */} Raphaël Goetter - #kiwiparty 2010-04-16

12.
Jouons un peu avec CSS3 4- les ombragesCSS3 → box-shadowimg { /* Ombrages pour Webkit, Firefox et standard */ -webkit-box-shadow: 1px 1px 12px #555; -moz-box-shadow: 1px 1px 12px #555; box-shadow: 1px 1px 12px #555;} Raphaël Goetter - #kiwiparty 2010-04-16

13.
Jouons un peu avec CSS3 5- les rotationsCSS3 → transformimg { /* Rotation pour Webkit, Firefox et standard */ -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg);} Raphaël Goetter - #kiwiparty 2010-04-16

14.
Jouons un peu avec CSS3 6- les arrondisCSS3 → border-radiusimg { /* Arrondis pour Webkit, Firefox et standard */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} Raphaël Goetter - #kiwiparty 2010-04-16

15.
Jouons un peu avec CSS3 7- transitionsCSS3 → transitionimg { /* Transitions pour Webkit, Firefox et standard */ -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;} Raphaël Goetter - #kiwiparty 2010-04-16

16.
Jouons un peu avec CSS3 8- au survolCSS2 → img:hoverimg:hover { z-index: 100; opacity: 1; filter: alpha(opacity=100); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); cursor: help;} Raphaël Goetter - #kiwiparty 2010-04-16

17.
Jouons un peu avec CSS3 9- et Internet Explorer ?script → ie-css3.htcimg { /* et pour Internet Explorer */ behavior: url(scripts/ie-css3.htc);}http://fetchak.com/ie-css3/ : simule border-radius, box-shadow et text-shadow

18.
Jouons un peu avec CSS3démo →ie7nomore.com/fun/kiwislides →alsacreations.com/kiwiparty2010 Raphaël Goetter - #kiwiparty 2010-04-16

19.
Formations Alsacréations formations.alsacreations.fr➔ (X)HTML et CSS Tous niveaux jusquà expert➔ Accessibilité Web Initiation à laccessibilité et aux directives WCAG et RGAA➔ jQuery Sélecteurs et attributs, modification du DOM, effets, événements, Ajax et plugins.➔ Flash Découverte de Flash, des outils de la palette, ActionScript et techniques danimation Raphaël Goetter - #kiwiparty 2010-04-16