╭──────────────────────────────╮
♡ 𝒸𝓊𝓉𝑒 𝒷𝓁𝑜𝑔 𝓉𝓊𝓉𝑜𝓇𝒾𝒶𝓁 ♡
╰──────────────────────────────╯
Si tienes un blog en Neocities, Blogger u otra página donde puedas editar HTML y CSS, seguramente has visto esos pequeños espacios decorativos llenos de botones, imágenes, símbolos y separadores. ✦
Hoy les quiero enseñar cómo pueden crear su propio cute corner utilizando imágenes pequeñas y algunos símbolos aesthetic para dividir la información y hacer que la entrada se vea más bonita y organizada. ♡
No necesitas saber muchísimo de HTML. Con unas pocas líneas de código puedes crear algo así:
♡ ୨୧ cute corner ୨୧ ♡ ✦ ˚₊‧ ♡ ˚₊‧ ✦ [imagen] [imagen] [imagen] ♡ ˚₊‧ ୨୧ ‧₊˚ ♡
Y lo mejor es que puedes cambiar los símbolos, las imágenes y el tamaño para adaptarlo completamente a tu blog. 🌷
୨୧ 01. Primero: el código HTML
La estructura básica es bastante sencilla. Tenemos un contenedor principal, un título, un separador y finalmente nuestras imágenes.
<div class="kawaii-corner"> <div class="kawaii-title"> ♡ ୨୧ 𝒸𝓊𝓉𝑒 𝒸𝑜𝓇𝓃𝑒𝓇 ୨୧ ♡ </div> <div class="kawaii-line"> ✦ ˚₊‧ ♡ ˚₊‧ ✦ </div> <div class="kawaii-cats"> <img src="AQUI-VA-TU-IMAGEN"> <img src="AQUI-VA-TU-IMAGEN"> <img src="AQUI-VA-TU-IMAGEN"> </div> <div class="kawaii-line"> ♡ ˚₊‧ ୨୧ ‧₊˚ ♡ </div> </div>
Lo importante son estas partes:
<div class="kawaii-title">
Aquí va el título de nuestra sección.
<div class="kawaii-line">
Aquí podemos colocar nuestros separadores aesthetic.
Y aquí:
<div class="kawaii-cats">
colocamos las imágenes que queremos mostrar.
♡ 02. Usando símbolos aesthetic para dividir el texto
Una de mis partes favoritas es utilizar símbolos para separar visualmente diferentes partes de una entrada.
Por ejemplo:
♡ ───────── ୨୧ ───────── ♡
o:
✦ ˚₊‧ ♡ ‧₊˚ ✦
o algo más sencillo:
｡･:*˚:✧｡ ♡ ｡✧:˚*:･｡
También puedes utilizar:
୨୧ ── ♡ ── ୨୧
꒰ა ♡ ໒꒱
⋆｡ﾟ✶° ✧ °✶ﾟ｡⋆
La idea es que estos símbolos funcionen como pequeños separadores entre bloques de información.
Por ejemplo, en una entrada puedes tener:
♡ ୨୧ SOBRE ESTE TUTORIAL ୨୧ ♡ Aquí explico cómo crear un cute corner... ✦ ˚₊‧ ♡ ˚₊‧ ✦ ♡ ୨୧ CÓDIGO ୨୧ ♡ Aquí está el código... ✦ ˚₊‧ ♡ ˚₊‧ ✦ ♡ ୨୧ PERSONALIZACIÓN ୨୧ ♡ Aquí explico cómo cambiar las imágenes...
Esto hace que una entrada que tenga mucho texto sea más fácil de leer y, además, mantiene la estética del blog. 🌸
୨୧ 03. ¿Cómo cambiar las imágenes?
Para poner tus propias imágenes solamente tienes que cambiar:
<img src="AQUI-VA-TU-IMAGEN">
por la dirección de tu imagen.
Por ejemplo:
<img src="https://ejemplo.com/imagen.gif">
Puedes repetir la línea tantas veces como imágenes quieras:
<div class="kawaii-cats"> <img src="IMAGEN-1"> <img src="IMAGEN-2"> <img src="IMAGEN-3"> <img src="IMAGEN-4"> </div>
♡ Consejito: si utilizas imágenes de diferentes páginas, intenta que tengan una estética parecida. Los botones, stamps, pixel art y pequeños GIFs suelen quedar especialmente bonitos juntos.
✦ 04. El problema de las imágenes de diferentes tamaños
Aquí viene una parte importante.
No todas las imágenes tienen las mismas dimensiones.
Por ejemplo, puedes tener:
Imagen 1 → 88 × 31 px Imagen 2 → 100 × 35 px Imagen 3 → 120 × 40 px
Si utilizamos:
width: 40px; height: 40px;
todas las imágenes serán obligadas a medir 40 × 40, aunque originalmente sean rectangulares.
Eso puede hacer que una imagen horizontal termine viéndose aplastada o estirada. 😭
Por eso, cuando estamos utilizando badges o botones rectangulares, es mejor hacer esto:
.kawaii-cats img { height: 30px; width: auto; }
¿Qué significa?
height: 30px → todas tendrán 30 px de alto.
width: auto → el navegador calculará automáticamente el ancho para mantener la proporción original.
Así:
Original: [───────────────] ↓ height: 30px [───────────────]
La imagen mantiene su forma. ♡
୨୧ 05. Si quiero que estén pegadas horizontalmente
Si quieres que tus imágenes aparezcan una junto a otra:
[♡] [♡] [♡] [♡]
puedes utilizar display: flex.
.kawaii-cats { display: flex; flex-direction: row; align-items: center; gap: 2px; }
El código completo para esta opción sería:
.kawaii-cats { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2px; } .kawaii-cats img { height: 30px; width: auto; display: block; }
♡ ¿Quieres que estén completamente pegadas?
Cambia:
gap: 2px;
por:
gap: 0;
Resultado:
[imagen][imagen][imagen]
En cambio:
gap: 5px;
creará un pequeño espacio:
[imagen] [imagen] [imagen]
🌷 06. ¿Y si quiero que una quede debajo de otra?
Esto es muy fácil.
Puedes cambiar el row por column:
.kawaii-cats { display: flex; flex-direction: column; align-items: center; gap: 3px; }
Ahora las imágenes aparecerán así:
[ imagen ] [ imagen ] [ imagen ] [ imagen ]
Esto puede quedar muy bonito si estás creando una columna de stamps, botones o pequeños banners.
♡ 07. ¿Y si quiero que ocupen todo el espacio disponible?
Esta opción es especialmente útil si tu sidebar tiene un tamaño específico.
Por ejemplo, si tu caja mide 300 px, puedes utilizar:
.kawaii-corner { width: 300px; max-width: 100%; box-sizing: border-box; }
max-width: 100% es importante porque evita que el elemento sea más ancho que el espacio disponible.
✦ 08. ¿Qué pasa si tengo muchas imágenes?
Supongamos que tienes:
[imagen] [imagen] [imagen] [imagen] [imagen] [imagen]
pero no todas caben en una caja de 300 px.
En lugar de permitir que se salgan de la caja, podemos utilizar:
.kawaii-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
La parte importante es:
flex-wrap: wrap;
Esto significa:
"Si ya no caben más imágenes en esta línea, pásalas a la siguiente."
Así:
[imagen] [imagen] [imagen] [imagen] [imagen] [imagen]
en lugar de:
[imagen] [imagen] [imagen] [imagen] →→→
que terminaría saliéndose de nuestra caja. 💗
୨୧ 09. Código recomendado para una caja de 300 px
Si tienen un sidebar o sección de aproximadamente 300 px, pueden utilizar esta versión:
<div class="kawaii-corner"> <div class="kawaii-title"> ♡ ୨୧ 𝒸𝓊𝓉𝑒 𝒸𝑜𝓇𝓃𝑒𝓇 ୨୧ ♡ </div> <div class="kawaii-line"> ✦ ˚₊‧ ♡ ˚₊‧ ✦ </div> <div class="kawaii-cats"> <img src="IMAGEN-1"> <img src="IMAGEN-2"> <img src="IMAGEN-3"> </div> <div class="kawaii-line"> ♡ ˚₊‧ ୨୧ ‧₊˚ ♡ </div> </div> <style> .kawaii-corner { width: 300px; max-width: 100%; box-sizing: border-box; padding: 8px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; } .kawaii-title { text-align: center; margin-bottom: 4px; letter-spacing: 1px; } .kawaii-line { text-align: center; margin: 3px 0; letter-spacing: 3px; } .kawaii-cats { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; } .kawaii-cats img { height: 30px; width: auto; max-width: 100%; display: block; image-rendering: pixelated; flex-shrink: 0; } </style>
Esta versión es bastante flexible porque:
♡ conserva la proporción de las imágenes
♡ permite imágenes de diferentes tamaños
♡ evita que se salgan de la caja
♡ permite que pasen a otra línea
♡ mantiene los badges juntos
♡ funciona con GIFs y pequeños botones
♡ puedes cambiar fácilmente el tamaño
🎀 10. ¿Cómo cambiar el tamaño?
La parte que tienes que modificar es:
.kawaii-cats img { height: 30px; width: auto; }
Si quieres imágenes más pequeñas:
height: 20px;
Si quieres un tamaño medio:
height: 30px;
Si quieres que sean más grandes:
height: 40px;
Por ejemplo:
♡ Mini
height: 20px;
♡ Normal
height: 30px;
♡ Grande
height: 40px;
Lo importante es no poner un width fijo si tus imágenes tienen diferentes proporciones.
En vez de:
width: 40px; height: 40px;
es mejor:
height: 30px; width: auto;
♡ ୨୧ Mini resumen ୨୧ ♡
Si quieres...
Imágenes horizontales sin deformar:
height: 30px; width: auto;
Imágenes pegadas horizontalmente:
display: flex; gap: 0;
Imágenes con un pequeño espacio:
gap: 2px;
Imágenes una debajo de otra:
flex-direction: column;
Que bajen a otra línea cuando no caben:
flex-wrap: wrap;
Centrarlas:
justify-content: center;
Y listo. ♡
La parte más divertida es que puedes combinar estas propiedades para crear tu propio estilo. Puedes hacer una fila de badges, una columna de stamps, una colección de GIFs o incluso mezclar imágenes con separadores de símbolos aesthetic.
｡･:*˚:✧｡ ♡ ｡✧:˚*:･｡ ♡ ୨୧ HAVE FUN ୨୧ ♡ [ ♡ ] [ ✦ ] [ ୨୧ ] [ ☆ ] ⋆｡ﾟ✶° ✧ °✶ﾟ｡⋆
Espero que este tutorial les ayude a darle un poquito más de personalidad a sus blogs. 🌷💗
Siéntanse libres de cambiar los símbolos, colores, tamaños y fuentes hasta encontrar la combinación que más les guste.
୨୧ Happy blogging! ୨୧
```html
```
No hay comentarios.:
Publicar un comentario