࿔˚⋆ 𖤓 ⋆ Hola, Solecitos ⋆ 𖤓 ⋆˚࿔
Lo prometido es deuda.
Así que aquí tenéis el primer post de una nueva serie de tutoriales.⋆˚
Aquí aprenderéis a:
♡ Convertir los comentarios de un post en post-it. (Como en El Corcho del Blog).
♡ Poner un fondo fijo y que el contenido haga scroll. (Como en mis reseñas).
♡ Hacer un desplegable (Como en mis reseñas también).
ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧
Este post será mucho más simple de lo normal, para que así podáis copiar los códigos con más facilidad. • ᴖ •
Lo principal que hay que saber es que estos códigos deben usarse en vista html.
Ahora si, empezamos con los códigos.⸜(｡˃ ᵕ ˂ )⸝♡
⋆. 𐙚˚࿔ Comentario como post-its 𝜗𝜚˚⋆
Para los Solecitos que no sepan a que me refiero, aquí dejo una imagen:
<style>
.comments .comment {
background: #fffb88; /*Puedes cambiar el color*/
padding: 10px;
margin: 10px;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
position: relative;
display: inline-block;
max-width: 250px;
transform: rotate(-2deg); /* Puedes cambiar la rotación */
font-family: 'Patrick Hand', cursive !important; /*Puedes cambiar la fuente*/
color: #3b2a1a !important; /*Puedes cambiar el color de la letra*/
}
/* Notas de colores alternadas, puedes cambiarlos y/o añadir más solo copiando y pegando*/
.comments .comment:nth-child(2n) { background: #ffd1d1; transform: rotate(1deg); }
.comments .comment:nth-child(3n) { background: #c1ffd1; transform: rotate(-1deg); }
.comments .comment:nth-child(4n) { background: #d1e0ff; transform: rotate(2deg); }
/* Chincheta arriba de la nota */
.comments .comment::before {
content: '';
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
}
/* Contenedor de comentarios */
.comments {
display: flex;
flex-wrap: wrap;
justify-content: center; /* centra las notas */
gap: 15px;
margin-top: 20px;
}
</style>
Aquí termina el código. ⋆˚✿˖°
Importante decir, que para cambiar los colores solo debéis cambiar los # seguidos de letras y números (por ejemplo #fffb88) por los colores que queráis en Hex.
Os dejo una página que os puede ayudar.
Para cambiar la fuente de la letra podéis usar esta otra página.
Seleccionáis la fuente que os guste, le dais a Get Font (esquina superior derecha).
Le dais a Get embed code.
De esto copiáis el último link, en este caso sería:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Y lo pegáis arriba del todo del código de vuestra entrada, lo primero de todo.
Después solo os queda copiar el nombre de la fuente y ponerla dentro del código (donde pone font-family).
Ejemplos:
font-family: 'Patrick Hand', cursive !important; /*Puedes cambiar la fuente*/
font-family: 'Roboto', sans-serif !important; /*Puedes cambiar la fuente*/
font-family: "Saira Stencil", sans-serif !important; /*Puedes cambiar la fuente*/
font-family: "Noto Sans Meroitic", sans-serif !important; /*Puedes cambiar la fuente*/
Es probable que suba más adelante un tutorial detallado de cosas básicas de HTML, por si aquí no ha quedado claro. °❀⋆.ೃ࿔*:･
Aún así, podéis preguntarme cualquier cosa por comentarios. ᰔᩚ
⋆. 𐙚˚࿔ Fondo fijo y contenido scroll 𝜗𝜚˚⋆
Como en mis post de reseñas, el fondo de la entrada es una imagen fija y el contenido scrollea por dentro sin desformar ni mover la imagen.
<style>
/* CONTENEDOR GENERAL */
.dust-container {
width: 100%;
aspect-ratio: 2 / 3; /* ajusta esto según las proporciones de tu imagen */
max-height: 600px;
overflow-y: auto;
padding: 30px;
border-radius: 15px;
overflow-x: hidden;
background-image: url('Aquí va la dirección de tu imagen, recuerda no quitar las comillas.');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
/* SCROLL BONITO */
.dust-container::-webkit-scrollbar {
width: 8px;
}
.dust-container::-webkit-scrollbar-thumb {
background: #751300; /* Aquí puedes cambiar el color de la barra de scroll */
border-radius: 10px;
}
</style>
<div class="dust-container">
/* Aquí va todo el contenido de tu post, si no sabes como escribir en código html, dímelo en comentarios y subiré un tutorial específicamente de como escribir entradas en html. */
</div>
Aquí termina el código. ⋆˚✿˖°
⋆. 𐙚˚࿔ Barra desplegable 𝜗𝜚˚⋆
Como uso también en mis reseñas para ocultar los spoilers.
<style>
/* Barra desplegable*/
.spoiler-bar {
margin-top: 15px;
background: #751300; /* Puedes cambiar el color de la barra*/
color: white; /* Puedes cambiar el color de la letra*/
padding: 8px;
border-radius: 8px;
text-align: center;
cursor: pointer;
font-family: "Rubik Glitch", system-ui; /* Puedes cambiar la fuente de la letra*/
transition: 0.3s;
width: 100%;
display: block;
margin-top: 20px
}
.spoiler-bar:hover {
background: #a61c00; /* Puedes cambiar el color de la barra al pasar por encima el ratón*/
}
/* Contenido que despliega*/
.spoiler-content {
display: none;
margin: 10px 10px; /* margen del contenido arriba/abajo e izq/der*/
background: rgba(117, 19, 0, 0.6); /* Color del fondo en RGB, la cuarta cifra es la trasparencia, 1=totalmente visible y 0=totalmente invisible*/
padding: 10px;
border-radius: 10px;
font-family: "Rationale", sans-serif; /* Puedes cambiar la fuente de la letra*/
color: #fff; /* Puedes cambiar el color de la letra*/
width: 100%;
}
/* HOVER */
.spoiler-bar:hover {
background: #a61c00;
transform: scale(1.02);
box-shadow: 0 0 12px rgba(166, 28, 0, 0.7);
letter-spacing: 1px;
}
.spoiler-bar:active {
transform: scale(0.98);
box-shadow: 0 0 6px rgba(0,0,0,0.6) inset;
}
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
</style>
/* A partir de aquí empieza una barra, puedes copiar y pegar este trozo las veces que quieras para poner más barras */
<div class="spoiler-bar">Texto de la barra</div>
<div class="spoiler-content">
/* Aquí va el contenido desplegable*/
</div>
/* Aquí termina la barra*/
<script>
document.querySelectorAll(".spoiler-bar").forEach(bar => {
bar.addEventListener("click", () => {
const content = bar.nextElementSibling;
content.style.display = content.style.display === "block" ? "none" : "block";
});
});
</script>
Aquí termina el código. ⋆˚✿˖°
Y eso es todo por ahora, haciendo este post me he dado cuenta de que utilizar estos códigos en entradas sin saber sobre html puede ser un poco confuso, así que si veis que no os aclaráis para utilizarlos, no os preocupéis, empezaré una serie de post de "Cómo programar HTML paso a paso" que os ayudará mucho en la creación y diseño de vuestros blogs.
Así que cualquier duda o sugerencia que os pueda surgir será bien recibida en comentarios. ༄.°
Gracias por leer ᝰ.ᐟ
omggg muchas gracias !!, amo como decoras tus posts !
ResponderEliminar