Jouons un peu avec CSS3 (Kiwiparty avril 2010)

3,147 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,147
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×