.gif)
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
<div class="flip-card" onclick="flipCard()">
<div class="flip-inner" id="flipInner">
<!-- Frente -->
<div class="flip-face flip-front">
<p>touch me 🐈</p> (texto editable)
</div>
<!-- Atrás -->
<div class="flip-face flip-back">
<p id="flipText">frase</p>
</div>
</div>
</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>
<script>
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:
<div class="mystery-box" onclick="toggleBox()">
<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>
<script>
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 class="squish-cat">
<img id="catImg" src="https://linkdetuimagen.png" alt="gato amasable" />
</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>
<script>
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
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.jpeg)
.gif)
.gif)
.jpeg)
.jpeg)