Skip to content
Logo de la documentación HoneyCode

9. Estilos Avanzados

Estilos Avanzados en CSS permiten crear interfaces modernas y atractivas con efectos visuales profesionales como bordes redondeados, sombras, degradados y filtros.

🔲 Bordes Redondeados (border-radius)

Section titled “🔲 Bordes Redondeados (border-radius)”

border-radius - Esquinas redondeadas

Section titled “border-radius - Esquinas redondeadas”

Crea esquinas redondeadas en elementos. Es una de las propiedades más usadas en diseño moderno.

.elemento {
  border-radius: 10px;              /* Todas las esquinas */
  border-radius: 10px 20px;         /* Superior-izq/inferior-der | Superior-der/inferior-izq */
  border-radius: 10px 20px 30px 40px; /* Cada esquina individualmente */
  border-radius: 50%;               /* Círculo perfecto */
}
/* Bordes redondeados básicos */
.card {
  border-radius: 8px;  /* Suave y moderno */
}


.button {
  border-radius: 4px;  /* Botones sutiles */
}


.badge {
  border-radius: 12px; /* Pills/badges */
}


.circle {
  border-radius: 50%;  /* Círculo perfecto */
  width: 100px;
  height: 100px;
}


/* Esquinas individuales */
.elemento {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Valores:

  • ✅ px - Píxeles fijos
  • ✅ % - Porcentaje (50% = círculo)
  • ✅ em/rem - Relativo al tamaño de fuente

🌑 Sombras (box-shadow)

Section titled “🌑 Sombras (box-shadow)”

box-shadow - Sombras en elementos

Section titled “box-shadow - Sombras en elementos”

Agrega sombras a elementos para crear profundidad y jerarquía visual.

.elemento {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* offset-x | offset-y | blur | spread | color */


  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);        /* Sombra básica */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);      /* Sombra elevada */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);  /* Sombra interna */
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);    /* Glow/resplandor */
}
.elemento {
  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.2);
  /*          ↑   ↑   ↑   ↑   ↑
              │   │   │   │   └─ Color (rgba recomendado)
              │   │   │   └───── Spread (expansión)
              │   │   └───────── Blur (desenfoque)
              │   └───────────── Offset Y (vertical)
              └───────────────── Offset X (horizontal)
  */
}


