Hoy en domingo de tutoriales os traigo un tutorial muy chulo si queréis idolatrar a alguien en vuestro blog. Os presento el mini-altar giratorio. Cada una de las bases tiene 3 fotos cuadradas, cosa que debes tener en cuenta cuando quieras poner una foto más alargada ya que se va a recortar.
Lo primero de todo es copiar el código y pegarlo en el sidebar como cualquier otro gadget que quieras añadir. Ojo, la gente suele recomendar poner el codigo en notas e ir modificándolo. Yo he de decir que lo pego siempre directamente para ir haciendo los cambios oportunos y no tener que estar todo el rato pegando y copiando jajaja (soy una vaga perdonen).
Por aquí os dejo el código (recordar no quitar ningún tipo de espacio o cambio de párrafo):
<div class="mireproductor-pila" id="pilaFotos">
<div class="mireproductor-tarjeta tarjeta-rosa">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
<div class="mireproductor-tarjeta tarjeta-verde">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
<div class="mireproductor-tarjeta tarjeta-crema">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
</div>
<style>
.mireproductor-pila{
width:215px;
height:125px;
position:relative;
margin:auto;
margin-top:25px;
}
/* TARJETAS */
.mireproductor-tarjeta{
width:215px;
min-height:95px;
padding:10px;
box-sizing:border-box;
position:absolute;
left:0;
display:flex;
justify-content:center;
align-items:center;
align-content:center;
flex-wrap:wrap;
gap:6px;
border-radius:22px;
box-shadow:
0 5px 15px rgba(0,0,0,.12),
inset 0 0 12px rgba(255,255,255,.55);
transition:
transform .7s ease,
opacity .7s ease;
}
/* COLORES */
.tarjeta-rosa{
background:
linear-gradient(
180deg,
#FDF4F7 0%,
#F2C8D5 100%
);
border:2px solid #E87390;
}
.tarjeta-verde{
background:
linear-gradient(
180deg,
#F5FAEC 0%,
#D9EAC0 100%
);
border:2px solid #8DBB62;
}
.tarjeta-crema{
background:
linear-gradient(
180deg,
#FFF8E8 0%,
#F5DFC0 100%
);
border:2px solid #D7A86E;
}
/* FOTOS */
.mireproductor-tarjeta img{
width:55px;
height:55px;
object-fit:cover;
border-radius:14px;
}
/* POSICIONES */
.posicion-1{
z-index:3;
transform:
translateY(0)
scale(1);
}
.posicion-2{
z-index:2;
transform:
translateY(25px)
scale(.96);
}
.posicion-3{
z-index:1;
transform:
translateY(-25px)
scale(.92);
}
/* MOVIL */
@media(max-width:500px){
.mireproductor-pila{
width:100%;
max-width:215px;
margin-top:25px;
}
.mireproductor-tarjeta{
width:100%;
max-width:215px;
}
}
</style>
<script>
(function(){
const contenedor=document.getElementById("pilaFotos");
if(!contenedor) return;
let tarjetas=[...contenedor.children];
function actualizar(){
tarjetas.forEach((tarjeta,index)=>{
tarjeta.classList.remove(
"posicion-1",
"posicion-2",
"posicion-3"
);
if(index===0){
tarjeta.classList.add("posicion-1");
}
if(index===1){
tarjeta.classList.add("posicion-2");
}
if(index===2){
tarjeta.classList.add("posicion-3");
}
});
}
actualizar();
setInterval(function(){
let primera=tarjetas.shift();
tarjetas.push(primera);
actualizar();
},3000);
})();
</script>
Bien, los cambios que se deben hacer son los siguientes:
1. Lo primero que vas a encontrar va a ser esto:
<div class="mireproductor-tarjeta tarjeta-rosa">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
<div class="mireproductor-tarjeta tarjeta-verde">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
<div class="mireproductor-tarjeta tarjeta-crema">
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
<img src="URL_TU_FOTO.jpg" />
</div>
Aquí tendrás que sustituir los "URL_TU_FOTO.jpg" por las URL de las fotos que quieras poner. Ten cuidado de no quitar las comillas ya que sino no va a funcionar.
2. Si bajas hasta el apartado de tarjetas vas a poder modificar el tamaño de cada tarjeta pero recomiendo no tocarlo mucho porque puede que la tarjeta de delante tape a la de detrás.
3. Si bajas más, en el apartado de colores te va a aparecer lo siguiente:
.tarjeta-rosa{
background:
linear-gradient(
180deg,
#FDF4F7 0%,
#F2C8D5 100%
);
border:2px solid #E87390;
}
Este código lo vas a tener 3 veces pero con el nombre de ".tarjeta-verde" y ".tarjeta-crema". Para cambiarle los colores tienes que modificar lo que te he señalado. Los dos primeros códigos de colores corresponden al fondo y tiene un pequeño gradiente asique tenlo en cuenta para cuando cambies los colores. El segundo código de color corresponde al borde de cada base.
4. Si llegas a modificar el tamaño del gadget te recuerdo que puedes modificar el tamaño de las fotos para que adapte mejor al gadget en el apartado de "/* FOTOS */"
Eso sería todo chiquitillos. Decidme qué más cosillas queréis ver en esta sección <3
Atte. Vivi
graciaaaas! que idea más linda de gadgeett<33
ResponderEliminarMe alegra que te guste¡!
Eliminar