Filtrar: Bases y conceptos introductorios que es conveniente conocer antes de comenzar con CSS.
Al utilizar ciertas propiedades de CSS, debemos utilizar ciertas unidades. Hay muchas y muy diversas. Veamos como utilizarlas.
El modelo de cajas es el sistema que posee CSS para establecer las bases y fundamentos que tiene cada elemento visualmente en una página. Es importante comprenderlo para saber como construir interfaces de usuario.
Los elementos de una página pueden definir un borde con criterios como color, grosor o estilo. Además, también se pueden usar imágenes, gradientes o redondear sus esquinas.
Existen muchas formas de definir un color en CSS, todas con sus ventajas y desventajas. También puedes modificar colores a partir de otros ya existentes.
En CSS, existe una forma nativa de crear variables para almacenar información reutilizable, como colores, textos, tamaños, imágenes, gradientes, etc.
En CSS es posible utilizar ciertas funciones para realizar cálculos u operaciones y no tener que utilizar la cantidad directamente.
Si necesitas utilizar imágenes de fondo en CSS, o propiedades CSS que modifiquen la forma en la que se ven las imágenes, aquí encontrarás una serie de propiedades relacionadas.
Los gradientes o degradados son colores de fondo que cambian de un color específico a otro (o varios). Se pueden crear de varias formas.
Al crear un front-end web, es necesario asegurarse de que el contenido se visualiza correctamente en los diferentes navegadores y dispositivos. Conocer las bases de esa compatibilidad es importante.
Una de las características menos comprendidas y desconocidas de CSS es la cascada, la herencia o conceptos relacionados con la especificidad CSS. Entender estos conceptos es comprender y dominar la mayor parte de CSS.
Los selectores son la forma que tiene CSS de indicar los elementos que queremos seleccionar para darle estilo. Aprende a dominar todos los que existen para tener mayor potencia al usar CSS.
Las pseudoclases son una forma de seleccionar elementos dependiendo del comportamiento especial que tienen: cuando mueves el ratón encima de un elemento, cuando un campo de formulario está seleccionado, etc.
Los pseudoelementos son elementos que no existen realmente en el código HTML de forma directa, pero que se pueden estilar desde CSS aún así.
Aunque cuando comenzamos con CSS no solemos darle importancia, existe una serie de consejos, herramientas y estrategias para mejorar la calidad de nuestro código CSS, así como su organización.
Las páginas suelen incorporar una gran parte de la misma basada en texto. Con CSS podemos definir la tipografía o fuente que vamos a utilizar en la misma, así como sus características de diseño, alineación, etc.
Para utilizar una tipografía hay que precargarla en nuestro navegador, ya que si no están cargadas, el navegador no podrá mostrarlas. Aquí explicamos las diferentes formas que tenemos de precargarlas.
Si queremos representar datos en formatos concretos o específicos, en CSS podemos darle estilo a tablas, listas o bucles con contadores de elementos.
Uno de los puntos más importantes de CSS (si no el que más) es el de colocar y distribuir los elementos en un layout (maquetar). En este capítulo aprendemos los pasos fundamentales de maquetación.
Flex es uno de los mecanismos fundamentales de maquetación para crear elementos flexibles que se distribuyen en una dimensión, permitiendo además ubicarlos de forma muy cómoda y práctica.
Los grids o cuadrículas permiten crear estructuras de dos dimensiones, donde podemos colocar elementos en filas y columnas, con diseños regulares o irregulares. Son muy versátiles y nos dan mucho potencial a la hora de maquetar.
Si necesitamos ubicar elementos en base a un marco específico, colocar elementos respecto a otros o fijar elementos en zonas específicas, los mecanismos de posicionamiento CSS son ideales.
En ciertos casos necesitamos establecer formas de interactuar con el contenido, ya sea con el ratón, mediante barras de desplazamiento, scroll u otros mecanismos.
Las sombras nos permiten dar profundidad a nuestros elementos, así como crear efectos visuales muy interesantes en textos, elementos o incluso formas específicas.
Existen ciertos efectos como los filtros o los modos de fusión, donde podemos aplicar dinámicos cambios visuales que mejoran muchísimo el apartado visual del usuario.
Mediante las máscaras y los recortes podemos establecer formas muy variadas y crear diseños menos cuadriculados y monótonos, incluso recortando y descartando regiones.
El diseño orientado para dispositivos móviles, tablets u otros dispositivos similares es muy importante hoy en día, y existen mecanismos y herramientas muy interesantes para adaptarnos a pantallas y plataformas particulares.
Las transformaciones nos permiten hacer cambios en los ejes X e Y, así como en el eje de profundidad Z. Son muy interesantes cuando necesitamos realizar tareas más allá de las dimensiones habituales de una página web tradicional.
Si te gustan las emociones fuertes o simplemente quieres prácticar para mejorar en tus habilidades de CSS, un buen ejercicio es intentar dibujar elementos reales utilizando sólo código CSS. Aquí te explico las caracerísticas de esta práctica y ejemplos que hemos realizado.
