- INICIO
- El poder de los valores relativos
- - La lucha por un diseño perfecto en pixeles
- - El fin de la web de pixeles perfectos
- EMS y REMS
- - Usando EMS para definir el tamaño de fuente
- - Usar REMS para el tamaño de fuente
- Deja de pensar en pixeles
- - Establecer un tamaño de fuente predeterminado sensato
- - Haciendo el panel RESPONSIVE
- - Cambiar el tamaño de un solo componente
- Unidades VIEWPORT-RELATIVE
- - Usando VH para el tamaño de la fuente
- - Usando calc() para el tamaño de la fuente
- Números sin unidades y altura de linea
- Propiedades personalizadas (variables CSS)
- - Cambiar propiedades personalizadas de forma dinámica
- - Cambiar propiedades personalizadas con JavaScript
- - Experimentar con propiedades personalizadas
- RESUMEN
- INICIO
- Dificultades con WIDTH
- - Evitando los números mágicos
- - Ajuste del modelo de caja
- - Usando el BORDER-BOX universal
- - Agregar un canalón entre columnas
- Dificultades con ELEMENT HEIGHT
- - Controlar el comportamiento de OVERFLOW
- - Aplicar alternativas a las alturas basadas en porcentajes
- - Usando MIN-HEIGHT y MAX-HEIGHT
- - Contenido centrado verticalmente
- Márgenes negativos
- Márgenes colapsados
- - Colapso entre texto
- - Colapso de múltiples márgenes
- - Colapso fuera de un contenedor
- Espacio de elementos dentro de un contenedor
- - Considerando cambiar el contenido
- - Creando una solución más general: El selector de Búho Lobotomizado
- RESUMEN
- INICIO
- Propósito de los FLOATS
- Contenedor colapsando y CLEARFIX
- - Entender el colapso de contenedores
- - Entendiendo el CLEARFIX
- Inesperado "FLOAT CATCHING
- Objetivos de medios y contextos de formato de bloques
- - Establecer un contexto de formato de bloque
- - Usar un BLOCK-FORMATTING-CONTEXT para diseños de objetos multimedia
- GRID SYSTEMS
- - Comprender un GRID-SYSTEM
- - Construyendo un GRID-SYSTEM
- - Agregar canaletas
- RESUMEN
- INICIO
- Principios de FLEXBOX
- - Construyendo un menu basico FLEXBOX
- - Agregar relleno y espaciado
- Tamaños de los FLEX-ITEMS
- - Usando la propiedad de FLEX-BASIS
- - Usando FLEX-GROW
- - Usando FLEX-SHRINK
- - Algunos usos practicos
- FLEX DIRECTION
- - Cambiar la FLEX-DIRECTION
- - Aplicar estilo al formulario de inicio de sesion
- Alineacion, espacio y otros detalles
- - Entendiendo la propiedad de FLEX-CONTAINER
- - Comprender las propiedades de los FLEX-ITEMS
- - Usar propiedades de alineacion
- Un par de cosas para tener en cuenta
- - Flexbugs
- - Diseño de pagina completa
- RESUMEN
- INICIO
- El Diseño Web esta aqui
- - Construyendo una cuadricula basica
- Anatomia de un GRID
- - Numeracion de lineas de cuadricula
- - Trabajando junto con FLEXBOX
- Sintaxis Alternativas
- - Nombrar lineas de cuadricula
- - Nombrar areas de la cuadricula
- Rejilla explicita e implicita
- - Añadiendo variedad
- - Ajustar GRID ITEMS para llenar el GRID TRACK
- FEATURE QUERIES
- Alineacion
- RESUMEN
- INICIO
- Posicionamiento Fijo
- - Creando un dialogo modal con posicionamiento fijo
- - Controlar el tamaño de los elementos posicionados
- Posicionamiento Absoluto
- - Posicionamiento absoluto del boton cerrar
- - Posicionando un pseudo-elemento
- Posicionamiento Relativo
- - Crear un menu desplegable
- - Creando un triangulo CSS
- STACKING CONTEXT y Z-INDEX
- - Comprender el proceso de renderizado y el orden de apilamiento
- - Manipulacion del orden de apilamiento con Z-INDEX
- - Comprender los contextos de apilamiento
- STICKY POSITIONING
- RESUMEN
- INICIO
- MOBILE FIRST
- - Creando un menu movil
- - Agregar la Meta-Etiqueta del VIEWPORT
- MEDIA QUERIES
- - Comprender los tipos de MEDIA QUERY
- - Agregar BREAKPOINTS a la pagina
- - Agregar columnas RESPONSIVE
- Diseños Fluidos
- - Agregar estilos para un VIEWPORT grande
- - Lidiar con las tablas
- Imagenes RESPONSIVE
- - Usar varias imagens para diferentes tamaños de ventana grafica
- - Usando SCRSET para servir la imagen correcta
- RESUMEN
- INICIO
- Introduccion a KSS
- - Configuracion de KSS
- - Redaccion de documentacion de KSS
- - Documentar variantes de modulos
- - Crear una pagina de descripcion general
- - Documentar modulos que requieren JavaScript
- - Organizar la biblioteca de patrones en secciones
- Cambiando la forma de construir CSS
- - Usar un flujo de trabajo de CSS FIRST
- - Usar una biblioteca de patrones como API
- RESUMEN
- INICIO
- Gradientes
- - Usar multiples COLOR STOPS
- - Usar degradados radiales
- Sombras
- - Definicion de profundidad con Degradados y Sombras
- - Creando elementos con un Diseño plano
- - Creando botones con un aspecto mas moderno
- Modos de mezcla
- - Teñir una imagen
- - Comprender los tipos de modo de fusion
- - Agregar textura a una imagen
- - Usar metodos de mezcla
- RESUMEN
- INICIO
- El contraste es el rey
- - Estableciendo patrones
- - Implementando el diseño
- Color
- - Entender las notaciones de color
- - Agregar nuevos colores a una paleta
- - Considerando el contraste de los colores de fuente
- Espaciado
- - Usando EMS vs PX
- - Factorizar la altura de la linea
- - Espaciado de elementos en linea
- RESUMEN
- INICIO
- Fuentes WEB
- Fuentes de Google
- Como funciona @FONT-FACE
- - Formatos de fuentes y alternativas
- - Varias variantes del mismo tipo de letra
- Ajuste del espacio para la lectura
- - Espaciado del cuerpo de la copia
- - Encabezados, elementos pequeños y espaciado
- El temido FOUT y FOIT
- - Uso de FONT FACE OBSERVER
- - Recurriendo a las fuentes del sistema
- - Preparandose para la visualización de fuentes
- RESUMEN
- INICIO
- Rotar, traducir, escalar y borrar
- - Cambiar el origen de la transformacion
- - Aplicar multiples transformaciones
- Transformaciones en movimiento
- - Ampliando el icono
- - Creacion de etiquetas de "volar en"
- - Escalonado de transiciones
- Rendimiento de animacion
- - Mirando la canalizacion de renderizado
- Transformaciones tridimensionales (3D)
- - Controlando la perspectiva
- - Implementacion de transformaciones 3D avanzadas
- RESUMEN
- INICIO
- KEYFRAMES
- Transformaciones 3d de Animacion
- - Construyendo el diseño sin animaciones
- - Agregar animacion al diseño
- Retardo de animacion y modo de llenado
- Transmitir significado a traves de animacion
- - Responder a la interaccion del usuario
- - LLamar la atencion del usuario
- Un consejo final
- RESUMEN