Kiwiparty !

Raphael Goetteralsacreations.fr

alsacreations.comgoetter.fr

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

HTML5, CSS3 : l'album de la maturité

IE6, souvenez-vous...

Tableaux Float et → →maintenant ?

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

CSS3c'est paspour demain !

« Working Draft » (2012 ?)LIE8 reconnaît à peine CSS2L

Alors pourquoi tout ce buzz ramdame ?!

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

Quatre générations ?Imaginez le monde à l'époque de votre arrière arrière grand-père !

→ prise en charge graduelle (yahoo, google, amazon, youtube,...)

CSS3Qui est prêt aujourd'hui ?

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

CSS3Un avant-goût de l'aprè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

Ressources

➔ css3please.comgé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/generatorgénérateur de polices pour font-face multi-navigateurs

➔ findmebyip.com/litmusreconnaissance des CSS3 par navigateurs

➔ ie7nomore.common « bac à sable » personnel pour tester HTML5, CSS2.1 et CSS3

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

Jouons un peu avec CSS31- le but du jeu

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

Jouons un peu avec CSS32- 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

Jouons un peu avec CSS3

CSS3 → opacity

img {

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

}

3- l’opacité

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

Jouons un peu avec CSS3

CSS3 → box-shadow

img {

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

}

4- les ombrages

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

Jouons un peu avec CSS3

CSS3 → transform

img {

/* Rotation pour Webkit, Firefox et standard */

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

transform: rotate(-8deg);

}

5- les rotations

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

Jouons un peu avec CSS3

CSS3 → border-radius

img {

/* Arrondis pour Webkit, Firefox et standard */

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

6- les arrondis

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

Jouons un peu avec CSS3

CSS3 → transition

img {

/* Transitions pour Webkit, Firefox et standard */

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

transition: 0.5s;

}

7- transitions

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

Jouons un peu avec CSS3

CSS2 → img:hover

img:hover { z-index: 100;

opacity: 1; filter: alpha(opacity=100);

-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);

cursor: help;

}

8- au survol

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

Jouons un peu avec CSS3

script → ie-css3.htc

img {

/* et pour Internet Explorer */

behavior: url(scripts/ie-css3.htc);

}

9- et Internet Explorer ?

http://fetchak.com/ie-css3/ : simule border-radius, box-shadow et text-shadow

Jouons un peu avec CSS3

démo →ie7nomore.com/fun/kiwi

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

slides →alsacreations.com/kiwiparty2010

Formations Alsacréations

➔ (X)HTML et CSSTous niveaux jusqu'à expert

➔ Accessibilité WebInitiation à l'accessibilité et aux directives WCAG et RGAA

➔ jQuerySélecteurs et attributs, modification du DOM, effets, événements, Ajax et plugins.

➔ FlashDécouverte de Flash, des outils de la palette, ActionScript et techniques d'animation

formations.alsacreations.fr

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