Successfully reported this slideshow.

Jouons un peu avec CSS3 (Kiwiparty avril 2010)

0

Share

Upcoming SlideShare
Futur du-positionnement-css
Futur du-positionnement-css
Loading in …3
×
1 of 19
1 of 19

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Jouons un peu avec CSS3 (Kiwiparty avril 2010)

  1. 1. Kiwiparty ! Raphael Goetter alsacreations.fr alsacreations.com goetter.fr
  2. 2. HTML5, CSS3 : l'album de la maturité IE6, souvenez-vous... Tableaux → Float → et maintenant ? Raphaël Goetter - #kiwiparty 2010-04-16
  3. 3. 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
  4. 4. 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
  5. 5. CSS3 Qui est prêt aujourd'hui ?
  6. 6. Raphaël Goetter - #kiwiparty 2010-04-16
  7. 7. 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
  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 → 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 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
  17. 17. 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
  18. 18. Jouons un peu avec CSS3 démo → ie7nomore.com/fun/kiwi slides → 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 à 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

×