Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jouons un peu avec CSS3 (Kiwiparty avril 2010)

3,290 views

Published on

Avant-goût des propriétés décoratives de CSS3 lors de la Kiwi Party d'Alsacréations en avril 2010

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jouons un peu avec CSS3 (Kiwiparty avril 2010)

  1. 1. Kiwiparty ! Raphael Goetter alsacreations.fr alsacreations.com goetter.fr
  2. 2. HTML5, CSS3 : lalbum de lamaturitéIE6, souvenez-vous...Tableaux → Float → etmaintenant ? Raphaël Goetter - #kiwiparty 2010-04-16
  3. 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. 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. 5. CSS3Qui est prêt aujourdhui ?
  6. 6. Raphaël Goetter - #kiwiparty 2010-04-16
  7. 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. 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. 9. Jouons un peu avec CSS3 1- le but du jeu Raphaël Goetter - #kiwiparty 2010-04-16
  10. 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. 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. 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. 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. 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. 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. 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. 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. 18. Jouons un peu avec CSS3démo →ie7nomore.com/fun/kiwislides →alsacreations.com/kiwiparty2010 Raphaël Goetter - #kiwiparty 2010-04-16
  19. 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

×