☆Gadgets☆

Holaaa, coma nadie me lo pidió les voy a poner dos de los gadgets que use para mi blog, la lluvia de estrellas y targeta de imágenes para que ustedes también pueden personalizar su blog.

Lluvia de estrellas

En este gadgets puse una estrellita que al presionarla cae una lluvia de estrellas, obviamente ustedes pueden editarlo y cambiar los colores, las figures o la frecuencia en que estas caen, el có digo lo tiene que poner en el apartado que dice JHTML/JavaScrip.

<div class="star-widget">

  <div class="star-button" onclick="startStars()"></div>

</div>

<style>

.star-widget {

  width: 100px;

  height: 100px;

  margin: 20px auto;

  position: relative;

}

/* Botón estrella */

.star-button {

  width: 100px;

  height: 100px;

  background: #7a0000;

  clip-path: polygon(

    50% 0%,

    61% 35%,

    98% 35%,

    68% 57%,

    79% 91%,

    50% 70%,

    21% 91%,

    32% 57%,

    2% 35%,

    39% 35%

  );

  cursor: pointer;

}

/* Estrellas que caen */

.falling-star {

  position: fixed;

  top: -10px;

  width: 15px;

  height: 15px;

  background: #7a0000;

  clip-path: polygon(

    50% 0%,

    61% 35%,

    98% 35%,

    68% 57%,

    79% 91%,

    50% 70%,

    21% 91%,

    32% 57%,

    2% 35%,

    39% 35%

  );

  animation: fall linear forwards;

  z-index: 9999;

}

@keyframes fall {

  to {

    transform: translateY(110vh) rotate(360deg);

    opacity: 0;

  }

}

</style>

<script>

function createStar() {

  const star = document.createElement("div");

  star.className = "falling-star";

  // Posición horizontal aleatoria

  star.style.left = Math.random() * window.innerWidth + "px";

  // Tamaño aleatorio

  const size = Math.random() * 15 + 10;

  star.style.width = size + "px";

  star.style.height = size + "px";

  // Color aleatorio (bordó o plateado)

  const colors = ["#7a0000", "#C0C0C0"];

  star.style.background = colors[Math.floor(Math.random() * colors.length)];

  // Duración de caída

  const duration = Math.random() * 3 + 2;

  star.style.animationDuration = duration + "s";

  document.body.appendChild(star);

  // Eliminar después de animación

  setTimeout(() => {

    star.remove();

  }, duration * 1000);

}

function startStars() {

  const interval = setInterval(createStar, 100);

  // Detener después de 4 segundos

  setTimeout(() => {

    clearInterval(interval);

  }, 4000);

}

</script>

Targeta de imágenes

En este gadgets puse imágenes que cambiaran al nosotros hacer click, lo unico que tienen que hacer es cambar los links que yo tengo por los de su agrado, las imágenes yo las saque de wikimedia, es una pagina en la que pueden encontrar imágenes de cualquier tipo, yo en lo personal me asegure de que las imágenes que escogió  fueran de dominio publico, también asegúrense de que los links terminen en .jpg para que funcione mejor.

<div class="img-card" onclick="nextImage()">

  <div class="overlay">☆Toca☆</div>

</div>

<style>

.img-card {

  width: 160px;

  height: 220px;

  margin: 20px auto;

  border-radius: 20px;

  overflow: hidden;

  position: relative;

  cursor: pointer;

  background-size: cover;

  background-position: center;

  transition: all 0.4s ease;

  box-shadow: 0 4px 10px rgba(0,0,0,0.3);

}

/* efecto aesthetic */

.img-card:hover {

  transform: scale(1.03);

}

/* texto */

.overlay {

  position: absolute;

  bottom: 0;

  width: 100%;

  padding: 10px;

  text-align: center;

  font-family: Georgia, "Times New Roman", serif;

  color: white;

  background: linear-gradient(transparent, rgba(0,0,0,0.6));

  font-size: 14px;

}

</style>

<script>

const images = [

"https://upload.wikimedia.org/wikipedia/commons/f/f6/Michelangelo%2C_The_Creation_of_Adam.jpg",

"https://upload.wikimedia.org/wikipedia/commons/3/31/Alexandre_Cabanel_-_Fallen_Angel_%28cropped%29.jpg",

"https://upload.wikimedia.org/wikipedia/commons/a/ab/Amandelbloesem.jpg",

"https://upload.wikimedia.org/wikipedia/commons/b/b1/Monet_-_Monets_Garten_in_Giverny.jpg",

"https://upload.wikimedia.org/wikipedia/commons/f/f9/The_Birth_of_Venus_by_William-Adolphe_Bouguereau_%281879%29.jpg",

"https://upload.wikimedia.org/wikipedia/commons/1/18/Sargent_MadameX.jpeg",

"https://upload.wikimedia.org/wikipedia/commons/4/40/The_Kiss_-_Gustav_Klimt_-_Google_Cultural_Institute.jpg"

];

let current = 0;

const card = document.querySelector(".img-card");

// imagen inicial

card.style.backgroundImage = `url(${images[0]})`;

function nextImage() {

  current = (current + 1) % images.length;

  card.style.backgroundImage = `url(${images[current]})`;

}

</script>