CSS Técnicas avanzadas

CSS Técnicas avanzadaspor Ismael González

1 About me - Ismael González

FirefoxOS, Tuenti, ideup!, ELPAIS.com…

He trabajado en

2 About me - Ismael González

Estoy especializado en

Implementación visual y arquitecturas escalables con CSS

3 About me - Ismael González

Actualmente

Diseño y frontend en @meetsapp

4 About meetsapp.com

meets

4 About meetsapp.com

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

5 About meetsapp.com

6 About meetsapp.com

6 About meetsapp.com

7 About meetsapp.com

meets

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/

9 El problema

10 Centrado vertical a lo “inline-block”

Con varios elementos es fácil

11 Centrado vertical a lo “inline-block”

Cuando solo tienes uno es “tricky”

12 Centrado vertical a lo “inline-block”

Nos inventamos otro elemento al que alinearnos

13 Centrado vertical a lo “inline-block”

Ejemplo

14 Centrado horizontal a lo “inline-block”

Útil cuando el contenido es variable (traducciones)

15 Centrado horizontal a lo “inline-block”

Ejemplo

16 Posiciones absolutas

Podemos definir los 4 puntos a la vez

17 Posiciones absolutas

Ejemplo

18 Posiciones absolutas

Usando el valor 100%

left: 100% right: -100px;

19 Posiciones absolutas

Ejemplo

20 Posiciones absolutas

z-index: -1;

21 Posiciones absolutas

Ejemplo

22 BorderPro™

Un tipo de borde que tiene opacidad y esta por encima (z-index) del layout

23 BorderPro™

Ejemplo

24 Paddings y aspect ratios

Mantener el aspect-ratio de un elemento aunque cambie su tamaño

25 Paddings y aspect ratios

Ejemplo

26 Triángulos con CSS

Evitar usar imágenes para formas simples

27 Triángulos con CSS

Ejemplo

Ejemplo tooltips

28 Iconografía y botones

Normalmente apiñamos nuestros iconos en un sprite vertical

action

29 Iconografía y botones

30 Iconografía y botones

Lo ideal es un elemento dedicado para iconos

action

Label

31 Iconografía y botones

Ejemplo

32 Footers al bottom

33 Footers al bottom

Ejemplo

34 Estructuras mínimas (atómicas)

Media y cuerpo. Una de las estructuras mas simples

35 Estructuras mínimas (atómicas)

Una gran parte de la home de Facebook puede construirse con esta estructura

36 Estructuras mínimas (atómicas)

Ideal para contenido generado por usuario

Ejemplo

37 Estructuras mínimas (atómicas)

Ideal para contenido controlado y necesidad de overflows

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/

39 Formularios

Personalizar formularios siempre es un dolor, sinceramente

39 Formularios

Personalizar formularios siempre es un dolor, sinceramente

40 Formularios

Checkboxes y radios

Switches (on/off)

Selects

Ejemplos

1/

2/

3/

41 Propiedades desconocidas

pointer-events

animation: steps()

:target

1/

2/

3/

-moz-element4/

Magnify effect with -moz-element

¿Preguntas?

@basiclines

@meetsappTWITTER

TWITTER

GITHUB

GITHUB

Suficiente CSS por hoy

¡Gracias!