Exposición de problemas de diseño que pueden resolverse fácilmente con CSS, sin uso de JS. Veremos ejemplos prácticos de menor a mayor complejidad, además de un repaso sobre cómo personalizar elementos de formulario. Finalmente se hará un pequeño resumen sobre propiedades no muy conocidas de CSS.

1. CSS Técnicas avanzadas
por Ismael González

2. 1 About me - Ismael González
FirefoxOS, Tuenti, ideup!, ELPAIS.com…
He trabajado en

3. 2 About me - Ismael González
Estoy especializado en
Implementación visual y
arquitecturas escalables con CSS

4. 3 About me - Ismael González
Actualmente
Diseño y frontend en @meetsapp

5. 4 About meetsapp.com
meets

6. 4 About meetsapp.com
meets es la forma mas rápida, divertida y eficaz
para hacer planes con tus amigos desde el móvil“ ”

7. 5 About meetsapp.com

8. 6 About meetsapp.com

9. 6 About meetsapp.com

10. 7 About meetsapp.com
meets

11. 8 Estructura de la presentación
Ejemplos prácticos de
problemas de diseño
Elementos de formulario
Características de CSS poco
conocidas
Ronda de preguntas
1/
2/
3/
4/

12. 9 El problema

13. 10 Centrado vertical a lo “inline-block”
Con varios elementos es fácil

14. 11 Centrado vertical a lo “inline-block”
Cuando solo tienes uno es “tricky”

15. 12 Centrado vertical a lo “inline-block”
Nos inventamos otro elemento al
que alinearnos

16. 13 Centrado vertical a lo “inline-block”
Ejemplo

17. 14 Centrado horizontal a lo “inline-block”
Útil cuando el contenido es
variable (traducciones)

18. 15 Centrado horizontal a lo “inline-block”
Ejemplo

19. 16 Posiciones absolutas
Podemos definir los 4 puntos a la vez

20. 17 Posiciones absolutas
Ejemplo

21. 18 Posiciones absolutas
Usando el valor 100%
left: 100% right: -100px;

22. 19 Posiciones absolutas
Ejemplo

23. 20 Posiciones absolutas
z-index: -1;

24. 21 Posiciones absolutas
Ejemplo

25. 22 BorderPro™
Un tipo de borde que tiene opacidad y
esta por encima (z-index) del layout

26. 23 BorderPro™
Ejemplo

27. 24 Paddings y aspect ratios
Mantener el aspect-ratio de un
elemento aunque cambie su tamaño

28. 25 Paddings y aspect ratios
Ejemplo

29. 26 Triángulos con CSS
Evitar usar imágenes para formas simples

30. 27 Triángulos con CSS
Ejemplo
Ejemplo tooltips

31. 28 Iconografía y botones
Normalmente apiñamos nuestros iconos
en un sprite vertical
action

32. 29 Iconografía y botones

33. 30 Iconografía y botones
Lo ideal es un elemento dedicado para
iconos
action
Label

34. 31 Iconografía y botones
Ejemplo

35. 32 Footers al bottom

36. 33 Footers al bottom
Ejemplo

37. 34 Estructuras mínimas (atómicas)
Media y cuerpo.
Una de las estructuras mas simples

38. 35 Estructuras mínimas (atómicas)
Una gran parte de la home de Facebook
puede construirse con esta estructura

39. 36 Estructuras mínimas (atómicas)
Ideal para contenido generado por usuario
Ejemplo

40. 37 Estructuras mínimas (atómicas)
Ideal para contenido controlado y
necesidad de overflows

41. 38 Estructuras mínimas (atómicas)
Item con 2 bloques
Item en formularios
Item con 2 bloques y centrado vertical
Otros ejemplos
1/
2/
3/

42. 39 Formularios
Personalizar formularios
siempre es un dolor, sinceramente

43. 39 Formularios
Personalizar formularios
siempre es un dolor, sinceramente

44. 40 Formularios
Checkboxes y radios
Switches (on/off)
Selects
Ejemplos
1/
2/
3/

45. 41 Propiedades desconocidas
pointer-events
animation: steps()
:target
1/
2/
3/
-moz-element4/
Magnify effect with -moz-element

46. ¿Preguntas?
@basiclines
@meetsapp
TWITTER
TWITTER
GITHUB
GITHUB

47. Suficiente CSS por hoy
¡Gracias!