Cómo Decorar Elementos 'div' Para Texto

Hoy aprenderemos a poner una imagen o un color cualquiera para el fondo del texto que escribamos en nuestras páginas o entradas. Pues bien, para ello iremos a la pestaña HTML que hay en en el editor de publicaciones y que te enmarco de rojo en la imagen inferior.

Primero explicaré el método para poner el color sólido de fondo. Si lo que quieres es poner una imagen, salta este código y ve directo al siguiente.

1. COLOR SÓLIDO DE FONDO

Para ponerle un color sólido de fondo para nuestro texto pegamos el siguiente código:

<div style="color: #000000; background: #ffa87d; text-align: left; border: 0px solid #000; border-radius: 0px 0px 0px 0px; box-shadow: 0px 0px 8px 1px #000000; padding: 20px; width: 85%;">
...Aquí va tu texto...
</div>

Color: color del texto.
Background: color del fondo.
Text-align: alineación del texto (left - center - right).
Border: grosor del borde (en píxeles), su color (en forma hexadecimal) y tipo.
Border-radius: cantidad de redondeo a aplicar para cada esquina (en píxeles).
Box-shadow: propiedades de la sombra (en píxeles) y su color (en forma hexadecimal).
Padding: espaciado entre el texto y los bordes del fondo (en píxeles).
Width: ancho total del recuadro (en píxeles o porcentaje).

Una vez ingresado nos quedará algo así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed ipsum ipsum. Integer molestie lacus et ligula sodales porttitor non id elit. Pellentesque vel lacinia felis. Sed congue, sem ut consectetur tincidunt, ipsum nulla lobortis justo, a suscipit urna ipsum lobortis ex. Quisque ut lacus eu massa pulvinar convallis. Nunc varius, enim vel porta lobortis, lectus nulla efficitur justo, a pharetra tellus justo viverra augue. In hac habitasse platea dictumst. Donec quis sem lorem.

2. IMAGEN PERSONALIZADA DE FONDO

Si lo que queremos es poner una imagen de fondo para nuestro texto pegaremos este otro código:

<div style="color: #000000; font-family: 'Bangers', cursive; text-align: center; background-image: url(...URL DE TU IMAGEN...); border: 1px solid #000; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 8px 1px #000000; padding: 20px; width: 100%;">
...Aquí va tu texto...
</div>

Color: color del texto.
Font-family: tipo de fuente para el texto.
Text-align: alineación del texto (left - center - right).
Background-image: URL de tu imagen para el fondo.
Border: grosor del borde (en píxeles), su color (en forma hexadecimal) y tipo.
Border-radius: cantidad de redondeo a aplicar para cada esquina (en píxeles).
Box-shadow: propiedades de la sombra (en píxeles) y su color (en forma hexadecimal).
Padding: espaciado entre el texto y los bordes del fondo (en píxeles).
Width: ancho total del recuadro (en píxeles o porcentaje).

Una vez ingresado nos quedará algo así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed ipsum ipsum. Integer molestie lacus et ligula sodales porttitor non id elit. Pellentesque vel lacinia felis. Sed congue, sem ut consectetur tincidunt, ipsum nulla lobortis justo, a suscipit urna ipsum lobortis ex. Quisque ut lacus eu massa pulvinar convallis. Nunc varius, enim vel porta lobortis, lectus nulla efficitur justo, a pharetra tellus justo viverra augue. In hac habitasse platea dictumst. Donec quis sem lorem.

3. CAMBIAR FUENTE DEL TEXTO

Accede a Google Fonts y busca la tipografía que más se adapte a tus preferencias. Una vez escogida, clic en +Select this style.

Hecho esto, se abrirá una ventana en la parte derecha del navegador titulada Selected Family. Acto seguido, entramos en la segunda pestaña llamada Embed y copiamos los dos códigos que aparecen al hacer click en @import.

Ahora sustituiremos el texto enmarcado rojo en la imagen superior por el texto en azul que pusimos en la regla font-family: del segundo código. Para terminar, será necesario instalar la fuente en nuestra web para su correcta visualización. Para ello copiaremos su código de estilo marcado de verde en la imagen superior y lo pegaremos antes del cierre de la etiqueta </head> dentro de la parte de Editar HTML de nuestra plantilla. Puedes localizar la etiqueta más rápido activando el buscador del editor pulsando Ctrl + F

AVISO: Si el Editor HTML te da el error de abajo al pegar el código del recuadro verde, prueba pegarlo suprimiendo el texto que he marcado de rojo en el siguiente ejemplo.

<style>
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
</style>

4. TRUCOS EXTRA

Dentro de la regla border: de ambos códigos, el valor solid corresponde al tipo de borde a utilizar. Estas son todas sus variables:

SOLID

DOTTED

DOUBLE

DASHED

GROOVE

RIDGE

INSET

OUTSET

Hemos estado utilizando la etiqueta <div> para crear secciones o agrupar el contenido, pero también podemos usar la etiqueta <span> para crear secciones más concretas y de una sola línea. Por ejemplo, si quisieras crear un fondo para el texto, pero no quieres que éste ocupe gran parte del ancho de tu blog, bastaría con pegar este otro código:

<span style="color: #000000; background: #defff9; border: 1px solid #000; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 8px 1px #000000; padding: 10px;">
...Aquí va tu texto...
</span>

Hecho esto, nos quedaría algo así:

Lorem ipsum dolor sit amet


Recuerda que el texto que insertemos dentro de la etiqueta <span> debe estar en una sola línea, o de lo contrario, se verá algo así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed ipsum ipsum. Integer molestie lacus et ligula sodales porttitor non id elit. Pellentesque vel lacinia felis. Sed congue, sem ut consectetur tincidunt, ipsum nulla lobortis justo a suscipit urna ipsum lobortis kum



Aplicándole más estilos CSS podemos conseguir diseños realmente estéticos como este de aquí abajo.

Elemento <div> con borde de color.

Para implementar el color sólo en los bordes que queramos, sustituiremos en nuestro código el valor border: por border-left: o por border-right: para situarlo a la derecha. Seguido de esto irán el ancho en píxeles, el tipo de borde y su color en forma hexadecimal. Si no reemplazamos el valor border: original no se aplicará la franja lateral deseada. El nuevo código debe quedarte así:

<div style="color: #000000; background: #eee; text-align: left; border-left: 5px solid #ff4000; box-shadow: 4px 4px 4px -1px #777777; padding: 10px; width: 60%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed ipsum ipsum.
</div>