ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

Lenguaje CSS

Introducción a CSS

Bases y conceptos introductorios que es conveniente conocer antes de comenzar con CSS.

¿Qué es CSS?

CSS son las siglas con las que se conoce a las hojas de estilo en cascada, pero... ¿Qué es CSS realmente?

easy

¿Cómo usar CSS?

Quiero añadir o modificar estilos CSS a una página web... ¿Cómo lo hago? ¿Qué ficheros debo modificar?

easy

Estructura de CSS

¿Cuál es la estructura de un archivo CSS? ¿Qué sintaxis tiene? Selectores, propiedades, valores. Veamos todo desde el principio.

easy

Minificar CSS

La minificación (minify o uglify) de un archivo CSS es una buena práctica para conseguir reducir su tamaño, eliminando los carácteres superfluos.

easy

Navegadores web

Los navegadores son un factor clave muy importante en el diseño web. No sólo por ser necesarios, sino porque hay que entender su ecosistema y como funcionan.

easy

Niveles de CSS y prefijos

Los prefijos CSS indican a los navegadores que realicen acciones que aún no están implementadas por completo. Se recomienda usar Autoprefixer.

easy

Herencia en CSS

En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.

easy

Cascada en CSS

La cascada CSS, junto a la herencia, son dos de las características más importantes de CSS (y más frustrantes si no se sabe como funcionan).

medium

Variables CSS

Las CSS Custom Properties son un concepto muy similar (pero no igual) a las variables de programación. ¡Aprende a utilizarlas!

medium

CSS Properties Guide

La gran guía «telefónica» de propiedades de CSS. ¿A quién vas a llamar si necesitas utilizar una propiedad de CSS?

Modelo de cajas

El modelo de cajas es el sistema que utiliza CSS para organizar los elementos visualmente en una página. Conviene conocerlo y comprenderlo para saber como construir interfaces de usuario.

Unidades CSS

¿Qué unidades existen en CSS? ¿Cuántas hay? Las más comunes son los píxels, aunque también existen porcentajes y otros tipos de unidades.

easy

Modelo de cajas

Para dominar CSS primero hay que comprender a la perfección el modelo de cajas de CSS. Bordes (border), relleno (padding) y márgenes (margin).

easy

Márgenes y rellenos

¿Cuáles son las diferencias entre los márgenes (margin) y el relleno (padding) en CSS? Hay que comprender el modelo de cajas de CSS.

easy

Bordes CSS

Con CSS podemos modificar los bordes de los elementos de un documento HTML. Desde su color o tamaño hasta redondearlos o usar imágenes expandibles.

easy

Esquinas redondeadas

¿Quieres redondear las esquinas de un elemento con CSS? Para ello puedes usar la propiedad border-radius, la cuál explicamos en este artículo.

easy

Propiedades lógicas CSS

En CSS se ha creado una nueva generación de propiedades lógicas para definir el modelo de cajas. ¡Vamos a aprenderlas!

medium

Bordes con imágenes

Existe un sistema para crear bordes con imágenes, expandibles a partir de una imagen de base. En este artículo te explicamos como.

medium

Funciones CSS

En CSS existen expresiones como calc(), min(), max() o clamp() que permiten realizan operaciones interesantes con unidades de forma muy cómoda.

medium

Colores, fondos e imágenes

Colores CSS

Propiedades relacionadas con los colores y los fondos que se pueden aplicar en una página web.

easy

Fondos en CSS

Existen varias propiedades en CSS que permiten modificar los fondos, desde colores sólidos hasta imágenes con su tamaño o posición.

easy

Gradientes CSS

Con CSS se pueden crear fondos con degradados (o gradientes de color) partiendo de un color a otro (u otros).

easy

Imágenes y Objetos

En CSS es posible aplicar ciertas modificaciones sobre imágenes u objetos concretos, como modo de relleno, renderización o proporción de aspecto.

easy

Selectores CSS

Selectores CSS básicos

CSS es muy potente porque permite seleccionar elementos HTML de una forma muy práctica. Los IDs y las clases son el método más utilizado.

easy

Selectores CSS avanzados

Los selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.

medium

Pseudoclases CSS

Las pseudoclases CSS permiten seleccionar elementos dependiendo de su comportamiento en el navegador. La más conocida es :hover.

easy

Pseudoclases CSS avanzadas

CSS permite utilizar pseudoclases avanzadas para seleccionar elementos dependiendo de su estructura o posición, llegando a contabilizarlos.

medium

Pseudoelementos CSS

Los pseudoelementos CSS permiten aplicar estilos que añaden elementos (o estilos) que realmente no existen originalmente en el documento HTML.

medium

Atributos CSS

