Ejemplo CSS
- Página anterior Elemento de cuadrícula CSS
- Página siguiente Prueba CSS
Selectores de CSS
Uso de CSS
Comentarios de CSS
Colores de CSS
Fondo de CSS
- Establecer el color de fondo de la página
- Establecer el color de fondo de diferentes elementos
- Establecer la imagen como fondo de la página
- Cómo repetir la imagen de fondo solo en la dirección horizontal
- Cómo posicionar la imagen de fondo
- Imagen de fondo fija (esta imagen no se desplazará con el resto de la página)
- Todos los atributos de fondo en una declaración
- Ejemplo avanzado de fondo
Borde de CSS
- Establecer el ancho de todos los bordes
- Establecer el ancho del borde superior
- Establecer el ancho del borde inferior
- Establecer el ancho del borde izquierdo
- Establecer el ancho del borde derecho
- Establecer el estilo de todos los bordes
- Establecer el estilo del borde superior
- Establecer el estilo del borde inferior
- Establecer el estilo del borde izquierdo
- Establecer el estilo del borde derecho
- Establecer el color de todos los bordes
- Establecer el color del borde superior
- Establecer el color del borde inferior
- Establecer el color del borde izquierdo
- Establecer el color del borde derecho
- Todos los atributos de borde en una declaración
- Agregar bordes redondeados al elemento
- Establecer diferentes bordes para cada lado
- Todos los atributos de borde superior en una declaración
- Todos los atributos de borde inferior en una declaración
- Todos los atributos de borde izquierdo en una declaración
- Todos los atributos de borde derecho en una declaración
Margen de CSS
- Establecer diferentes márgenes externos para los lados del elemento
- Usar el atributo margin abreviado con cuatro valores
- Usar el atributo margin abreviado con tres valores
- Usar el atributo margin abreviado con dos valores
- Usar el atributo margin abreviado con un valor
- Establecer el margen externo en auto para centrar los elementos dentro de su contenedor
- Hacer que el margen externo izquierdo herede del elemento padre
- Fusión de márgenes externos
Rejilla interna de CSS
- Establecer diferentes rellenos internos para los lados del elemento
- Usar relleno interno abreviado con cuatro valores
- Usar relleno interno abreviado con tres valores
- Usar relleno interno abreviado con dos valores
- Usar relleno interno abreviado con un valor
- Relleno interno y anchura del elemento (no establecer box-sizing)
- Relleno interno y anchura del elemento (establecer box-sizing)
- Establecer el relleno interno izquierdo del elemento
- Establecer el relleno interno derecho del elemento
- Establecer el relleno interno superior del elemento
- Establecer el relleno interno inferior del elemento
Altura/Anchura CSS
- Establecer la altura y anchura del elemento
- Establecer el ancho máximo del elemento
- Establecer la altura y anchura de diferentes elementos
- Usar por ciento para establecer la altura y anchura de la imagen
- Establecer el ancho mínimo y máximo del elemento
- Establecer la altura mínima y máxima del elemento
Modelo de caja CSS
Contorno de CSS
Texto de CSS
- Configurar el color del texto para diferentes elementos
- Alinear el texto
- Eliminar la línea debajo del enlace
- Decorar el texto
- Controlar la capitalización de las letras en el texto
- Indentar el texto
- Definir el espacio entre caracteres
- Definir el espacio entre líneas
- Configurar la dirección del texto del elemento
- Aumentar el espaciado entre letras
- Definir la sombra de texto del elemento
- Deshabilitar el salto de línea de texto en el elemento
- Alinear verticalmente la imagen dentro del texto
Fuente de CSS
- Configurar la fuente del texto
- Configurar el tamaño de la fuente
- Configurar el tamaño de la fuente en px
- Configurar el tamaño de la fuente en em
- Configurar el tamaño de la fuente en porcentajes y em
- Configurar el estilo de la fuente
- Configurar la variante de la fuente
- Configurar el grosor de la fuente
- Todos los atributos de fuente en una declaración
Iconos de CSS
Enlaces de CSS
- Agregar diferentes colores a los enlaces visitados/no visitados
- Usar text-decoration en los enlaces
- Definir el color de fondo para los enlaces
- Agregar otros estilos a los enlaces de hipertexto
- Diferentes tipos de punteros
- Avanzado - Crear un cuadro de enlace
- Avanzado - Crear un cuadro de enlace con borde
Listas de CSS
Tablas de CSS
- Definir bordes negros para table, th y td
- Usar border-collapse
- Borde único alrededor de la tabla
- Definir el ancho y la altura de la tabla
- Configurar el alineamiento horizontal del contenido (text-align)
- Configurar el alineamiento vertical del contenido
- Definir el relleno interno de th y td
- Separador horizontal
- Tabla con悬停
- Tabla en barra
- Definir el color del borde de la tabla
- Configurar la posición del título de la tabla
- Tabla responsive
- Crear tablas atractivas
Visualización CSS
Alineación CSS
- Ubicar el elemento en relación con la ventana del navegador
- Ubicar el elemento en relación con su posición normal
- Ubicación absoluta del elemento
- Ajuste sticky
- Elementos superpuestos
- Configurar la forma del elemento
- Configurar el borde superior de la imagen utilizando valores de píxeles
- Configurar el borde inferior de la imagen utilizando valores de píxeles
- Establecer el margen izquierdo de la imagen con valores en píxeles
- Establecer el margen derecho de la imagen con valores en píxeles
- Posicionar texto de imagen (esquina superior izquierda)
- Posicionar texto de imagen (esquina superior derecha)
- Posicionar texto de imagen (esquina inferior izquierda)
- Posicionar texto de imagen (esquina inferior derecha)
- Posicionar texto de imagen (centrado)
Desbordamiento CSS
- Uso de overflow: visible - El desbordamiento no se recorta. Se renderiza fuera del cuadro del elemento.
- Uso de overflow: hidden - El desbordamiento se recorta, y el contenido restante se oculta.
- Uso de overflow: scroll - El desbordamiento se recorta, pero se agrega una barra de desplazamiento para ver el contenido restante.
- Uso de overflow: auto - Si se recortó el desbordamiento, se debe agregar una barra de desplazamiento para ver el contenido restante.
- Uso de overflow-x y overflow-y
Flotación CSS
- Uso simple del atributo float
- Imagen con borde y margen flotante a la derecha del párrafo
- Imagen con título flotante a la derecha
- Letra inicial del párrafo flotante a la izquierda
- Cierre de flotación (usando atributo clear)
- Cierre de flotación (usando hack de clearfix)
- Creación de cuadros flotantes
- Creación de imágenes alineadas
- Creación de cuadros de altura igual (a través de flexbox)
- Creación de menú horizontal
- Ejemplo de creación de diseño web
CSS Inline-block
Elementos alineados CSS
- Centrado mediante márgenes
- Centrado de texto en el medio
- Centrado de imagen en el medio
- Alineación izquierda/derecha mediante position
- Alineación izquierda/derecha mediante position - Solución de compatibilidad entre navegadores
- Alineación izquierda/derecha mediante float
- Alineación izquierda/derecha mediante float - Solución de compatibilidad entre navegadores
- Centrado vertical mediante padding
- Centrado vertical y horizontal
- Centrado vertical mediante line-height
- Centrado vertical y horizontal mediante position
Combinador CSS
Pseudoclases de CSS
- Agregar colores diferentes a los enlaces
- Agregar otros estilos a los enlaces
- Uso de :focus
- :first-child - Coincide con el primer elemento p
- :first-child - Coincide con el primer elemento i dentro de cualquier elemento p
- :first-child - Coincide con todos los elementos i del primer hijo del primer elemento p
- Usar :lang
Pseudoelementos de CSS
Generación de contenido CSS
Opacidad de CSS
Barra de navegación de CSS
- Barra de navegación vertical con estilo completo
- Barra de navegación horizontal con estilo completo
- Barra de navegación vertical fija de altura completa
- Barra de navegación horizontal fija
- Barra de navegación adhesiva (no funciona en IE o Edge 15 y versiones anteriores)
- Barra de navegación superior responsiva
- Barra de navegación lateral responsiva
Lista desplegable CSS
Biblioteca de imágenes de CSS
Image sprite de CSS
Selector de atributo de CSS
- Seleccionar todos los elementos <a> con el atributo target
- Seleccionar todos los elementos <a> con el atributo target="_blank"
- Seleccionar todos los elementos con el atributo title que contiene una lista de palabras separadas por espacios, una de las cuales es "flower"
- Seleccionar todos los elementos con el valor de atributo class que comienza con "top" (debe ser una palabra completa)
- Seleccionar todos los elementos con el valor de atributo class que comienza con "top" (no puede ser una palabra completa)
- Seleccionar todos los elementos con el valor de atributo class que termina con "test"
- Seleccionar todos los elementos con el valor de atributo class que contiene "te"
Formularios de CSS
- Campo de entrada de ancho completo
- Campo de entrada relleno
- Campo de entrada con borde
- Campo de entrada con borde inferior
- Campo de entrada con color
- Campo de entrada con enfoque
- Campo de entrada con enfoque 2
- Campo de entrada con icono
- Caja de búsqueda con efecto de animación
- Establecer el estilo del cuadro de texto
- Establecer el estilo del menú desplegable
- Establecer el estilo del botón
- Formulario responsivo
Contador de CSS
Diseño de sitio web de CSS
Corners de CSS
Image de borde de CSS
Fondo de CSS
- Agregar múltiples imágenes de fondo al elemento
- Definir el tamaño de la imagen de fondo
- Uso de "contain" y "cover" para escalar la imagen de fondo
- Definir el tamaño de la imagen de fondo
- Imagen de fondo de tamaño completo (cubriendo completamente el área de contenido)
- Uso de background-origin para definir la posición de colocación de la imagen de fondo
- Uso de background-clip para definir el área de dibujo del fondo
Gradiente de CSS
- Degradado lineal - De arriba a abajo
- Degradado lineal - De izquierda a derecha
- Degradado lineal - Diagonal
- Degradado lineal - Ángulo específico
- Degradado lineal - Varios marcadores de color
- Degradado lineal - Arcoíris + texto
- Degradado lineal - Transparencia
- Degradado lineal - Degradado lineal repetido
- Degradado radial - Marcadores de color distribuidos uniformemente
- Degradado radial - Tamaños de píxeles diferentes de los marcadores de color
- Degradado radial - Configuración de la forma
- Degradado radial - Tamaños de palabras clave diferentes
- Degradado radial - Degradado radial repetido
Efecto de sombra CSS
- Efecto de sombra simple
- Agregar efectos de color a la sombra
- Agregar efectos de desvanecimiento a la sombra
- Texto en blanco con sombra en negro
- Sombra de neón en rojo
- Sombra de neón en rojo y azul
- Texto en blanco con sombras en negro, azul y azul oscuro
- Agregar un box-shadow simple al elemento
- Agregar efectos de color a box-shadow
- Agregar efectos de color y desvanecimiento a box-shadow
- Crear un efecto similar a una tarjeta de papel (texto)
- Crear un efecto similar a una tarjeta de papel (imagen Polaroid)
Efectos de texto de CSS
- Especificar cómo se debe presentar al usuario el contenido oculto sobrante
- ¿Cómo mostrar el contenido sobrante cuando el ratón se coloca sobre el elemento?
- Permitir que el texto largo se rompa y se desplace a la siguiente línea
- Definición de las reglas de salto de línea
- Definición del modo de escritura del texto (escribir de izquierda a derecha o de derecha a izquierda)
Fuente web CSS
Transformaciones 2D CSS
- translate() - Eliminación del elemento desde la posición actual
- rotate() - Rotación del elemento en sentido horario
- rotate() - Rotación del elemento en sentido contrario a las agujas del reloj
- scale() - Aumentar el elemento
- scale() - Reducir el elemento
- skewX() - Incline el elemento a lo largo del eje X
- skewY() - Incline el elemento a lo largo del eje Y
- skew() - Incline el elemento a lo largo de los ejes X e Y
- matrix() - Rotar, escalar, mover y inclinar el elemento
Transformaciones 3D CSS
Transiciones CSS
- Transición - Cambiar el ancho de un elemento
- Transición - Cambiar el ancho y la altura de un elemento
- Especificar diferentes curvas de velocidad para la transición
- Especificar un retraso para la transición
- Agregar transformación a la transición
- Especificar todos los atributos de transición en una propiedad abreviada
Animaciones CSS
- Enlazar una animación a un elemento
- Animación - Cambiar el color de fondo de un elemento
- Animación - Cambiar el color de fondo y la posición de un elemento
- Animación con retraso
- Ejecutar tres veces antes de detener la animación
- Animación perpetua
- Animación desde el lado opuesto
- Animación alternada
- Curva de velocidad de animación
- Atributo abreviado de animación
Herramientas de consejos CSS
Imagen con estilo CSS
- Imagen con esquinas redondas
- Imagen circular
- Miniatura
- Miniatura como enlace
- Imagen responsive
- Texto de imagen (esquina superior izquierda)
- Texto de imagen (esquina superior derecha)
- Texto de imagen (esquina inferior izquierda)
- Texto de imagen (esquina superior derecha)
- Texto de imagen (centrado)
- Imagen Polaroid
- Filtro de imagen en escala de grises
- Avanzado - Imagen modal implementada mediante CSS y JavaScript
Object-fit CSS
Botones CSS
- Botón CSS básico
- Color del botón
- Tamaño del botón
- Botón con esquinas redondas
- Borde del botón con color
- Botón suspendido
- Botón con sombra
- Botón desactivado
- Ancho del botón
- Grupo de botones
- Grupo de botones con borde
- Botones con animación (efecto de悬停)
- Botones con animación (efecto de pulsación)
- Botones con animación (efecto de onda)
Paginación CSS
- Paginación simple
- Paginación activa y suspendida
- Paginación activa con esquinas redondas y suspendida
- Efecto de transición suspendida
- Paginación con borde
- Paginación con esquinas redondas y borde
- Paginación con enlaces separados por espacios en blanco
- Tamaño de la paginación
- Paginación centrada
- Pan de navegación
Multicol CSS
- Crear multicolumnas
- Especificar el espacio entre columnas
- Especificar el estilo de la regla entre columnas
- Especificar el ancho de la regla entre columnas
- Especificar el color de la regla entre columnas
- Especificar el ancho, estilo y color de las reglas entre columnas
- Especificar cuántas columnas debe abarcar el elemento
- Especificar el ancho óptimo sugerido para las columnas
Interfaz de usuario CSS
Variables CSS
Box Sizing CSS
CSS Contenedor flexible
- Contenedor flexible con tres elementos flexibles
- Contenedor flexible con tres elementos flexibles - dirección rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Ordenar elementos flexibles
- Margin-right:auto;
- Margin:auto; = centrado perfecto
- Establecer align-self en el elemento flexible
- Especificar la longitud del elemento flexible, en relación con el resto del elemento flexible
- Crear una biblioteca de imágenes responsive usando el contenedor flexible
- Crear un sitio web responsive usando el contenedor flexible
Consultas de medios CSS
Consultas de medios CSS - Más ejemplos
- Establecer diferentes colores de fondo según el ancho de la pantalla
- Menú de navegación responsive
- Columnas responsivas usando flotación
- Columnas responsivas usando Flexbox
- Ocultar elementos a través de consultas de medios
- Tamaño de fuente responsive
- Biblioteca de imágenes responsive
- Sitio web responsive
- Cambiar el diseño de página según la dirección del navegador
- Ancho mínimo al máximo
Diseño de web responsive CSS
Cuadrícula CSS
- Página anterior Elemento de cuadrícula CSS
- Página siguiente Prueba CSS
