Jouons un peu avec CSS3 (Kiwiparty avril 2010)

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 ?


CSS3c'est paspour demain !

« Working Draft » (2012 ?)LIE8 reconnaît à peine CSS2L

Alors pourquoi tout ce buzz ramdame ?!


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 ?

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,...)


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


Jouons un peu avec CSS31- le but du jeu


Jouons un peu avec CSS32- le code HTML

<div id="gallery">

<img alt="..." src="illust1.jpg" />



</div>


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é



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



CSS3 → transform

img {

/* Rotation pour Webkit, Firefox et standard */

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

transform: rotate(-8deg);

}

5- les rotations



CSS3 → border-radius

img {

/* Arrondis pour Webkit, Firefox et standard */

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

6- les arrondis



CSS3 → transition

img {

/* Transitions pour Webkit, Firefox et standard */

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

transition: 0.5s;

}

7- transitions



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



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

http://fetchak.com/ie-css3/


démo →ie7nomore.com/fun/kiwi


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


Jouons un peu avec CSS3 (Kiwiparty avril 2010)

Technology

Transcript of Jouons un peu avec CSS3 (Kiwiparty avril 2010)