SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à Jouons un peu avec CSS3 (Kiwiparty avril 2010)

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 

Similaire à Jouons un peu avec CSS3 (Kiwiparty avril 2010) (20)

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Sass, Compass & Blueprint, ou les CSS à la cool
Sass, Compass & Blueprint, ou les CSS à la coolSass, Compass & Blueprint, ou les CSS à la cool
Sass, Compass & Blueprint, ou les CSS à la cool
 

Plus de Raphaël Goetter

Plus de Raphaël Goetter (10)

Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 

Jouons un peu avec CSS3 (Kiwiparty avril 2010)

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