ESAT Online - CSS Moderno

INTRODUCCIÓN

¿Qué significa CSS? Una breve introducción a los contenidos del curso de CSS.

CSS FUNDAMENTAL

Selectores. Los selectores CSS nos permiten manipular propiedades visuales y de comportamiento en determinadas condiciones y combinaciones de elementos HTML.

Cascada. La cascada es uno de los conceptos más importantes de CSS. En esencia, define en qué orden es ejecutado nuestro código CSS.

Herencia. Algunas propiedades CSS se pueden heredar de padres a hijos, haciéndonos la vida más fácil. Veamos cómo funciona la herencia CSS.

Especificidad. La especificidad es otro de los grandes conceptos CSS que debes entender. Sin él, CSS puede parecer mucho más confuso de lo que realmente es.

Modelo de caja. El modelo de caja (box model) CSS define cómo se muestran visualmente los elementos HTML en el navegador.

Imágenes inline. Es complicado encontrar un documento HTML que no tenga al menos una imagen. Veamos cómo se pueden manipular con CSS.

Imágenes de fondo. Otra de las formas de añadir imágenes a nuestros elementos HTML es como fondo. Una técnica muy útil en algunos casos. CSS tiene varias propiedades específicas para esta tarea.

Sprites. CSS permite utilizar sprites (imágenes combinadas en una sola) de formas creativas.

Color. CSS se encarga del aspecto visual de nuestro documento HTML, por ello permite gestionar y expresar el color usando diferentes escalas.

Degradados. CSS permite definir degradados lineales y radiales de forma nativa. Veamos cómo.

Tipografía. Por supuesto, CSS dispone de varias propiedades para gestionar diferentes familias tipográficas y establecer sus valores más importantes.

Espaciado tipografico. Existen dos propiedades CSS principales que te permitirán ajustar el espacio en la tipografía.

Display. Los modos de display es un concepto troncal CSS que debes entender ya que controla cómo se relacionan los elementos HTML unos entre otros.

Posicionamiento relative y absolute. En CSS, los elementos se posicionan teniendo en cuenta su modelo de caja y siguiendo el flujo natural de documento. Sin embargo, es posible alterar ese orden natural y re-posicionar un elemento a tu antojo.

Posicionamiento fixed y sticky. Dos valores muy comunes en el CSS escrito hoy en día ya que forman parte de patrones UX que todos utilizamos.

Z-index. El índice Z añade la tercera dimensión (profundidad) a nuestro documento HTML. Con esta propiedad es posible controlar la superposición de elementos HTML.

Desbordamiento. ¿Qué ocurre cuando el contenido de un elemento HTML sobrepasa su contendor?. La propiedad overflow define este comportamiento.

Elementos flotantes. Una de las primeras aproximaciones en pos de conseguir layouts multi-columna fue flotar los elementos HTML a izquierda/derecha, logrando el objetivo pero añadiendo un nuevo set de dificultades y efectos secundarios que debes conocer.

Despejar elementos flotantes. Cuando usemos float muy probablemente debamos “despejar” el elemento contenedor. Veamos cómo.

Pseudoclases más comunes. Con las pseudoclases CSS puedes seleccionar elementos HTML en base a condiciones especiales como posición, relación o estado.

Pseudoclase nth. Con nth-* puedes llegar a los elementos que se encuentren en posiciones intermedias o incluso generar patrones de selección basados en rangos y desplazamientos.

Pseudoelementos. Los pseudoelementos CSS permiten seleccionar partes específicas de elementos HTML.

Selectores de atributo. Otra forma de seleccionar elementos HTML es en base la presencia y/o valores de atributos CSS.

Selectores de combinación. Alternativamente, también se pueden seleccionar elementos HTML en base a su relación con otros elementos adyacentes.

ANIMACIÓN Y TRANSFORMACIÓN CSS

Transiciones. Las transiciones CSS permiten realizar cambios en algunas propiedades de forma gradual (animación).

Transition shorthand. Igual que en muchas otras propiedades CSS, existe una propiedad acortada para realizar transiciones.

Transformaciones 2D. Con las transformaciones 2D es posible alterar la posición y rotación de los elementos HTML en los ejes X e Y.

