.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Scrollboxes cajas para nuestras entradas

16 nov 2020
 Los Scrollboxes son cajas que contienen las barras de desplazamiento.

Esta caja de contenido nos viene muy bien para simplificar un texto otro contenido que sea demasiado largo para nuestras entradas

 Las barras de desplazamiento permiten desplazarse hacia abajo (o en diagonal) con el fin de ver todo el contenido de la caja y así simplificarlo.

Para añadirla nos tendremos que ir nuestra entrada y HTML e insertar esté código.

<div style="width:150px;height:150px; lineheight:3em;overflow:scroll;padding:5px;"> Aquí pondremos el contenido de nuestra caja. </div> 
Simplemente tenemos que cambiar las medidas width (largo) y height (ancho) por las medidas que queramos.
En este caso lo tenenos a 150px tanto de largo como de ancho.
Y este será el resultado.

Aquí pondremos el contenido de nuestra caja.


 Otra forma de ponerla es esta:

Aquí hemos añadido color al fondo de la caja y a la tipografía.


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


Y así se verá


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
  • color:#714D03;color de la letra
  • scrollbar-base-color:#DEBB07;" color de la barra

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

border:5px double #CC66CC;


<div style="width:150px;height:150px;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>

Y se verá así:

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

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos