SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
0 likes
Be the first to like this
Views
Total views
3,508
On SlideShare
0
From Embeds
0
Number of Embeds
69
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
You also get free access to Scribd!
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.