Últimamente no paro de buscar blogs de decoración y me declaro fan del estilo nórdico. Tonos neutros, blancos, grises, madera y toques de color. Ésta es mi selección. ¡LO QUIERO TODO!
HTML/CSS - JUEGA con el TÍTULO DE LAS ENTRADAS
¿Habéis visto que en el título de mi post hay palabras con diferente color y otras están en cursiva?
No recuerdo como fue, pero el otro día me vino la idea a la cabeza. Pensé, si todo se puede modificar con código, ¿por qué no se va a poder modificar el título de los posts de manera individual y personalizada y sin que afecte a todos los títulos? Me puse enseguida a probarlo y efectivamente, algo que nunca me había planteado pero que puede ser muy útil, porque puedes resaltar una parte del texto para darle más importancia a nivel visual.
No recuerdo como fue, pero el otro día me vino la idea a la cabeza. Pensé, si todo se puede modificar con código, ¿por qué no se va a poder modificar el título de los posts de manera individual y personalizada y sin que afecte a todos los títulos? Me puse enseguida a probarlo y efectivamente, algo que nunca me había planteado pero que puede ser muy útil, porque puedes resaltar una parte del texto para darle más importancia a nivel visual.
Se puede hacer prácticamente de todo, desde cambiar el color del título o de una sola palabra, cambiar la tipografía, ponerla en cursiva, agregarle un fondo de color o un borde sólido o de puntitos... Vamos que las posibilidades son casi infinitas y lo mejor es que sólo afectará al título de ese post, no a todos los demás.
Os explico como se hace:
Cuando vayáis a crear vuestro post, en el momento de añadir el título de post debéis añadir la etiqueta <span>. Por ejemplo, quiero que el título de mi post sea DELICIOSA TARTA DE CHOCOLATE y quiero que la palabra DELICIOSA sea de color rosa, que la preposición DE sea en cursiva y que CHOCOLATE aparezca de color marrón.
Lo escribiré como en el código de debajo para que aparezca así:
Lo escribiré como en el código de debajo para que aparezca así:
DELICIOSA TARTA de CHOCOLATE
<span style="color: #f5c5c5;">DELICIOSA</span> TARTA <span style="font-style: italic;">de</span> <span style="color: #72541f;">CHOCOLATE</span>
Otro ejemplo:
DELICIOSA TARTA de CHOCOLATE
<span style="background: #f5c5c5; padding: 10px;">DELICIOSA TARTA <span style="font-style: italic;">de</span> CHOCOLATE</span>
Si lo que quieres es añadir un borde deberás añadirle:
<span style="border: 1px solid #000000;">TU TEXTO AQUÍ</span>
Modifica el número de 1px para cambiar el grosor de la línea, cambia solid por dotted, dashed, double, etc... y cambia el color del borde por el color hexadecimal que quieras. Aquí puedes ver los diferentes estilos de bordes que hay. También puedes modificar la tipografía, si instalas fuentes de google fonts será muy fácil saber cual es el código que debes añadir, por ejemplo si utilizas Times New Roman sería así:
<span style="font-family: 'Times New Roman', serif;">TU TEXTO AQUÍ</span>
Si quieres cambiar el tamaño de la fuente:
<span style="font-size: 10px;">TU TEXTO AQUÍ</span>
Modifica el valor para hacer que la tipografía sea más grande o más pequeña.¿Qué os ha parecido el tutorial? ¿Os animáis a probarlo? Si tenéis dudas ya sabéis que podéis escribirme cuando queráis.
¡Que tengáis un buen Martes!
AÑO DE CAMBIOS
¡De momento este es el primer cambio! ¡Nuevo diseño de blog! ¡Los demás cambios están por llegar!
P.D: No os asustéis... los posts antiguos están hechos un cristo... Iré arreglándolos cuando tenga tiempo.
P.D: No os asustéis... los posts antiguos están hechos un cristo... Iré arreglándolos cuando tenga tiempo.
Suscribirse a:
Entradas (Atom)