Your SlideShare is downloading. ×
Css3 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Css3 101

7,014
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. …

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,014
On Slideshare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
1
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 "gillsans" 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('truetype'). 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, >, +, PNG fix, etc. En la página del proyecto vienen los selectores soportados y páginas de test.
  • Transcript

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