/* Múltiples sombras */
.elemento {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Sombra interna */
.elemento {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Parámetros:

  • ✅ offset-x - Desplazamiento horizontal
  • ✅ offset-y - Desplazamiento vertical
  • ✅ blur - Desenfoque (0 = nítida)
  • ✅ spread - Expansión (opcional)
  • ✅ color - Color de la sombra
  • ✅ inset - Sombra interna (opcional)

🌈 Degradados (Gradients)

Section titled “🌈 Degradados (Gradients)”

linear-gradient - Degradado lineal

Section titled “linear-gradient - Degradado lineal”

Crea transiciones suaves de color en línea recta.

.elemento {
  background: linear-gradient(to right, #3498db, #2ecc71);
  /* Dirección | Color inicial | Color final */


  background: linear-gradient(45deg, #e74c3c, #f39c12);
  background: linear-gradient(to bottom, #9b59b6, #3498db, #2ecc71);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Direcciones con palabras clave */
.elemento {
  background: linear-gradient(to right, blue, red);
  background: linear-gradient(to bottom, blue, red);
  background: linear-gradient(to top, blue, red);
  background: linear-gradient(to left, blue, red);
  background: linear-gradient(to bottom right, blue, red);
}


/* Direcciones con grados */
.elemento {
  background: linear-gradient(0deg, blue, red);    /* Arriba */
  background: linear-gradient(90deg, blue, red);   /* Derecha */
  background: linear-gradient(180deg, blue, red);  /* Abajo */
  background: linear-gradient(45deg, blue, red);   /* Diagonal */
}


/* Múltiples colores con stops */
.elemento {
  background: linear-gradient(
    to right,
    #e74c3c 0%,
    #f39c12 50%,
    #2ecc71 100%
  );
}

Características:

  • ✅ Dirección: to right, 45deg, etc.
  • ✅ Múltiples colores
  • ✅ Color stops (posiciones específicas)
  • ✅ Transparencia con rgba()

radial-gradient - Degradado radial

Section titled “radial-gradient - Degradado radial”

Crea degradados circulares o elípticos desde un punto central.

.elemento {
  background: radial-gradient(circle, #3498db, #2ecc71);
  /* Forma | Color inicial | Color final */


  background: radial-gradient(circle at center, blue, red);
  background: radial-gradient(ellipse at top, blue, red);
  background: radial-gradient(circle at 30% 40%, blue, red);
}
/* Formas */
.elemento {
  background: radial-gradient(circle, blue, red);
  background: radial-gradient(ellipse, blue, red);
}


/* Posiciones */
.elemento {
  background: radial-gradient(circle at center, blue, red);
  background: radial-gradient(circle at top left, blue, red);
  background: radial-gradient(circle at 50% 50%, blue, red);
}


/* Tamaños */
.elemento {
  background: radial-gradient(circle closest-side, blue, red);
  background: radial-gradient(circle farthest-corner, blue, red);
}

Características:

  • ✅ Forma: circle, ellipse
  • ✅ Posición: at center, at top, at 50% 50%
  • ✅ Múltiples colores
  • ✅ Efectos de spotlight

🖼️ Imágenes de Fondo (background)

Section titled “🖼️ Imágenes de Fondo (background)”

Propiedades de background completas

Section titled “Propiedades de background completas”

Control total sobre imágenes y fondos de elementos.

.elemento {
  background-image: url('imagen.jpg');
  background-size: cover;           /* cover, contain, 100px, 50% */
  background-position: center;      /* center, top, left, 50% 50% */
  background-repeat: no-repeat;     /* repeat, no-repeat, repeat-x, repeat-y */
  background-attachment: fixed;     /* scroll, fixed, local */


  /* Shorthand */
  background: url('imagen.jpg') center/cover no-repeat fixed;
}
/* background-size */
.elemento {
  background-size: cover;      /* Cubre todo el elemento */
  background-size: contain;    /* Contiene la imagen completa */
  background-size: 100px 200px; /* Ancho y alto específicos */
  background-size: 50%;        /* Porcentaje */
}


/* background-position */
.elemento {
  background-position: center;
  background-position: top left;
  background-position: 50% 50%;
  background-position: 100px 200px;
}


/* background-repeat */
.elemento {
  background-repeat: no-repeat;  /* No repetir */
  background-repeat: repeat;     /* Repetir en ambos ejes */
  background-repeat: repeat-x;   /* Solo horizontal */
  background-repeat: repeat-y;   /* Solo vertical */
}


/* background-attachment */
.elemento {
  background-attachment: scroll; /* Se mueve con scroll */
  background-attachment: fixed;  /* Fijo (parallax) */
}


/* Múltiples fondos */
.elemento {
  background:
    url('capa1.png') center/cover no-repeat,
    url('capa2.png') bottom/contain no-repeat,
    linear-gradient(to right, blue, red);
}

🎭 Filtros Visuales (filter)

Section titled “🎭 Filtros Visuales (filter)”

filter - Efectos visuales

Section titled “filter - Efectos visuales”

Aplica efectos visuales como desenfoque, escala de grises, brillo, contraste y más.

.elemento {
  filter: blur(5px);              /* Desenfoque */
  filter: grayscale(100%);        /* Escala de grises */
  filter: brightness(150%);       /* Brillo */
  filter: contrast(200%);         /* Contraste */
  filter: saturate(200%);         /* Saturación */
  filter: hue-rotate(90deg);      /* Rotación de tono */
  filter: invert(100%);           /* Invertir colores */
  filter: sepia(100%);            /* Efecto sepia */
  filter: opacity(50%);           /* Opacidad */


  /* Múltiples filtros */
  filter: blur(2px) brightness(120%) contrast(110%);
}
/* blur - Desenfoque */
.elemento {
  filter: blur(5px);  /* 0px = nítido, mayor = más borroso */
}


/* grayscale - Escala de grises */
.elemento {
  filter: grayscale(100%);  /* 0% = color, 100% = gris */
}


/* brightness - Brillo */
.elemento {
  filter: brightness(150%);  /* 100% = normal, >100% = más brillante */
}


/* contrast - Contraste */
.elemento {
  filter: contrast(200%);  /* 100% = normal, >100% = más contraste */
}


/* saturate - Saturación */
.elemento {
  filter: saturate(200%);  /* 100% = normal, 0% = gris, >100% = saturado */
}


/* hue-rotate - Rotación de color */
.elemento {
  filter: hue-rotate(90deg);  /* 0deg-360deg */
}


/* invert - Invertir colores */
.elemento {
  filter: invert(100%);  /* 0% = normal, 100% = invertido */
}


/* sepia - Efecto sepia/vintage */
.elemento {
  filter: sepia(100%);  /* 0% = normal, 100% = sepia */
}


/* drop-shadow - Sombra (como box-shadow) */
.elemento {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

🪟 Efecto Blur con Transparencia (backdrop-filter)

Section titled “🪟 Efecto Blur con Transparencia (backdrop-filter)”

backdrop-filter - Efecto de vidrio esmerilado (Glassmorphism)

Section titled “backdrop-filter - Efecto de vidrio esmerilado (Glassmorphism)”

Aplica efectos visuales al fondo detrás de un elemento, creando el popular efecto de vidrio esmerilado o “glassmorphism”.

.elemento {
  background: rgba(255, 255, 255, 0.1);  /* Fondo semi-transparente */
  backdrop-filter: blur(10px);           /* Desenfoque del fondo */
  border: 1px solid rgba(255, 255, 255, 0.2);


  /* Otros efectos de backdrop-filter */
  backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(5px) brightness(120%);
  backdrop-filter: blur(8px) contrast(90%);
}
/* backdrop-filter: blur - Desenfoque del fondo */
.glass {
  backdrop-filter: blur(10px);  /* Efecto de vidrio esmerilado */
}


/* backdrop-filter: saturate - Saturación del fondo */
.glass {
  backdrop-filter: blur(10px) saturate(180%);
}


/* backdrop-filter: brightness - Brillo del fondo */
.glass {
  backdrop-filter: blur(10px) brightness(120%);
}


/* backdrop-filter: contrast - Contraste del fondo */
.glass {
  backdrop-filter: blur(10px) contrast(90%);
}


/* Efecto glassmorphism completo */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Características:

  • ✅ Desenfoca el contenido detrás del elemento
  • ✅ Crea efecto de vidrio esmerilado
  • ✅ Se combina con transparencia (rgba)
  • ✅ Perfecto para modales, cards, navbars
  • ✅ Soporta los mismos filtros que filter

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas los estilos avanzados, puedes:

  • ✅ Crear interfaces modernas y atractivas
  • ✅ Aplicar efectos visuales profesionales
  • ✅ Diseñar componentes con profundidad y jerarquía
  • ✅ Usar degradados y filtros creativamente
🐝