Módulo Educativo · Iconografía CSS

Actividades prácticas · Formación técnica · Aprendizaje interactivo

1. Introducción al módulo

Este módulo está diseñado para estudiantes que desean aprender a crear iconos CSS mediante ejercicios guiados. Cada actividad incluye una explicación y un objetivo.

2. Actividad 1 · Crear un icono básico

Objetivo: comprender width, height y border-radius.

/* Actividad 1 */
.icon-ejercicio-1 {
    width: 100px;
    height: 60px;
    background: #38bdf8;
    border-radius: 12px;
}

3. Actividad 2 · Añadir pseudo-elementos

Objetivo: crear capas adicionales sin modificar el HTML.

Perfil
/* Actividad 2 */
.icon-ejercicio-2 {
    position: relative;
    padding: 12px 24px;
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 999px;
}
.icon-ejercicio-2::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    transform: translateY(-50%);
}

4. Actividad 3 · Crear un icono científico

Objetivo: combinar capas y geometrías.

/* Actividad 3 */
.icon-ejercicio-3 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #38bdf8;
    position: relative;
}
.icon-ejercicio-3::before,
.icon-ejercicio-3::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #38bdf8;
    top: 0;
    left: 0;
}
.icon-ejercicio-3::before { transform: rotate(45deg); }
.icon-ejercicio-3::after { transform: rotate(-45deg); }

5. Recursos adicionales

Accede a otros módulos del sistema: