Cajas con barras de desplazamiento (Scrollboxes)

Los scrollboxes, son unas cajas que disponen de barras de desplazamiento.
Estas cajas son perfectas para simplificar, un texto u otro contenido que queramos añadir a nuestras entradas pero es demasiado largo.
Las barras de desplazamiento, nos permite desplazarnos (como bien dice la palabra) tanto hacia abajo como diagonalmente, con el fin de ver todo el contenido que hemos puesto.




Para añadir una caja Scrooboxes, solo tenemos que jugar un poco con un código HTML.
Este código lo podemos añadir directamente en nuestras entradas usando el botón de HTML.
Ahora os voy a dejar algunos códigos de cajas para que los podáis usar.
El primer código que vamos a mostrar es una caja simple, como esta:

Aquí pondremos el contenido de nuestra caja.

<div style="width:150px;height:450px; lineheight:3em;overflow:scroll;padding:5px;"> Aquí pondremos el contenido de nuestra caja. </div>

Como vemos en este caso es una caja de muy simple, pero voy a mostraros como podemos realizar algunos cambios,añadiendo color al fondo de la caja y a la tipografía.

<div style="width:150px;height:450px;line height:3em;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;scrollbarbasecolor:#DEBB07;">Otra caja más con color de texto y color de fondo de la caja. </div>

Nos quedará de esta forma:

Otra caja más con color de texto y color de fondo de la caja.

Para cambiar algunos datos usaremos:

width:150px; altura de la caja.
height:150px; largo de la caja
background-color:#FCFADD; color de fondo de la caja
font-family: 'indie flower': es el tipo de tipografía
color:#714D03;color de la letra
scrollbarbasecolor:#DEBB07; color de la barra de desplazamiento

Además de cambiar el  color de fondo de la caja, de la letra, de la tipografía ect.. podemos añadir un marco a la caja.
Como muestro aquí.

Además de cambiar el color de fondo, de la letra ect.. podemos añadir un marco a la caja.

<div style="width:150px;height:450px;line-height:3em;overflow:scroll;padding:5px;background-color:#FFF0F5;color:#000066;border:5px double #CC66CC;">Además de cambiar el color de fondo, de la letra ect.. podemos añadir un marco a la caja. </div>

En este caso he puesto un borde de 5px doble, de color fusia:
border:5px double #CC66CC
Para seguir viendo mas información de cajas Scrollboxes, podeis mirar este otro post.