Inicio rápido con CSS
Principiante
En este curso, intentarás comprender los conceptos básicos de CSS y cómo usarlos para dar estilo a tus páginas web. Al final de este curso, podrás crear una página web sencilla con CSS.
cssweb-development
💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí
- Introducción
- Programa
Comienza con la Casa de la Mascota
Fundamentos de CSS
Diseño y Posicionamiento
Técnica Clearfix en CSS
Técnicas de centrado con Flexbox responsivo
Dominio del diseño de cuadrícula centrada
Centrar elementos vertical y horizontalmente
Centrado con Display Table
Hijos Distribuidos Igualmente
Creando diseños de mosaicos responsivos
Fundamentos del Estilado con CSS
Relación de aspecto del contenedor reactivo con CSS
Relación constante de ancho a altura
Ajustar una imagen dentro de un contenedor
Lista con Encabezados de Sección Pegajosos
Diseño adaptable con barra lateral
Ocultación de elementos fuera de pantalla accesibles
Estilización de elementos en pantalla completa con CSS
Texto y Tipografía
Truncar texto con desbordamiento CSS
Recortar texto multilínea
Comillas de cita con estilo
Creando efectos de texto grabado con CSS
Tipografía fluida reactiva con CSS
Crear texto con degradado con CSS
Selección de texto personalizada
Técnica de Drop Cap Elegante
Truncar texto de varias líneas
Subrayado de texto bonito
Deshabilitar la selección de contenido con CSS
Contadores de listas anidadas con CSS
Efectos Visuales y Patrones
Guía para Principiantes en los Fundamentos de CSS
Técnicas de Estilado CSS para el Desarrollo Web
Borde con triángulo superior
Patrón de fondo de tablero de ajedrez
Patrón de Fondo de Rayas
Patrón de fondo de puntos de lunares
Patrón de fondo en zigzag
Crear Separadores de Formas con CSS
Creación de sombras dinámicas con CSS
Degradado de desplazamiento con desbordamiento
Ocultar barras de desplazamiento
Personalizar los estilos de la barra de desplazamiento con CSS
Superposición de texto en imágenes
Lista con rayas de cebra
Efecto CSS Sibling Fade
Fundamentos de CSS para páginas web visualmente atractivas
Creando diseños web visualmente atractivos
Mosaico de imágenes responsivo
Interacciones y Animaciones Avanzadas
Crear un menú emergente interactivo con CSS
Desplazamiento horizontal con 'Snap'
Deslizamiento vertical con ajuste automático
Barra de progreso de desplazamiento (Scroll Progress Bar)
Mejora de la Interactividad de los Formularios con CSS Focus-Within
Mostrar contenido adicional al pasar el cursor
Animación de relleno del botón
Animación de crecimiento de botón
Animación de contracción de botón
Creando una animación del cargador con efecto de pulso en CSS
Técnicas de CSS para Diseños Visualmente Atractivos
Animación de Acercamiento y Alejamiento
Animación de borde de botón
Animación de caja con sombra al pasar el cursor
Rotación de imagen al pasar el cursor
Transición Suave de Alturas Dinámicas
Transformación en perspectiva al pasar el cursor
Fundamentos de CSS para el Diseño Web
Efecto de enlace de onda al pasar el cursor
Diseño web responsivo con CSS
Animación CSS Escalonada para Elementos de Lista
Crear un interruptor con conmutación con CSS
Galería de imágenes con desplazamiento vertical
Tarjeta con recorte de imagen
Animación de balanceo del botón
Crear una tarjeta giratoria con CSS
Galería de imágenes con desplazamiento horizontal
Animación de subrayado al pasar el cursor
Menú al pasar el cursor sobre una imagen
Efecto de enfoque y de pasar el cursor en los elementos de la lista de navegación
Botón de radio personalizado
Seguimiento de Gradiente del Cursor del Mouse
Crear el efecto de máquina de escribir con HTML, CSS y JavaScript
Lista con títulos de sección flotantes
Cargador de animación CSS rebotante
Cubo 3D en Rotación
Superposición de imágenes al pasar el cursor por encima
Botones de compartición social animados con CSS
Estilización de casillas de verificación animadas con CSS
Diseño reactivo de mampostería con CSS
Imagen con texto superpuesto
Sacudida en entrada no válida
Alternativa para imágenes que no se cargan
Entrada con prefijo
Ocultar elementos vacíos
Dar estilo a enlaces sin texto
Profesor
Labby
Labby is the LabEx teacher.
Compartir en Google Classroom
Únete a Nuestro Discord y Aprende Juntos
Únete AhoraReseñas de Usuarios
" amazing lab session. got heavy knowlage through this session"
— Saman Ruhunage
" I never understood how to read the permission of the files etc, now i can truly understand these step by step guides are awesome."
— reproduce6307
Recomendado Para Ti

