ENCUESTITA

Ya chicuelos, hemos vuelto después de 10 días y volvemos con el tutorial de la encuesta "¿Cómo te sientes hoy?" Así que sin nada más que decir les comparto mi conocimiento, trate de simplificar lo más que pude para que les quede igual de bello, pero sin tantos problemas.

CÓDIGO

<style>

.momi-mood-widget {

  /* CAMBIA ESTE COLOR */

  --color-base: #000000; 

  --fuente-elegida: 'Slackey', cursive;

  

  all: initial;

  display: block;

  font-family: var(--fuente-elegida);

}

.momi-mood-widget .mood-card {

  width: 210px; 

  /* Aumenté el porcentaje de blanco en el degradado para que se vea más "brillante" */

  background: linear-gradient(180deg, color-mix(in srgb, var(--color-base), #fff 40%) 0%, var(--color-base) 100%);

  padding: 16px;

  border-radius: 12px; 

  border: 1px solid rgba(255,255,255,0.3);

  text-align: center;

  margin: 20px auto;

  /* Sombras más intensas para dar profundidad de objeto */

  box-shadow: 

    0 10px 20px rgba(0,0,0,0.3), 

    inset 0 2px 2px rgba(255,255,255,0.6), 

    inset 0 -2px 5px rgba(0,0,0,0.2);

}

.momi-mood-widget .mood-title {

  font-family: var(--fuente-elegida);

  font-size: 15px;

  color: #fff;

  margin: 0 0 14px 0;

  text-shadow: 0 1px 2px rgba(0,0,0,0.5);

}

.momi-mood-widget .mood-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}

.momi-mood-widget .mood-item {

  /* Fondo con más transparencia para que la luz de fondo resalte */

  background: rgba(255, 255, 255, 0.15);

  border: 1px solid rgba(255, 255, 255, 0.4);

  border-radius: 8px;

  padding: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

  display: flex;

  justify-content: center;

  align-items: center;

  /* Pequeño reflejo superior en el cuadrito */

  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);

}

.momi-mood-widget .mood-item:hover {

  background: rgba(255, 255, 255, 0.4);

  transform: translateY(-2px);

  box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.8);

}

.momi-mood-widget .mood-item.selected {

  background: #fff;

  border: 1.5px solid #fff;

  box-shadow: 0 0 15px #fff;

}

.momi-mood-widget .mood-item img { 

  width: 32px; 

  height: 32px; 

  display: block; 

  image-rendering: pixelated; 

}

</style>

Como les dije trate de simplificarlo lo más que pude, como verán solo tienen que cambiar 4 cosillas y una de esas es opcional, recuerden pegar esto en notas y cambiar las cosas desde ahí para que no sea tan complicado, el primer cambio es el color base #000000, aquí como el nombre dice ponen el color del que quieran su encuesta, no se preocupen por las luces ni las sombras, hice que el mismo código sacara esos colores solito :), luego eso esta 'Slackey', cursive, que es la fuente que quieran ponerle al titulo de la encueta. de eso viene el numero de pixeles que en mi caso lo tengo en 210px, no creo que sea necesario cambiarlo, pero es en caso de que tengan más o menos espacio en sus cositos de los lados. Ya por ultimo va el tamaño de la letra, yo se los deje en 15px, pero pueden ponerlo de la medida que quieran.

Espero les sirva mis chicuelos, los quiero, lo siento por no haber actualizado hace rato -3-