<ul>CSS3 101 </ul><ul>There must be a start for everyone </ul>
The big picture <ul><li>CSS3 includes  a truckload of big new stuff </li><ul><li>Fonts, media queries, transformations, an...
IE defenestration is not required <ul><li>defenestrate, n : a throwing of a person or thing out of a window
The Merriam-Webster dictionary </li></ul>
Current status <ul><li>Explorer (9+) : -ms-*
Firefox : -moz-*
Chrome, Safari : -webkit-*
Opera (10+) : -o-* </li></ul>
Start small <ul><li>Everyone does the same:
start with rounded corners,
then  continue scratching </li></ul>
border-radius <ul><li>{radius}
{topleft, bottomright} {topright, bottomleft }
{topleft} {topright} {bottomright} {bottomleft} </li></ul>.container { border: 4px solid #f00; -moz-border-radius: 5px; -w...
box-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
{x offset} {y offset} {blur} {spread} {color}
{shadow1}, {shadow2}, {shadow3}... </li></ul>.container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5...
text-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
{text-shadow1}, {text-shadow2}, ... </li></ul>.container { text-shadow: 5px 5px 5px #000; }
rgba <ul><li>rgba (red, blue, green, alpha) </li></ul>.using-opacity { opacity: .5; } .using-rgba { background-color: rgba...
Wherever a color fits in <ul><li>background, color, border, shadow </li></ul>.block { background: rgb(218, 37, 29); /* fal...
New fonts <ul><li>We are not limited to web-safe fonts anymore </li></ul>
@font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url(...
Flash Of Unstyled Text <ul><li>Firefox / Opera : show the next font while downloading.
IE / Webkit : do not display anything while downloading </li></ul>
Font repositories <ul><li>Squirrel font
Google Web Fonts </li></ul><ul><li>(Beware with spanish special characters!) </li></ul>
Transitions <ul><li>Simple animations in the browser </li></ul>
Transitions <ul><li>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.  </l...
Transitions: example a {  color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in;  transitio...
Upcoming SlideShare
Loading in …5
×

Css3 101

8,729 views

Published on

My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.

This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
8,729
On SlideShare
0
From Embeds
0
Number of Embeds
5,412
Actions
Shares
0
Downloads
1
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • Esto es sin tener en cuenta lo que viene con HTML5: webgl,svg, canvas, new form fields
  • Cada navegador añade un prefijo a cada estilo no definitivo de CSS3. Estos prefijos van antes que el nombre del modificador de CSS
  • Para el caso de una pestaña usaríamos: 5px 5px 0 0 Sigue siendo sentido de agujas de reloj.
  • Puede definirse más de una sombra El valor de spread es lo que crece la sombra del objeto antes de aplicar el blur. No se suele usar. Un efecto que suele quedar muy bien es aplicar offsets de cero y sólo poner blur. Si la sombra es #fff o similar, el efecto es de brillo en lugar de sombra.
  • Notar que text-shadow no lleva prefijo de navegador
  • No es sólo que afecta al color especificado exclusivamente, sino que tampoco afecta a los nodos hijos (no se hereda) Ojo que alpha es un valor decimal entre 0 y 1, mientras que los otros tres son enteros entre 0 y 255 Para IE puede usarse opacity o un png semitransparente de fondo
  • Por la definición del W3C, puede usarse donde se pueda usar cualquier color Si el navegador no reconoce rgba, lo ignorará por completo así que hace falta un fallback Puestos a especificar el fallback, es más facil usar el rgb que convertir a hex
  • You give your custom font a name, like &amp;quot;gillsans&amp;quot; This line is for IE - src: url(gillsans.eot);. It asks for an .eot font file This line is for pretty much every other browser url(gillsans.ttf) format(&apos;truetype&apos;). It needs a .ttf font file Ojo: el resultado final depende del sistema operativo (XP con o sin ClearCase, Linux, Mac, etc). Antialiasing etc.
  • Qué sucede mientras se descarga la fuente? Por esto suele verse que se usa para los títulos, pero no para el cuerpo de la página
  • Usarlos a mano es un fastidio: * generar el eot y el ttf * Comprimir gzip * Poner far expires cache header * Probar en cada navegador
  • This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).
  • ease-in: suave al principio. Cualquier cambio en el color aplica esta transición Hay una versión más larga usando transition-property, transition-duration etc, pero es menos intuitiva y más larga de escribir
  • Más facil que animar una a una
  • Cada uno de estos se corresponde con varios atributos de CSS, claro.
  • Cómo se compara el rendimiento de una transition de CSS con las animaciones de jQuery de toda la vida?
  • Esta web es de Microsoft. Todo el mundo quiere eliminar IE6. Fijarse que IE6 está por debajo del 5% en todos lados menos en China e India.
  • First-child, last-child, &gt;, +, PNG fix, etc. En la página del proyecto vienen los selectores soportados y páginas de test.
  • Css3 101

    1. 1. <ul>CSS3 101 </ul><ul>There must be a start for everyone </ul>
    2. 2. The big picture <ul><li>CSS3 includes a truckload of big new stuff </li><ul><li>Fonts, media queries, transformations, animations... </li></ul><li>It also includes lots of small new stuff </li><ul><li>New selectors, rounded corners, gradients, shadows... </li></ul><li>Some of these features were already available with 2.1 </li></ul>
    3. 3. IE defenestration is not required <ul><li>defenestrate, n : a throwing of a person or thing out of a window
    4. 4. The Merriam-Webster dictionary </li></ul>
    5. 5. Current status <ul><li>Explorer (9+) : -ms-*
    6. 6. Firefox : -moz-*
    7. 7. Chrome, Safari : -webkit-*
    8. 8. Opera (10+) : -o-* </li></ul>
    9. 9. Start small <ul><li>Everyone does the same:
    10. 10. start with rounded corners,
    11. 11. then continue scratching </li></ul>
    12. 12. border-radius <ul><li>{radius}
    13. 13. {topleft, bottomright} {topright, bottomleft }
    14. 14. {topleft} {topright} {bottomright} {bottomleft} </li></ul>.container { border: 4px solid #f00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
    15. 15. box-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
    16. 16. {x offset} {y offset} {blur} {spread} {color}
    17. 17. {shadow1}, {shadow2}, {shadow3}... </li></ul>.container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }
    18. 18. text-shadow <ul><li>{x offset} {y offset} {blur-radius} {color}
    19. 19. {text-shadow1}, {text-shadow2}, ... </li></ul>.container { text-shadow: 5px 5px 5px #000; }
    20. 20. rgba <ul><li>rgba (red, blue, green, alpha) </li></ul>.using-opacity { opacity: .5; } .using-rgba { background-color: rgba(218, 37, 29, .5); }
    21. 21. Wherever a color fits in <ul><li>background, color, border, shadow </li></ul>.block { background: rgb(218, 37, 29); /* fallback */ background: rgba(218, 37, 29, .5); text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
    22. 22. New fonts <ul><li>We are not limited to web-safe fonts anymore </li></ul>
    23. 23. @font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url( 'pm.ttf' ) format('truetype'); } h1 { font-family: permanentmarker; }
    24. 24. Flash Of Unstyled Text <ul><li>Firefox / Opera : show the next font while downloading.
    25. 25. IE / Webkit : do not display anything while downloading </li></ul>
    26. 26. Font repositories <ul><li>Squirrel font
    27. 27. Google Web Fonts </li></ul><ul><li>(Beware with spanish special characters!) </li></ul>
    28. 28. Transitions <ul><li>Simple animations in the browser </li></ul>
    29. 29. Transitions <ul><li>CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. </li></ul>a { color: #000; } a:hover { color:#f00; }
    30. 30. Transitions: example a { color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in; transition: color 1s ease-in; } a:hover { color: #f00; }
    31. 31. transition <ul><li>{property} {duration} {timing function} {delay}
    32. 32. {transition1}, {transition2}, ... </li></ul>a { -webkit-transition: color 1s ease-in, background .3s ease; -moz-transition: color 1s ease-in, background .3s ease; transition: color 1s ease-in, background .3s ease; }
    33. 33. all a { -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; } a:hover, a:focus { color: #030; background: #690; }
    34. 34. Animatable properties <ul><li>background, border, position, color, font, size,
    35. 35. margin, padding, opacity, transformation ,
    36. 36. z-index, zoom </li></ul>
    37. 37. CSS transition or Javascript animation? <ul><li>CSS Transitions </li><ul><ul><li>Declared in the CSS
    38. 38. Simpler syntax
    39. 39. Transitions are faster
    40. 40. The animation can be automatically interrupted </li></ul></ul><li>jQuery animate() </li><ul><ul><li>Not limited to simple animations
    41. 41. Support for all browsers </li></ul></ul></ul>
    42. 42. Life's a bitch <ul><li>You should care about older browsers </li></ul>
    43. 43. Internet Explorer 6
    44. 44. IE-specific stylesheets <!--[if IE 7]> <link href=&quot;/ie_hacks7.css&quot; rel=&quot;stylesheet&quot;> <![endif]--> <!--[if lte IE 6]> <link href=&quot;/ie_hacks6.css&quot; rel=&quot;stylesheet&quot;> <![endif]--> http://www.quirksmode.org/css/condcom.html
    45. 45. Fallback properties .block { background: rgb(218, 37, 29); background: rgba(218, 37, 29, .5); } .foo { background: #2989d8; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 55%, #7db9e8 100% ); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(55%,#207cca), color-stop(100%,#7db9e8) ); }
    46. 46. IE7.js ie7.js, ie8.js, ie9.js by Dean Edwards Fixes simple CSS 2 and 3 selectors
    47. 47. <ul><li>Brings to IE: </li><ul><li>border-radius
    48. 48. box-shadow
    49. 49. border-image
    50. 50. gradients
    51. 51. rgba </li></ul></ul>
    52. 52. Many more! <ul><li>Chrome Frame
    53. 53. Polyfills
    54. 54. HTML5 boilerplate
    55. 55. IE-specific CSS selectors </li></ul>
    56. 56. Questions?
    57. 57. Thanks! <ul><li>Come to our course and enjoy three straight days of this! </li><ul><li>http://extrema-sistemas.com/training
    58. 58. http://del.icio.us/html5css3
    59. 59. http://github.com/html5css3 </li></ul></ul>twitter.com/nachocoloma [email_address]

    ×