CSS Técnicas avanzadas
-
Upload
ismael-gonzalez -
Category
Engineering
-
view
188 -
download
4
Transcript of CSS Técnicas avanzadas
![Page 1: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/1.jpg)
CSS Técnicas avanzadaspor Ismael González
![Page 2: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/2.jpg)
1 About me - Ismael González
FirefoxOS, Tuenti, ideup!, ELPAIS.com…
He trabajado en
![Page 3: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/3.jpg)
2 About me - Ismael González
Estoy especializado en
Implementación visual y arquitecturas escalables con CSS
![Page 4: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/4.jpg)
3 About me - Ismael González
Actualmente
Diseño y frontend en @meetsapp
![Page 5: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/5.jpg)
4 About meetsapp.com
meets
![Page 6: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/6.jpg)
4 About meetsapp.com
meets es la forma mas rápida, divertida y eficaz para hacer planes con tus amigos desde el móvil“ ”
![Page 7: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/7.jpg)
5 About meetsapp.com
![Page 8: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/8.jpg)
6 About meetsapp.com
![Page 9: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/9.jpg)
6 About meetsapp.com
![Page 10: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/10.jpg)
7 About meetsapp.com
meets
![Page 11: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/11.jpg)
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/
![Page 12: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/12.jpg)
9 El problema
![Page 13: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/13.jpg)
10 Centrado vertical a lo “inline-block”
Con varios elementos es fácil
![Page 14: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/14.jpg)
11 Centrado vertical a lo “inline-block”
Cuando solo tienes uno es “tricky”
![Page 15: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/15.jpg)
12 Centrado vertical a lo “inline-block”
Nos inventamos otro elemento al que alinearnos
![Page 16: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/16.jpg)
13 Centrado vertical a lo “inline-block”
Ejemplo
![Page 17: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/17.jpg)
14 Centrado horizontal a lo “inline-block”
Útil cuando el contenido es variable (traducciones)
![Page 18: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/18.jpg)
15 Centrado horizontal a lo “inline-block”
Ejemplo
![Page 19: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/19.jpg)
16 Posiciones absolutas
Podemos definir los 4 puntos a la vez
![Page 21: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/21.jpg)
18 Posiciones absolutas
Usando el valor 100%
left: 100% right: -100px;
![Page 22: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/22.jpg)
19 Posiciones absolutas
Ejemplo
![Page 23: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/23.jpg)
20 Posiciones absolutas
z-index: -1;
![Page 24: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/24.jpg)
21 Posiciones absolutas
Ejemplo
![Page 25: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/25.jpg)
22 BorderPro™
Un tipo de borde que tiene opacidad y esta por encima (z-index) del layout
![Page 27: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/27.jpg)
24 Paddings y aspect ratios
Mantener el aspect-ratio de un elemento aunque cambie su tamaño
![Page 28: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/28.jpg)
25 Paddings y aspect ratios
Ejemplo
![Page 29: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/29.jpg)
26 Triángulos con CSS
Evitar usar imágenes para formas simples
![Page 30: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/30.jpg)
27 Triángulos con CSS
Ejemplo
Ejemplo tooltips
![Page 31: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/31.jpg)
28 Iconografía y botones
Normalmente apiñamos nuestros iconos en un sprite vertical
action
![Page 32: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/32.jpg)
29 Iconografía y botones
![Page 33: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/33.jpg)
30 Iconografía y botones
Lo ideal es un elemento dedicado para iconos
action
Label
![Page 34: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/34.jpg)
31 Iconografía y botones
Ejemplo
![Page 35: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/35.jpg)
32 Footers al bottom
![Page 36: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/36.jpg)
33 Footers al bottom
Ejemplo
![Page 37: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/37.jpg)
34 Estructuras mínimas (atómicas)
Media y cuerpo. Una de las estructuras mas simples
![Page 38: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/38.jpg)
35 Estructuras mínimas (atómicas)
Una gran parte de la home de Facebook puede construirse con esta estructura
![Page 39: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/39.jpg)
36 Estructuras mínimas (atómicas)
Ideal para contenido generado por usuario
Ejemplo
![Page 40: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/40.jpg)
37 Estructuras mínimas (atómicas)
Ideal para contenido controlado y necesidad de overflows
![Page 41: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/41.jpg)
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/
![Page 42: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/42.jpg)
39 Formularios
Personalizar formularios siempre es un dolor, sinceramente
![Page 43: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/43.jpg)
39 Formularios
Personalizar formularios siempre es un dolor, sinceramente
![Page 44: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/44.jpg)
40 Formularios
Checkboxes y radios
Switches (on/off)
Selects
Ejemplos
1/
2/
3/
![Page 45: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/45.jpg)
41 Propiedades desconocidas
pointer-events
animation: steps()
:target
1/
2/
3/
-moz-element4/
Magnify effect with -moz-element
![Page 46: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/46.jpg)
¿Preguntas?
@basiclines
@meetsappTWITTER
GITHUB
GITHUB
![Page 47: CSS Técnicas avanzadas](https://reader030.fdocuments.co/reader030/viewer/2022020116/55b41128bb61eb7b488b45aa/html5/thumbnails/47.jpg)
Suficiente CSS por hoy
¡Gracias!