17/06/2007
La inmensidad del cosmos, con sus nebulosas arremolinadas y estrellas parpadeantes, ha cautivado a la humanidad desde siempre. No es de extrañar que esta estética cósmica sea una de las favoritas para fondos de pantalla en ordenadores y móviles, con colecciones que superan los 50 diseños de galaxias en tonos azules y púrpuras. Pero, ¿y si pudieras ir un paso más allá? ¿Y si en lugar de usar una imagen estática, pudieras construir tu propio rincón del universo directamente en tu página web? En este artículo, te guiaremos a través de un viaje fascinante para crear un fondo de galaxia dinámico y hermoso utilizando únicamente el poder de HTML y CSS. Olvídate de pesadas imágenes de fondo y prepárate para pintar tu propio cielo estrellado con código.
¿Por qué Crear un Fondo de Galaxia con Código?
Antes de sumergirnos en el código, podrías preguntarte: ¿por qué no usar simplemente una imagen de alta resolución? Si bien las imágenes son una opción válida, crear tu fondo con CSS ofrece ventajas únicas:
- Rendimiento: Un fondo hecho con CSS puede ser significativamente más ligero que un archivo de imagen grande, lo que se traduce en tiempos de carga más rápidos para tu sitio web.
- Escalabilidad: Al estar generado por código, tu fondo se verá nítido en cualquier tamaño de pantalla, desde un móvil pequeño hasta un monitor 4K, sin pixelarse.
- Personalización: Tienes control absoluto sobre cada estrella. Puedes cambiar colores, tamaños, posiciones e incluso añadir animaciones con facilidad, algo imposible con una imagen estática.
- Aprendizaje: Es un proyecto excelente para comprender a fondo una de las propiedades más versátiles y potentes de CSS:
box-shadow.
Los Ingredientes Cósmicos: Propiedades CSS Esenciales
Para construir nuestra galaxia, no necesitaremos un telescopio, sino un buen entendimiento de algunas propiedades CSS clave. Estas serán nuestras herramientas para dar forma a las estrellas y al vacío del espacio.
La Estructura HTML: Un Lienzo en Blanco
La parte de HTML es sorprendentemente simple. Todo lo que necesitamos es un único elemento, como un <div>, que actuará como nuestro lienzo. Sobre este pequeño elemento, aplicaremos toda la magia de CSS para generar el campo de estrellas.
<!DOCTYPE html> <html> <head> <title>Mi Galaxia CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="estrellas"></div> </body> </html>La Magia del CSS: Pintando el Universo
Aquí es donde ocurre la verdadera creación. Utilizaremos varias propiedades para dar vida a nuestro fondo.
background-color: Con esta propiedad, estableceremos el color del profundo y oscuro espacio. Un negro o un azul muy oscuro es el punto de partida perfecto.heightywidth: Definirán el tamaño de nuestro elemento<div>inicial. Curiosamente, este elemento puede ser muy pequeño, ¡incluso de 1x1 píxel!border-radius: Para que nuestras estrellas sean circulares y no cuadrados, usaremosborder-radius: 50%;. Esto convierte cualquier cuadrado en un círculo perfecto.box-shadow: Esta es la propiedad estrella de nuestro proyecto, nunca mejor dicho. Normalmente se usa para añadir una única sombra a un elemento, pero su verdadero poder reside en que puede aceptar múltiples sombras separadas por comas. Cada "sombra" puede tener su propio desplazamiento (posición X e Y), desenfoque, tamaño y color. ¡Usaremos cada sombra para representar una estrella en nuestro cielo!
Construyendo la Galaxia: El Código Completo
Ahora, unamos todo. Crearemos un fondo negro para el body y luego usaremos nuestro <div> con la clase .estrellas para generar todo el campo estelar a través de la propiedad box-shadow.
Este es el código CSS que lo hace posible:
body { background-color: black; overflow: hidden; /* Evita barras de scroll innecesarias */ } .estrellas { top: 50%; left: 50%; height: 2px; width: 2px; background-color: transparent; /* El elemento en sí es invisible */ border-radius: 50%; box-shadow: 34em 54em 3px 4px red, 38vw -4vh 2px 5px lightgreen, -20vw -148vh 8px 4px green, -39vw 38vh 4px 10px pink, -42vw -11vh 4px 13px green, 12vw 15vh 3px 3px grey, 42vw 6vh 3px 2px yellow, -8vw 9vh 0px 2px blue, 34vw -38vh 1px 0px red, -17vw 45vh 3px 1px lightgreen, 22vw -36vh 3px 10px red, -42vw 1vh 1px 0px yellow, 42vw -26vh 3px 10px purple, 36vh 5px 10px red; }Analicemos la propiedad box-shadow. Cada línea separada por una coma es una estrella. Por ejemplo, la primera línea 34em 54em 3px 4px red significa:
- 34em: Desplazamiento horizontal (eje X).
- 54em: Desplazamiento vertical (eje Y).
- 3px: Radio de desenfoque (blur). Un valor más alto crea una estrella más difusa.
- 4px: Radio de expansión (spread). Aumenta el tamaño de la sombra.
- red: El color de la estrella.
Al combinar docenas o incluso cientos de estas declaraciones, podemos poblar nuestro lienzo con un campo estelar rico y variado, utilizando diferentes unidades como em, vw (viewport width) y vh (viewport height) para una distribución más aleatoria y adaptable.
La Paleta de Colores del Cosmos
El color es fundamental para definir la atmósfera de tu galaxia. Puedes optar por un realismo con blancos y amarillos pálidos, o dejar volar tu imaginación con nebulosas de colores vibrantes. Un color muy popular y evocador es el "Blue Galaxy". A continuación, te mostramos sus códigos para que puedas usarlo en tus creaciones.
| Sistema de Color | Código | Descripción |
|---|---|---|
| HEX | #003697 | El código hexadecimal, ideal para usar directamente en CSS. |
| RGB | (0, 54, 151) | Valores de Rojo, Verde y Azul (de 0 a 255). |
| CMYK | (100, 64, 0, 41) | Valores para impresión: Cian, Magenta, Amarillo y Negro. |
| HSB | (219°, 100%, 59%) | Valores de Tono, Saturación y Brillo. |
No dudes en experimentar. Prueba a cambiar el background-color a #003697 y ajusta los colores de las estrellas en box-shadow para que contrasten. ¡Las posibilidades son infinitas!
Preguntas Frecuentes (FAQ)
¿Cómo puedo añadir más estrellas?
Es muy sencillo. Simplemente añade una coma (,) al final de la última declaración de sombra en la propiedad box-shadow y agrega una nueva línea con los valores para tu nueva estrella. Puedes copiar y pegar una existente y modificar sus valores de posición, tamaño y color.
¿Es posible animar este fondo de galaxia?
¡Absolutamente! Puedes usar animaciones CSS (@keyframes) para cambiar sutilmente la posición de las sombras o su opacidad, creando un efecto de parpadeo o de movimiento lento a través del espacio. Sin embargo, ten en cuenta que animar muchas sombras de caja puede ser intensivo para el navegador y afectar al rendimiento.
¿Este método es adaptable a dispositivos móviles (responsive)?
Sí, especialmente si utilizas unidades relativas como vw y vh para posicionar las estrellas. Estas unidades se basan en el tamaño de la ventana del navegador, por lo que las estrellas se redistribuirán automáticamente a medida que la pantalla cambie de tamaño. Para un control total, siempre puedes usar media queries.
¿Afecta mucho al rendimiento de la página?
Depende de la cantidad de estrellas (sombras) que generes. Unas pocas docenas no suponen un problema, pero si intentas crear miles de estrellas, el navegador tendrá que calcular y renderizar cada una de ellas, lo que podría ralentizar la página, especialmente en dispositivos menos potentes. La clave es encontrar un equilibrio entre la densidad visual y el rendimiento.
Si quieres conocer otros artículos parecidos a Crea un Fondo de Galaxia con HTML y CSS puedes visitar la categoría Juegos.