En este artículo, veremos cómo crear el fondo de la galaxia usando HTML y CSS, además de conocer las propiedades básicas de CSS utilizadas y lo entenderemos a través del ejemplo. Un fondo de galaxia significa un pequeño grupo de círculos que tienen diferentes tamaños con diferentes tonos y un fondo oscuro. Esta tarea se puede lograr utilizando las siguientes propiedades de CSS:
- color de fondo : esta propiedad se utiliza para implementar el color de fondo negro en el elemento del cuerpo. El fondo cubre el tamaño total del elemento con relleno y borde pero excluyendo el margen.
- border-radius : esta propiedad se usa para redondear las esquinas de los bordes exteriores de un elemento. Aquí, hemos usado esta propiedad para crear el símbolo circular en forma de estrella.
- box-shadow : esta propiedad se usa para dar un efecto de sombra a los marcos de un elemento. Los efectos múltiples se pueden aplicar al marco del elemento que está separado por la coma. Aquí, hemos usado esta propiedad para agregar el efecto de sombra al símbolo circular en forma de estrella.
- altura : esta propiedad se utiliza para establecer la altura del elemento. Aquí, hemos usado esta propiedad para agregar altura al símbolo circular en forma de estrella.
- ancho : esta propiedad se utiliza para establecer el ancho del elemento.
Enfoque: para crear el fondo de la galaxia, definiremos un elemento <div> y una imagen, además de tener una clase como .gfg que contendrá las propiedades de estilo requeridas anteriores para utilizarlas para hacer estrellas de diferentes tamaños con un fondo oscuro
Ejemplo: En el siguiente ejemplo, hemos creado una galaxia en segundo plano utilizando los conceptos básicos de HTML y CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Galaxy background using HTML & CSS
</title>
<style>
body {
background-color: black;
}
.gfg {
top: 60%;
left: 40%;
bottom: 50%;
height: 12px;
width: 12px;
background-color: white;
border-radius: 80%;
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;
}
</style>
</head>
<body>
<center>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image"
height="150px" />
<div class="gfg"></div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA