K.kyouka world!: gadgets que puedes usar para tu blog :3 pt. 3

OLAAAAAAA, eh vuelto xiavles y les traje los tres codigos que prometi k subiria, bueno los tres gadgets de hoy son:

-flip card

-mistery box

-gato amasable

okey vamos por el primer gadget de hoy :3

<p>touch me 🐈</p> (texto editable)

</div>

<p id="flipText">frase</p>

</div>

<style>

/* CONTENEDOR */

.flip-card {

width: 200px;

height: 130px;

perspective: 1000px;

margin: auto;

cursor: pointer;

}

/* INTERIOR */

.flip-inner {

position: relative;

width: 100%;

height: 100%;

transition: transform 0.6s;

transform-style: preserve-3d;

}

.flip-inner.flipped {

transform: rotateY(180deg);

}

/* CARAS */

.flip-face {

position: absolute;

width: 100%;

height: 100%;

background: #d8f3dc;

border: 2px solid #95d5b2; (tdos los "#" son los colores, pon uno de tu agrado)

border-radius: 14px;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

/* TIPOGRAFÍA */

font-family: "Cherry cream Soda", sans-serif;

font-size: 20px; /* TEXTO MÁS GRANDE */ (tamaño y fuente editable)

line-height: 1.3;

padding: 12px;

box-sizing: border-box;

backface-visibility: hidden;

}

/* FRENTE */

.flip-front {

color: #2d6a4f;

}

/* ATRÁS */

.flip-back {

background: #b7e4c7; (kmo dije antes todos los # son editables de color)

color: #1b4332;

transform: rotateY(180deg);

}

</style>

const phrases = [

"sin drama no hay trama",

"pensar fue un error",

"paz interior no disponible", (cambia las frases por las k te gusten)

"otra vez yo",

"qué sorpresa (no)",

"existiendo con estilo",

"meh",

"ay no"

];

let flipped = false;

function flipCard() {

const card = document.getElementById("flipInner");

const text = document.getElementById("flipText");

flipped = !flipped;

if (flipped) {

const random = Math.floor(Math.random() * phrases.length);

text.textContent = phrases[random];

card.classList.add("flipped");

} else {

card.classList.remove("flipped");

}

</script>

bueno aki esta el codigo de la flip card, espero m hayan entendido, pasemos al segundo gadget:

el segundo gadget es la "mistery box" este gadget lo k es/hace es, hay una caja (imagen) al hacer click se abre y aparece el contenido (otra imagen) con un efecto kmo de "agitar" y al hacer click de nuevo de cierra y vuelve a aparecer la primera imagen (la caja)

que es editable de este gadget: bueno este gadget solo tiene editable las dos imagenes, que tienes que insertar el link de las tuyas (en la pt.2 enseñe a kmo sacarles el link, usando de ejemplo los mini banners, pero recalco que para que los links de tus dos imagenes funcionen tienen que terminar en ".png" y ya teniendo eso lo remplazas en el codigo y listo

bueno ahora lo mejor, el codigo JAKJSAKJ:

<img id="boxImage"

src="https://linkdetuimagen.png" (aka el link de la caja)

alt="Caja misteriosa" />

</div>

<style>

.mystery-box {

width: 180px;

height: 180px;

margin: 0 auto;

cursor: pointer;

}

.mystery-box img {

width: 100%;

height: 100%;

object-fit: contain;

}

/* Temblor suave del gato */

.shake {

animation: shake 0.4s infinite;

}

@keyframes shake {

0% { transform: translate(0, 0); }

25% { transform: translate(1px, 0); }

50% { transform: translate(-1px, 0); }

75% { transform: translate(1px, 0); }

100% { transform: translate(0, 0); }

}

</style>

let open = false;

const boxImg = document.getElementById("boxImage");

function toggleBox() {

if (!open) {

boxImg.src = "https://i.ibb.co/DPDvmHsn/23-sin-t-tulo-20260116212252.png";

boxImg.classList.add("shake");

} else {

boxImg.src = "https://linkdetuotraimagen.png"; (aki el link de la imagen k iria dentro)

boxImg.classList.remove("shake");

}

open = !open;

}

</script>

bueno aki espero k si hayan entendido las dos intrucciones, este gadget tmbn va en la side bar :D

bueno ya pasemos al 3er y ultimo gadget de hoy:

como ultimo gadget del dia, voy a explicar de k es/hace

es basicamente una imagen (gato, peroo o lo k kieras poner pk es tu blog)

que al pasar el cursor de arriba hacia abajo, se encoge, y a la viceversa hace lo contrario, ozea crece, nose kmo describirlo pero ustedes ya saben kmo es azi k oc, lo editable de este gadget es solo la imagen pk no hay otra cosa que editar, bueno ya para dejar de molestarlospk yo se k kieren poner este gadget, aki el codigo:

</div>

<style>

.squish-cat {

width: 170px;

margin: 0 auto;

overflow: hidden;

}

.squish-cat img {

width: 100%;

transition: transform 0.2s ease-out;

transform-origin: center;

}

</style>

const cat = document.getElementById("catImg");

cat.addEventListener("mousemove", function(e) {

const rect = cat.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const scaleX = 1 + (x - centerX) / centerX * 0.15;

const scaleY = 1 + (y - centerY) / centerY * 0.15;

cat.style.transform = `scale(${scaleX}, ${scaleY})`;

});

cat.addEventListener("mouseleave", function() {

cat.style.transform = "scale(1,1)";

});

</script>

bueno aki estan los tres gadget de hoy, espero k les sirvan, aprovecho para avisar que hice un gadget nuevo (dejenme, hacer gadget es mi pazion oc?) que es un gato k al apretarlo sube arriba del todo de la pagina, de hecho puede k te aparezca ahora, es un gato agarrandose del blog solo presionale y t mandara para arriba.

tambien keria decir muy emocionadamente k la otra semana m voy al sur, obvio voi a llevar mi compu para seguirles subiendo cositas, quizas suba una redaccion de mis dias por alla, espero k lo vean D: pork nose akien le importaria mi laif cuando tienen la suya pero iwal subire cosas oc? ZKSHJH bueno ya sin mas que decir m despido de ustedes, estare avisando por mi cuenta de tiktok de esta nueva publicacion para k nose enteren tarde JSDHSJFSJ BAIBAIIIIIIIII :3:D

1.28.2026

gadgets que puedes usar para tu blog :3 pt. 3

6 comentarios:

gadgets que puedes usar para tu blog :3 pt. 3