SlideShare une entreprise Scribd logo
CSS3


http://tinyurl.com/wsf-css3
CSS3 ?
On attend depuis longtemps…


• Commencé en 1999
• Modulaire
• … CSS 2.1 n’est toujours pas terminé
Marre d’attendre ?
      Commençons !
•   Sélecteurs
•   Media Queries
•   Multi-column
•   Backgrounds
•   Borders
•   Box-shadow
•   Colors
•   Text
•   Transformations
•   Transformations + Transitions
•   Animations
Sélecteurs CSS 2.1
• * — Tous les éléments
  * { border: 0; }


• E — Éléments de type E
  p { line-height: 1.5; }


• E F — Éléments F descendants de E
  div a { text-decoration: underline; }


• E > F — Éléments F enfants de E
  div > ul { background: green; }
Sélecteurs CSS 2.1
• E + F — Éléments F directement précédé de E
  section h1 { margin: 1em; }


• E:lang(c) — Éléments E ayant la langue c
  span:lang(en) { font-style: italic; }


• E[foo] — Éléments E ayant l’attribut foo
  a[title] { border: 1px dotted #000; }
Sélecteurs CSS 2.1
• E :first-child — Premier élément de E
  div :first-child { margin: 0; }


• E:link, E:visited — Éléments E dont l’ancre
  n’a pas été visitée / a été visitée
  a:link    { color: blue; }
  a:visited { color: green; }


• E:active, E:hover, E:focus — Éléments E
  pendant des actions utilisateur
  a:active { background-color: yellow; }
Sélecteurs CSS 2.1
• E[foo="bar"] — Éléments E dont l’attribut foo
  vaut exactement bar
  a[href="#top"] { color: pink; }


• E[foo~="bar"] — Éléments E dont l’attribut foo
  contient bar
  div[class~="warning"] { background-color: yellow; }


• E[foo|="bar"] — Éléments E dont l’attribut foo
  commence par bar. Incluant le tiret.
  a[hreflang|="en"] { font-style: italic; }

  Fonctionne pour <a hreflang="en"> et <a hreflang="en-US">
Sélecteurs CSS 2.1

• .foo, E.foo — Éléments ou éléments E dont
  l’attribut class vaut foo
  .warning, div.warning { color: red; }


• #foo, E#foo — Éléments ou éléments E dont
  l’attribut id vaut foo
  #note, div#note { color: blue; }
Sélecteurs CSS3
• E ~ F — Éléments F précédé d’un élément E
  figure ~ figcaption { font-size: 80%; }


• E :not(s) — Éléments excluant le sélecteur s
  div *:not(p) { margin: 0; }


• E:root — Premier élément du document
  div:root { font-size: 100%; }
Sélecteurs CSS3
• E :last-child — Dernier enfant de E
  ul:last-child { margin-bottom: 1em; }


• E:empty — Éléments E vides
  div:empty { display: none; }


• E:target — Élément E cible de l’ancre en cours
  h1:target { text-decoration: underline; }
Sélecteurs CSS3
• E :nth-child(n) — Le      n ième   enfant de E
    div :nth-child(3) { background: red; }
    div :nth-child(3n+1) { background: red; }


• E :nth-last-child(n) — Idem, en comptant de la fin
    div :nth-last-child(3) { background: red; }


•   E:nth-of-type(n) — Le nième élément de type E
    div img:nth-of-type(3) { background: green; }


• E:nth-last-of-type(n) — Idem, en comptant de la fin
    div img:nth-last-of-type(3) { background: green; }
Sélecteurs CSS3
• E :only-child — Le seul enfant de E
  div :only-child { background: blue; }


• E:first-of-type — Le premier élément de type E
  div img:first-of-type { background: red; }


• E:last-of-type — Le dernier élément de type E
  div img:last-of-type { background: green; }


• E:only-of-type — Le seul élément de type E
  div p:only-of-type { background: yellow; }
Sélecteurs CSS3
• E[foo^="bar"] — Éléments E ayant l’attribut foo qui
  commence par bar
  a[class^="number-"] { padding: 0; }


• E[foo$="bar"] — Éléments E ayant l’attribut foo qui
  se termine par bar
  a[class$="ing"] { padding: 1em; }


• E[foo*="bar"] — Éléments E ayant l’attribut foo qui
  contient bar
  a[class*="ost"] { padding: .5em; }
Sélecteurs CSS3

• E:enabled, E:disabled — Éléments E activés /
  désactivés
  input:enabled   { background: #FFF; }
  input:disabled { background: grey; }


• E:checked — Éléments E cochés
  input[type="checkbox"]:checked { background: green; }
Media Queries
<link rel="stylesheet" type="text/css" media="screen" href="css/global.css">



                         •   all
                         •   braille, embossed
                         •   handheld
                         •   print
                         •   projection
                         •   screen
                         •   speech
                         •   tty
                         •   tv
Media Queries
+•   width, height, device-width, device-height
 • orientation
 • aspect-ratio, device-aspect-ratio
 • color, color-index, monochrome
 • resolution
 • (scan, grid)
Media Queries
+     only, not, and

               <link rel="stylesheet" type="text/css"
 media="screen and (min-width: 400px) and (max-width: 700px)"
                       href="css/global.css">




@media screen and (min-width: 400px) and (max-width: 700px) {
	 body {…}
}
Multi-column


p{
	

 column-width: 13em;
	

 column-gap: 1em;
}
Backgrounds
 background-origin




  background-size
Backgrounds
           multiple backgrounds




div {
	 background:
	 	 url(body-top.gif) top left no-repeat,
	 	 url(banner_fresco.jpg) 11px 11px no-repeat,
	 	 url(body-bottom.gif) bottom left no-repeat,
	 	 url(body-middle.gif) left repeat-y;
}
Backgrounds
                          Gradients



background: -moz-linear-gradient(left, #2E2E2E, #454545 10px);
background: -webkit-gradient(linear, 0 0, 10 0, from(#2E2E2E), to
(#454545));
background: linear-gradient(left, #2E2E2E, #454545 10px);
Backgrounds
                          Gradients




background: -moz-linear-gradient(left, #2E2E2E, #454545 10px);
background: -webkit-linear-gradient(left, #2E2E2E, #454545 10px);
background: linear-gradient(left, #2E2E2E, #454545 10px);
Backgrounds
                            Gradients



background:   url(fallback.png);
background:   -moz-linear-gradient(left, #2E2E2E, #454545 10px);
background:   -webkit-linear-gradient(left, #2E2E2E, #454545 10px);
background:   linear-gradient(left, #2E2E2E, #454545 10px);
Borders
border-image




border-radius
Box-shadow



div {
	 box-shadow: -10px -10px 0 0 #000;
}
Colors

• Opacity
• RGBA
• HSL, HSLA
Text
Web fonts (@font-face)




     text-shadow
Transformations

-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
Transformations + Transitions
Animations
Et encore plein d’autres choses !
Ressources


•   CSS3 Previews http://www.css3.info/preview/

•   CSS3 Module Status http://www.css3.info/modules/

•   CSS3 Selectors Test http://tools.css3.info/selectors-test/
Ressources (démos)
•   Super awesome buttons with CSS3 http://www.zurb.com/
    blog_uploads/0000/0617/buttons-03.html

•   An image gallery showcase for CSS transitions http://
    devfiles.myopera.com/articles/1041/image-gallery.html

•   Pure CSS Coke Can http://www.romancortes.com/blog/pure-css-
    coke-can/

•   CSS 3D Meninas http://www.romancortes.com/blog/css-3d-meninas/

•   Sliding Vinyl with CSS3 http://www.zurb.com/playground/sliding-vinyl

•   47 amazing CSS3 animation demos http://
    www.webdesignerwall.com/trends/47-amazing-css3-animation-
    demos/
Contact


 Nicolas Le Gall
me@neovov.com
Publicité

Contenu connexe

En vedette (17)

DOC
Comparison table jan lokpal bill govt lokpal bill and ncpri drafts
DEEPAK YADAV
4 diapositives487 vues
PPTX
The future of hands on learning technologies-no pictures
Susanna Martin
26 diapositives597 vues
PDF
Autodigest feb march
Eleonor Fedorey
15 diapositives1.2K vues
PDF
Ais life 2010-2
Eleonor Fedorey
21 diapositives867 vues
PDF
Opportunity Flipchart Screen Res
RalfWiebeck
33 diapositives446 vues
PPTX
Big history
jrizo87
9 diapositives236 vues
PDF
Linked Data Techniques for MOF compliant Models
Gerd Groener
26 diapositives777 vues
ODP
Aitiidiikiiwan priid.impress
fred17
18 diapositives314 vues
PPTX
123
H00202945
6 diapositives256 vues
PDF
Solaria training dessent
Leishman Associates
23 diapositives349 vues
ODP
Aitiidiikiiwan priid.impress
fred17
18 diapositives236 vues
PPT
ฉันเหมือนใคร
phaiza
3 diapositives146 vues
PPT
介绍Dbms registry plsql程序包1
maclean liu
7 diapositives336 vues
PPT
2011 384 hackworth_ppt
maclean liu
21 diapositives949 vues
PPT
Oporrak
enekoetajuncal
12 diapositives430 vues
DOCX
Puntuaciones provisionales (miércoles 26 a las 16h)
Emi Voces
11 diapositives234 vues
PPT
Meditation
Escritora (writer)
15 diapositives301 vues
Comparison table jan lokpal bill govt lokpal bill and ncpri drafts
DEEPAK YADAV
4 diapositives487 vues
The future of hands on learning technologies-no pictures
Susanna Martin
26 diapositives597 vues
Autodigest feb march
Eleonor Fedorey
15 diapositives1.2K vues
Ais life 2010-2
Eleonor Fedorey
21 diapositives867 vues
Opportunity Flipchart Screen Res
RalfWiebeck
33 diapositives446 vues
Big history
jrizo87
9 diapositives236 vues
Linked Data Techniques for MOF compliant Models
Gerd Groener
26 diapositives777 vues
Aitiidiikiiwan priid.impress
fred17
18 diapositives314 vues
123
H00202945
6 diapositives256 vues
Solaria training dessent
Leishman Associates
23 diapositives349 vues
Aitiidiikiiwan priid.impress
fred17
18 diapositives236 vues
ฉันเหมือนใคร
phaiza
3 diapositives146 vues
介绍Dbms registry plsql程序包1
maclean liu
7 diapositives336 vues
2011 384 hackworth_ppt
maclean liu
21 diapositives949 vues
Oporrak
enekoetajuncal
12 diapositives430 vues
Puntuaciones provisionales (miércoles 26 a las 16h)
Emi Voces
11 diapositives234 vues
Meditation
Escritora (writer)
15 diapositives301 vues

Similaire à CSS3 (20)

PDF
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
104 diapositives22.5K vues
KEY
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
56 diapositives3.2K vues
PDF
Chapitre 2 - Programmation web - 3) Le CSS.pdf
AnouAr42
26 diapositives392 vues
PDF
technologie web - part2
Benoît Simard
43 diapositives1.4K vues
KEY
Internationalisation du Front
Yannick Croissant
104 diapositives1.5K vues
PDF
Gagnez en productivité grâce aux préprocesseurs css
pefringant
25 diapositives364 vues
PDF
HTML5
Neovov
69 diapositives822 vues
PPT
Cours css niveau debutant
TheBest Icanbe
55 diapositives706 vues
PDF
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Corinne Schillinger
21 diapositives3.5K vues
PDF
OpenCode beta : Haml & Sass
Rémi Prévost
37 diapositives5.6K vues
PDF
Soyez revolutionnaire, utilisez CSS2 !
Raphaël Goetter
58 diapositives2.8K vues
PDF
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
39 diapositives1.2K vues
PPTX
Une Introduction à R
François Guillem
23 diapositives1.4K vues
PDF
Html
Simo Tama
31 diapositives452 vues
PPTX
W3 cafe ie10etwindows8
davrous
30 diapositives854 vues
PPTX
CSS3 Intel Webinar
ViniSketch
53 diapositives545 vues
PDF
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Raphaël Goetter
54 diapositives6.3K vues
ODP
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Microsoft
54 diapositives2.3K vues
PPTX
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
VISEO
31 diapositives980 vues
PDF
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
115 diapositives14 vues
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
104 diapositives22.5K vues
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
56 diapositives3.2K vues
Chapitre 2 - Programmation web - 3) Le CSS.pdf
AnouAr42
26 diapositives392 vues
technologie web - part2
Benoît Simard
43 diapositives1.4K vues
Internationalisation du Front
Yannick Croissant
104 diapositives1.5K vues
Gagnez en productivité grâce aux préprocesseurs css
pefringant
25 diapositives364 vues
HTML5
Neovov
69 diapositives822 vues
Cours css niveau debutant
TheBest Icanbe
55 diapositives706 vues
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Corinne Schillinger
21 diapositives3.5K vues
OpenCode beta : Haml & Sass
Rémi Prévost
37 diapositives5.6K vues
Soyez revolutionnaire, utilisez CSS2 !
Raphaël Goetter
58 diapositives2.8K vues
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
39 diapositives1.2K vues
Une Introduction à R
François Guillem
23 diapositives1.4K vues
Html
Simo Tama
31 diapositives452 vues
W3 cafe ie10etwindows8
davrous
30 diapositives854 vues
CSS3 Intel Webinar
ViniSketch
53 diapositives545 vues
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Raphaël Goetter
54 diapositives6.3K vues
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Microsoft
54 diapositives2.3K vues
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
VISEO
31 diapositives980 vues
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
115 diapositives14 vues
Publicité

Dernier (20)

PDF
New Perspectives Microsoft Office 365 and Word 2016 Comprehensive 1st Edition...
uwtdqazrp521
49 diapositives10 vues
PDF
Test Bank for Nursing Leadership and Management, 2nd Canadian Edition : Kelly
izckhtldvv3862
34 diapositives13 vues
PDF
Integrated Principles of Zoology 16th Edition Hickman Test Bank
kvpsvtv6753
46 diapositives19 vues
PDF
Research Design and Methods A Process Approach 9th Edition Bordens Solutions ...
sjbtbpfy5743
43 diapositives9 vues
PDF
Pointers in C A Hands on Approach 1st Edition Hrishikesh Dewan
krystynapratsdk
73 diapositives22 vues
PDF
Advances in Dairy Ingredients 1st Edition Geoffrey W. Smithers
katrionaloutstan
55 diapositives12 vues
PDF
Organizational Behavior Managing People and Organizations 12th Edition Griffi...
dfbjuiaf2244
46 diapositives12 vues
PDF
Using and Interpreting Statistics 3rd Edition Corty Solutions Manual
svrpozgmr8320
42 diapositives15 vues
PPTX
Lucie Cousturier.pptx peintre française
Txaruka
18 diapositives16 vues
PDF
Test Bank for Public Finance: A Contemporary Application of Theory to Policy,...
bvervcye1290
45 diapositives9 vues
PDF
Test Bank for Educational Psychology, 5th Edition : Santrock
alfvjcx340
42 diapositives8 vues
PDF
Eclipse Rich Client Platform 2nd Edition Jeff Mcaffer
krystynapratsdk
81 diapositives20 vues
PDF
Test Bank for Medical-Surgical Nursing Care 4th Edition
onrisyhwuv688
52 diapositives14 vues
PDF
Solution Manual for Kail, Children and Their Development, 7th Edition
hleemxzfvx5296
42 diapositives10 vues
PDF
Microeconomics Theory and Applications with Calculus 3rd Edition Perloff Test...
utvhwbk9930
41 diapositives8 vues
PDF
Introduction to Psychology Version 3 0 3rd Stangor Solution Manual
ploidbaf611
34 diapositives8 vues
PDF
Test Bank for Fundamentals of Anatomy and Physiology, 3rd Edition: Donald C. ...
hhtqweah506
40 diapositives7 vues
PDF
Advanced Accounting 13th Edition Hoyle Solutions Manual
jqpeuuecku2877
40 diapositives12 vues
PDF
fransizca-ebediyet-yolculuguiilecons.pdf
owane2024
450 diapositives16 vues
PDF
fransizca-kainat-insan-ve-kuranda-tefekkur.pdf
owane2024
234 diapositives14 vues
New Perspectives Microsoft Office 365 and Word 2016 Comprehensive 1st Edition...
uwtdqazrp521
49 diapositives10 vues
Test Bank for Nursing Leadership and Management, 2nd Canadian Edition : Kelly
izckhtldvv3862
34 diapositives13 vues
Integrated Principles of Zoology 16th Edition Hickman Test Bank
kvpsvtv6753
46 diapositives19 vues
Research Design and Methods A Process Approach 9th Edition Bordens Solutions ...
sjbtbpfy5743
43 diapositives9 vues
Pointers in C A Hands on Approach 1st Edition Hrishikesh Dewan
krystynapratsdk
73 diapositives22 vues
Advances in Dairy Ingredients 1st Edition Geoffrey W. Smithers
katrionaloutstan
55 diapositives12 vues
Organizational Behavior Managing People and Organizations 12th Edition Griffi...
dfbjuiaf2244
46 diapositives12 vues
Using and Interpreting Statistics 3rd Edition Corty Solutions Manual
svrpozgmr8320
42 diapositives15 vues
Lucie Cousturier.pptx peintre française
Txaruka
18 diapositives16 vues
Test Bank for Public Finance: A Contemporary Application of Theory to Policy,...
bvervcye1290
45 diapositives9 vues
Test Bank for Educational Psychology, 5th Edition : Santrock
alfvjcx340
42 diapositives8 vues
Eclipse Rich Client Platform 2nd Edition Jeff Mcaffer
krystynapratsdk
81 diapositives20 vues
Test Bank for Medical-Surgical Nursing Care 4th Edition
onrisyhwuv688
52 diapositives14 vues
Solution Manual for Kail, Children and Their Development, 7th Edition
hleemxzfvx5296
42 diapositives10 vues
Microeconomics Theory and Applications with Calculus 3rd Edition Perloff Test...
utvhwbk9930
41 diapositives8 vues
Introduction to Psychology Version 3 0 3rd Stangor Solution Manual
ploidbaf611
34 diapositives8 vues
Test Bank for Fundamentals of Anatomy and Physiology, 3rd Edition: Donald C. ...
hhtqweah506
40 diapositives7 vues
Advanced Accounting 13th Edition Hoyle Solutions Manual
jqpeuuecku2877
40 diapositives12 vues
fransizca-ebediyet-yolculuguiilecons.pdf
owane2024
450 diapositives16 vues
fransizca-kainat-insan-ve-kuranda-tefekkur.pdf
owane2024
234 diapositives14 vues
Publicité

CSS3

  • 1. CSS3 http://tinyurl.com/wsf-css3
  • 2. CSS3 ? On attend depuis longtemps… • Commencé en 1999 • Modulaire • … CSS 2.1 n’est toujours pas terminé
  • 3. Marre d’attendre ? Commençons ! • Sélecteurs • Media Queries • Multi-column • Backgrounds • Borders • Box-shadow • Colors • Text • Transformations • Transformations + Transitions • Animations
  • 4. Sélecteurs CSS 2.1 • * — Tous les éléments * { border: 0; } • E — Éléments de type E p { line-height: 1.5; } • E F — Éléments F descendants de E div a { text-decoration: underline; } • E > F — Éléments F enfants de E div > ul { background: green; }
  • 5. Sélecteurs CSS 2.1 • E + F — Éléments F directement précédé de E section h1 { margin: 1em; } • E:lang(c) — Éléments E ayant la langue c span:lang(en) { font-style: italic; } • E[foo] — Éléments E ayant l’attribut foo a[title] { border: 1px dotted #000; }
  • 6. Sélecteurs CSS 2.1 • E :first-child — Premier élément de E div :first-child { margin: 0; } • E:link, E:visited — Éléments E dont l’ancre n’a pas été visitée / a été visitée a:link { color: blue; } a:visited { color: green; } • E:active, E:hover, E:focus — Éléments E pendant des actions utilisateur a:active { background-color: yellow; }
  • 7. Sélecteurs CSS 2.1 • E[foo="bar"] — Éléments E dont l’attribut foo vaut exactement bar a[href="#top"] { color: pink; } • E[foo~="bar"] — Éléments E dont l’attribut foo contient bar div[class~="warning"] { background-color: yellow; } • E[foo|="bar"] — Éléments E dont l’attribut foo commence par bar. Incluant le tiret. a[hreflang|="en"] { font-style: italic; } Fonctionne pour <a hreflang="en"> et <a hreflang="en-US">
  • 8. Sélecteurs CSS 2.1 • .foo, E.foo — Éléments ou éléments E dont l’attribut class vaut foo .warning, div.warning { color: red; } • #foo, E#foo — Éléments ou éléments E dont l’attribut id vaut foo #note, div#note { color: blue; }
  • 9. Sélecteurs CSS3 • E ~ F — Éléments F précédé d’un élément E figure ~ figcaption { font-size: 80%; } • E :not(s) — Éléments excluant le sélecteur s div *:not(p) { margin: 0; } • E:root — Premier élément du document div:root { font-size: 100%; }
  • 10. Sélecteurs CSS3 • E :last-child — Dernier enfant de E ul:last-child { margin-bottom: 1em; } • E:empty — Éléments E vides div:empty { display: none; } • E:target — Élément E cible de l’ancre en cours h1:target { text-decoration: underline; }
  • 11. Sélecteurs CSS3 • E :nth-child(n) — Le n ième enfant de E div :nth-child(3) { background: red; } div :nth-child(3n+1) { background: red; } • E :nth-last-child(n) — Idem, en comptant de la fin div :nth-last-child(3) { background: red; } • E:nth-of-type(n) — Le nième élément de type E div img:nth-of-type(3) { background: green; } • E:nth-last-of-type(n) — Idem, en comptant de la fin div img:nth-last-of-type(3) { background: green; }
  • 12. Sélecteurs CSS3 • E :only-child — Le seul enfant de E div :only-child { background: blue; } • E:first-of-type — Le premier élément de type E div img:first-of-type { background: red; } • E:last-of-type — Le dernier élément de type E div img:last-of-type { background: green; } • E:only-of-type — Le seul élément de type E div p:only-of-type { background: yellow; }
  • 13. Sélecteurs CSS3 • E[foo^="bar"] — Éléments E ayant l’attribut foo qui commence par bar a[class^="number-"] { padding: 0; } • E[foo$="bar"] — Éléments E ayant l’attribut foo qui se termine par bar a[class$="ing"] { padding: 1em; } • E[foo*="bar"] — Éléments E ayant l’attribut foo qui contient bar a[class*="ost"] { padding: .5em; }
  • 14. Sélecteurs CSS3 • E:enabled, E:disabled — Éléments E activés / désactivés input:enabled { background: #FFF; } input:disabled { background: grey; } • E:checked — Éléments E cochés input[type="checkbox"]:checked { background: green; }
  • 15. Media Queries <link rel="stylesheet" type="text/css" media="screen" href="css/global.css"> • all • braille, embossed • handheld • print • projection • screen • speech • tty • tv
  • 16. Media Queries +• width, height, device-width, device-height • orientation • aspect-ratio, device-aspect-ratio • color, color-index, monochrome • resolution • (scan, grid)
  • 17. Media Queries + only, not, and <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-width: 700px)" href="css/global.css"> @media screen and (min-width: 400px) and (max-width: 700px) { body {…} }
  • 18. Multi-column p{ column-width: 13em; column-gap: 1em; }
  • 19. Backgrounds background-origin background-size
  • 20. Backgrounds multiple backgrounds div { background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) 11px 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y; }
  • 21. Backgrounds Gradients background: -moz-linear-gradient(left, #2E2E2E, #454545 10px); background: -webkit-gradient(linear, 0 0, 10 0, from(#2E2E2E), to (#454545)); background: linear-gradient(left, #2E2E2E, #454545 10px);
  • 22. Backgrounds Gradients background: -moz-linear-gradient(left, #2E2E2E, #454545 10px); background: -webkit-linear-gradient(left, #2E2E2E, #454545 10px); background: linear-gradient(left, #2E2E2E, #454545 10px);
  • 23. Backgrounds Gradients background: url(fallback.png); background: -moz-linear-gradient(left, #2E2E2E, #454545 10px); background: -webkit-linear-gradient(left, #2E2E2E, #454545 10px); background: linear-gradient(left, #2E2E2E, #454545 10px);
  • 24. Borders border-image border-radius
  • 25. Box-shadow div { box-shadow: -10px -10px 0 0 #000; }
  • 26. Colors • Opacity • RGBA • HSL, HSLA
  • 27. Text Web fonts (@font-face) text-shadow
  • 28. Transformations -moz-transform: rotate(-4deg); -o-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg);
  • 29. Transformations + Transitions
  • 30. Animations
  • 31. Et encore plein d’autres choses !
  • 32. Ressources • CSS3 Previews http://www.css3.info/preview/ • CSS3 Module Status http://www.css3.info/modules/ • CSS3 Selectors Test http://tools.css3.info/selectors-test/
  • 33. Ressources (démos) • Super awesome buttons with CSS3 http://www.zurb.com/ blog_uploads/0000/0617/buttons-03.html • An image gallery showcase for CSS transitions http:// devfiles.myopera.com/articles/1041/image-gallery.html • Pure CSS Coke Can http://www.romancortes.com/blog/pure-css- coke-can/ • CSS 3D Meninas http://www.romancortes.com/blog/css-3d-meninas/ • Sliding Vinyl with CSS3 http://www.zurb.com/playground/sliding-vinyl • 47 amazing CSS3 animation demos http:// www.webdesignerwall.com/trends/47-amazing-css3-animation- demos/
  • 34. Contact Nicolas Le Gall me@neovov.com