Animation. CSS permite crear “líneas de tiempo” con una duración y puntos clave donde se especifican propiedades CSS, formando una animación.

Animation shorthand. Una vez más CSS pone a nuestra disposición la propiedad acortada para expresar animaciones es una única sentencia.

Perspectiva. No existe efecto 3D sin perspectiva. La propiedad perspective define el punto de fuga del que parte toda escena.

Transformaciones 3D. Al añadir el eje Z (profundidad) al X e Y, estamos transformando un elemento en 3 dimensiones.

Transform origin. CSS permite alterar el origen de las transformaciones 2D y 3D.

Transform-style. ¿Qué ocurre cuando un elemento con transformaciones 3D contiene otros elementos con transformaciones 3D?. La respuesta no es lo que esperas.

Backface-visibility. En ocasiones es útil ocultar la parte de atrás de los elementos HTML cuando los rotamos y esta queda frente al espectador.

Carta 3D. Pequeña demo/ejercicio donde usaremos parte de lo aprendido en este módulo.

Cubo 3D. Práctica más elaborada donde poner en juego todo lo aprendido sobre animación y transformación.

Perspective origin. Tras ser consciente de todo el contexto 3D y cómo funciona, podrás entender sin problemas cómo cambiar el punto de fuga de una escena.

CSS MODERNO

Margin collapse. El colapso de márgenes es esencial para acabar de entender cómo funciona el modelo de caja.

Calc. Con la función calc puedes realizar operaciones matemáticas y utilizar los resultados como valores de medida.

Flexbox. El modelo de caja flexbible (flexbox) es un soplo de aire fresco en la maquetación CSS. Veamos por qué.

Flexbox: propiedades parent. Vamos a analizar cuáles son las propiedades más importantes de los elementos contenedores flex.

Flexbox: propiedades children. Veamos ahora cómo funciona flexbox a nivel de elementos que viven dentro de un flex container.

Flexbox demo. Pongamos en práctica todo lo aprendido sobre Flexbox en un sencillo ejercicio.

GRID. Con el modo de display GRID por fin podemos crear rejillas auto-adaptables en CSS de forma nativa.

GRID básico. A través de una demostración vamos a aprender cómo funciona GRID y cuáles son sus principales propiedades.

GRID intermedio. Ahora que ya sabemos los fundamentos GRID, vamos a dar un paso más allá entrando en conceptos más avanzados.

GRID avanzado. Utilizando todo lo aprendido sobre GRID llega el momento de conocer algunas de las características avanzadas.

GRID packing mode dense. El valor “dense” del “auto-placement algorithm” de GRID permite que todos los GRID tracks/cells tengan su correspondiente GRID item.

Viewport. Con viewport controlamos la escala del escenario “visible” donde podemos mostrar nuestro contenido Web.

Alinear cualquier cosa con CSS. Ahora que ya conoces cómo funciona el modelo de bloque y la caja flexible, examinemos diferentes escenarios donde es necesario alinear elementos en ambos ejes.

Media queries. Las media queries se han convertido en la herramienta imprescindible para realizar sitios web responsive.

Unidades em y rem. A parte de las unidades fijas (como píxeles), CSS dispone de unidades relativas al tamaño de fuente, entre otras.

CSS Variables. CSS soporta de forma nativa las llamadas variables, aunque en realidad son propiedades personalizadas.

Unidades relativas a viewport. Las unidades vh, vw, vmin y vmax son relativas al tamaño de viewport, característica que abre un nuevo abanico de posibilidades.

Responsive Web design. El diseño y desarrollo “responsive” (que responde) es el estándar hoy en día. Veamos cuáles son sus fundamentos y qué significa “mobile first”.

Arquitectura CSS (BEM). Aprender un sistema de arquitectura CSS siempre es buena idea. BEM (Block Element Modifier) es uno de los más sencillos y potentes.

DESPEDIDA

Siguientes pasos. Ha llegado el momento de despedirse y quiero hacerlo dándote las GRACIAS por tu atención y algún consejo sobre cómo seguir aprendiendo y practicando CSS en tu carrera digital.