CSS Técnicas avanzadas
47
CSS Técnicas avanzadas por Ismael González
-
Upload
ismael-gonzalez -
Category
Engineering
-
view
186 -
download
4
Transcript of 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
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
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
GITHUB
GITHUB
Suficiente CSS por hoy
¡Gracias!
