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

HTML5, CSS3 : l'album de la
maturité
IE6, souvenez-vous...
Tableaux → Float → et
maintenant ?
Raphaël Goetter - #kiwiparty 2010-04-16

CSS3
c'est pas
pour demain !
L « Working Draft » (2012 ?)
L IE8 reconnaît à peine CSS2
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,...)
Raphaël Goetter - #kiwiparty 2010-04-16

CSS3
Qui est prêt aujourd'hui ?

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

CSS3
Un 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.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

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

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

Jouons un peu avec CSS3
3- l’opacité
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 */
} Raphaël Goetter - #kiwiparty 2010-04-16

Jouons un peu avec CSS3
4- les ombrages
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;
} Raphaël Goetter - #kiwiparty 2010-04-16

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

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

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

Jouons un peu avec CSS3
8- au survol
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;
}
Raphaël Goetter - #kiwiparty 2010-04-16

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

Jouons un peu avec CSS3
démo →
ie7nomore.com/fun/kiwi
slides →
alsacreations.com/kiwiparty2010
Raphaël Goetter - #kiwiparty 2010-04-16

Formations Alsacréations
formations.alsacreations.fr
➔ (X)HTML et CSS
Tous niveaux jusqu'à expert
➔ Accessibilité Web
Initiation à l'accessibilité 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 d'animation
Raphaël Goetter - #kiwiparty 2010-04-16