Mediante los atributos CSS se permite aplicar estilos a elementos HTML dependiendo del contenido de sus atributos HTML.

medium

Fuentes y tipografías

Tipografías CSS

Desde CSS se pueden controlar las fuentes (tipografías) que se van a utilizar en una página web y sus características (estilo, interlineado, interletraje...)

easy

Tipografías externas

En CSS es posible descargar tipografías no instaladas en el dispositivo del usuario de forma transparente, utilizando la regla @font-face o Google Fonts.

easy

Fuentes variables CSS

Las fuentes variables nos permiten tener mayor flexibilidad y rendimiento a la hora de trabajar con diferentes estilos o pesos.

easy

Textos y alineaciones

CSS incorpora gran cantidad de propiedades para modificar el comportamiento de los textos de una página web.

easy

Propiedades avanzadas

Algunas propiedades avanzadas para gestionar el aspecto de una tipografía o el modo de aparición de la misma.

medium

Características personalizadas

Es posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde CSS.

advanced

Representación de datos

Tablas CSS

Al margen de las propiedades de CSS comunes, también existen algunas propiedades orientadas a tablas HTML.

easy

Listas CSS

Con CSS se puede cambiar el comportamiento de las listas HTML para que muestren otra numeración, o un espacio de separación diferente.

easy

Maquetación y colocación

Tipos de elementos

Todos los elementos HTML tienen un tipo de representación. Con display en CSS podemos cambiarlos por otros tipos (inline, block...).

easy

La propiedad position

Uno de los temas más complejos de CSS es aprender a posicionar elementos. El posicionamiento relativo o absoluto es un buen punto de partida para aprender.

medium

Desplazamientos

Mediante la propiedad float de CSS se pueden desplazar elementos hacia una dirección u otra.

easy

Flexbox CSS

Flexbox es un módulo de CSS para crear diseños flexibles con un mecanismo novedoso que deja atrás los antiguos y problemáticos sistemas tradicionales de CSS.

medium

Grid CSS (Cuadrículas)

Grid CSS permite dejar atrás la problemática forma de crear diseños en CSS, aportando un modelo de cuadrículas o rejillas muy personalizable y flexible.

medium

Interacciones

Contornos

CSS permite modificar ciertos detalles de interacción del usuario como contornos de elementos o el cursor del ratón.

easy

Cursor del ratón

Es posible modificar ciertos detalles del ratón del usuario y su interacción con una página web mediante CSS.

easy

Efectos

Sombras CSS

Con CSS se pueden aplicar dos tipos de sombras: sombras a elementos HTML y sombras a textos. Con ellas podemos conseguir un efecto visual más elegante a nuestras páginas.

easy

Filtros CSS

Con CSS podemos aplicar filtros simples en elementos HTML, imágenes o videos para cambiar el aspecto como lo hacemos con filtros de Photoshop: sepia, blanco y negro, contraste, brillo...

easy

Modos de fusión CSS

Los modos de fusión (o blend modes) nos permiten establecer combinaciones de colores entre varios elementos y fusionarlos.

easy

La propiedad clip-path

La propiedad clip-path de CSS nos permite establecer recortes de partes concretas de nuestra página con formas concretas o personalizadas con CSS o SVG.

medium

Responsive Web Design

¿Qué es Responsive Design?

Las siglas RWD significan Responsive Web Design y es un tipo de diseño que tiene en cuenta la adaptación a dispositivos móviles o tablets.

easy

Bases del Responsive Design

Existen una serie de bases que hay que conocer antes de comenzar a trabajar en diseños responsive. Aquí te las cuento.

easy

Media Queries

CSS dispone de un sistema de media queries para aplicar estilos dependiendo de si estamos en móvil, tablet o en un dispositivo de escritorio. Aprende como funciona.

medium

Medios impresos

Es posible crear documentos de impresión CSS para aplicarlos a documentos de formato físico o páginas que van a ser impresas.

easy

Medios paginados

CSS permite aplicar estilos a documentos destinados a impresión, permitiendo administrar su método de paginación.

medium

Preferencias de usuario

Dentro del apartado de media queries, podemos especificar ciertas preferencias de usuario, para adaptarnos a las elecciones particulares que han elegido.

easy

Animaciones CSS

Transiciones CSS

Mediante las transiciones CSS podemos suavizar cambios repentinos de estilo para que se realicen de forma gradual y suave.

easy

Animaciones CSS

Con CSS podemos realizar animaciones de forma muy sencilla, ofreciéndonos grandes posibilidades y la flexibilidad de utilizar propiedades para cambiar su comportamiento.

medium

Transformaciones CSS

CSS ofrece un conjunto de propiedades para realizar transformaciones 2D y 3D, permitiendo trabajar gráficos y combinarlo con animaciones o transiciones.

medium