Upload
raphael-goetter
View
2.199
Download
2
Embed Size (px)
DESCRIPTION
Avant-goût des propriétés décoratives de CSS3 lors de la Kiwi Party d'Alsacréations en avril 2010
Citation preview
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