09-03-2023, 03:50 PM
¡Hola a tod@s!
Me presento rápido: Remm
Os dejo un código
CSS que podéis copiar y pegar para cambiar los estilos a vuestros juegos:
Espero que os pueda servir de utilidad. Lo modificáis a vuestro gusto.
Se puede ver el resultado aquí: El Extraordinario Humphrey Gobblegunk
Es una aventura cortita que he creado de 7 capítulos al estilo Aventura gráfica.
Puedes jugarla y puntuarla, me sería de mucha ayuda ver opiniones.
¡¡Saludos y suerte con vuestros libros, algunos me encantan!!
Por cierto, los botones de Reinicio de juego (cuando mueres) hay que tratarlos a parte. Es el mismo código pero en vez de .boton y .boton:hover es .boton2 y .boton2:hover .
CSS PARA BOTONES DE OPCIONES:
<style type="text/css">
/* Estilo personalizado para el botón */
.boton {
background-color: #FFD700; /* Color de fondo dorado */
color: #000; /* Color de texto negro */
padding: 15px 30px; /* Ajuste del espacio interno del botón */
border: none; /* Elimina el borde del botón */
cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
font-size: 20px; /* Tamaño de fuente */
border-radius: 10px; /* Bordes redondeados */
text-decoration: none; /* Elimina cualquier decoración de texto (enlace) */
display: inline-block; /* Hace que el botón se comporte como un bloque en línea */
font-family: 'Georgia', serif; /* Fuente estilo Georgia */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
.boton:hover {
background-color: #FFA500; /* Cambia el color de fondo al pasar el cursor (naranja) */
transition: all 0.3s ease; /* Aplica una transición suave a todas las propiedades durante 0.3 segundos */
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* Cambia la sombra al pasar el cursor */
}
</style>
CSS PARA IMAGEN EN FONDO: (Aquí cambias mi imagen por la tuya)
<style type="text/css">
.panel-body {
background-image: url(https://i.ibb.co/9wQd3tr/fondo2.png);
background-size: cover; /* Hace que la imagen de fondo cubra todo el elemento */
background-repeat: no-repeat; /* Evita que la imagen se repita */
background-position: center center; /* Centra la imagen en el elemento */
color: black;
}
</style>
Me presento rápido: Remm
Os dejo un código
CSS que podéis copiar y pegar para cambiar los estilos a vuestros juegos:Espero que os pueda servir de utilidad. Lo modificáis a vuestro gusto.
Se puede ver el resultado aquí: El Extraordinario Humphrey Gobblegunk
Es una aventura cortita que he creado de 7 capítulos al estilo Aventura gráfica.
Puedes jugarla y puntuarla, me sería de mucha ayuda ver opiniones.
¡¡Saludos y suerte con vuestros libros, algunos me encantan!!
Por cierto, los botones de Reinicio de juego (cuando mueres) hay que tratarlos a parte. Es el mismo código pero en vez de .boton y .boton:hover es .boton2 y .boton2:hover .
CSS PARA BOTONES DE OPCIONES:
<style type="text/css">
/* Estilo personalizado para el botón */
.boton {
background-color: #FFD700; /* Color de fondo dorado */
color: #000; /* Color de texto negro */
padding: 15px 30px; /* Ajuste del espacio interno del botón */
border: none; /* Elimina el borde del botón */
cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
font-size: 20px; /* Tamaño de fuente */
border-radius: 10px; /* Bordes redondeados */
text-decoration: none; /* Elimina cualquier decoración de texto (enlace) */
display: inline-block; /* Hace que el botón se comporte como un bloque en línea */
font-family: 'Georgia', serif; /* Fuente estilo Georgia */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
.boton:hover {
background-color: #FFA500; /* Cambia el color de fondo al pasar el cursor (naranja) */
transition: all 0.3s ease; /* Aplica una transición suave a todas las propiedades durante 0.3 segundos */
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* Cambia la sombra al pasar el cursor */
}
</style>
CSS PARA IMAGEN EN FONDO: (Aquí cambias mi imagen por la tuya)
<style type="text/css">
.panel-body {
background-image: url(https://i.ibb.co/9wQd3tr/fondo2.png);
background-size: cover; /* Hace que la imagen de fondo cubra todo el elemento */
background-repeat: no-repeat; /* Evita que la imagen se repita */
background-position: center center; /* Centra la imagen en el elemento */
color: black;
}
</style>