Ya he visto qué son las barras de desplazamiento (scroll bars) y cómo pueden crearse con código HTML.
(Ver entrada "Cajas de texto con barra de desplazamiento HTML").
Aunque parezca en principo un elemento con escasa relevancia, que cumple su función y no merece más atención, puede dar un toque creativo y sorprendente al blog si se aplica estilo.
Como a estas alturas del aprendizaje me doy cuenta de que en una página web o blog, a parte de la importancia del contenido es igual o incluso más relevante el aspecto, diseño, estilo, etc...,que a fin de cuentas es lo que puede captar o no la atención de un visitante en muy pocos segundos, no voy a olvidar cómo se puede aplicar estilo con CSS a las scroll bars para que destaquen en el blog y agraden al usuario.
En esta entrada voy a personalizar las barras de desplazamiento en tres casos distintos:
🌑 En el blog.
🌑 En una caja de texto.
🌑 En una caja de texto.
🌑 En los gadgets de la plantilla, en concreto en la scrollbar del gadget de Etiquetas.
(Ver cómo añadir a la plantilla el gadget de etiquetas).
(Ver cómo añadir a la plantilla el gadget de etiquetas).
Personalizar el scroll en Webkit
Es algo complicado personalizar la barra de desplazamiento mediante CSS porque no está soportado en todos los navegadores y los que lo admiten, la sintaxis es distinta dependiendo del navegador.
Se puede cambiar su diseño mediante el uso de jQuery o JavaSscript pero implica cargar las páginas con scripts, con el riesgo de que ocasionen conflictos.
Por el momento me limito a aplicar el estilo solo con CSS, haciendo uso de algunos pseudoelementos de Webkit para personalizar las scrollbars.
"Webkit, es el motor de navegación web utilizado por Safari, App Store y muchas otras aplicaciones de OS X, iOS y Linux. Los desarrolladores web pueden mantenerse actualizados sobre el soporte de funciones, seguir el desarrollo en el blog, probar las últimas tecnologías web descargando Safari Technology Preview y reportar errores." (Fuente _ https://webkit.org)
Webkit es un motor de renderizado de páginas web (software que toma el contenido etiquetado con HTML y los estilos CSS para mostrarlo formateado) que implementaron hace años los navegadores de Opera, Google Chrome (a partir de 2013 pasa a Blink, desarrollado por Google y que está basado en Webkit), Safari y su versión móvil en iOS, y Android.
Es incompatible para el navegador de Mozilla Firefox cuyo motor es Gecko (están preparando un nuevo motor Servo), Internet Explorer (motor Trident) y Microsoft Edge (motor EdgeHTML) de Microsoft.
Como Google Chrome domina el ranking de los navegadores más usados y Webkit es soportado por la navegación móvil, en la mayoría de las ocasiones se mostrará el formato aplicado a la barra de navegación. En caso de no ser compatible el navegador, la barra de navegación se mostrará con los valores por defecto.
Pseudo-elementos del scroll en Webkit
Antes de aplicar estilo a la barra de desplazamiento voy a ver cuales son los elementos que forman parte del scroll (desplazamiento del contenido en 2D) para poder aplicar estilo CSS correctamente a la scroll bar. A todos esto pseudo-elementos se le pueden añadir bordes, colores o imágenes como fondo, sombras, distintos tamaños, etc. Cuando se incluye cualquiera de estos pseudo-elementos, Webkit desactiva el formato por defecto y aplica el indicado por CSS.
🌑 scrollbar
Afecta al estilo del scroll (barra de desplazamiento) asociada a un elemento y permite indicar sus dimensiones.
🌑 scrollbar-button
Hace referencia a los botones de la barra de desplazamiento.
🌑 scrollbar-track
Corresponde a la pista o área de desplazamiento (entre los extremos de la barra o botones) que incluye el pulgar (thumb) y la pieza de la pista (track-piece).
🌑 scroll-thumb
Es el pulgar que se desplaza dentro de la pista o área de desplazamiento (track)
🌑 scrollbar-track-piece
Es la pieza de la pista (track) que corresponde al área no ocupada por el pulgar (thumb).
🌑 scrollbar-corner
Afecta a la esquina inferior derecha de la ventana del scroll.
🌑 resizer
Se usa para redimensionar la ventana del scroll.
Pseudo-clases para aplicar a los pseudo-elemento del scroll
___________________________________________________________________________________________
:horizontal
Para los elementos del scroll con orientación horizontal.
___________________________________________________________________________________________
:vertical
Para los elementos del scroll con orientación vertical.
___________________________________________________________________________________________
:decrement
Para el botón izquierdo y trayecto hacia la izquierda (barra horizontal).
Para el botón superior y trayecto hacia arriba (barra vertical).
___________________________________________________________________________________________
:increment
Para el botón derecho y trayecto hacia la derecha (barra horizontal).
Para el botón inferior y trayecto hacia abajo (barra vertical).
___________________________________________________________________________________________
:start
Determina si el botón y trayecto van antes de la barra del scroll (pulgar).
___________________________________________________________________________________________
:end
Determina si el botón y trayecto van después de la barra del scroll (pulgar).
___________________________________________________________________________________________
:double-button
Detecta si un botón forma parte de un par de botones que están juntos en un mismo extremo del scroll o
si el trayecto se apoya en un par de botones.
___________________________________________________________________________________________
:single-button
Detecta si un botón está solo al final de la barra de desplazamiento o si el trayecto se apoya en un solo botón.
___________________________________________________________________________________________
:no-button
Determina si el trayecto se desplaza al borde de la barra de scroll cuando no hay botones en el extremo.
___________________________________________________________________________________________
:corner-present
Determina si se muestra la esquina del scroll.
___________________________________________________________________________________________
:window-inactive
Determina si la ventana que contiene el scroll está inactiva.
___________________________________________________________________________________________
:hover
Efecto hover al posicionar el ratón sobre un elemento.
___________________________________________________________________________________________
:active
Para el elemento que está activo, desde que se hace clic con el ratón hasta que se suelta.
____________________________________________________________________________________________
:enabled
Para el elemento que está habilitado, que es cuando puede ser activado o acepta foco.
____________________________________________________________________________________________
:disabled
Para el elemento que está deshabilitado, no puede ser activado ni acepta foco.
____________________________________________________________________________________________
:display:none
Para ocultar partes del scroll.
____________________________________________________________________________________________
:margin
Permite establecer márgenes que si son negativos harán que el trayecto cubra parte de los botones.
____________________________________________________________________________________________
Aplicar estilo CSS a las barras de desplazamiento para todo el blog
En este primer ejemplo voy a personalizar las barras de desplazamiento que se mostrarán en todos las páginas y elementos del blog.
Hago una copia de seguridad de la plantilla y a continuación voy al menú de Blogger: Tema (antes Plantilla) → Editar HTML.
Con el buscador (CTRL+F) localizo </b:skin> y sobre esta etiqueta de cierre pego el código CSS siguiente,
/*Scrollbar barra de desplazamiento para el blog
------------------------------------------------------------------- */
::-webkit-scrollbar { /*espacio destinado a las barras de desplazamiento*/
width:20px; /*ancho scrollbar vertical*/
height:20px; /*altura scrollbar horizontal*/
}
::-webkit-scrollbar-button { /*botones extremos barras de desplazamiento*/
width:20px; /*ancho botones barra horizontal*/
height:20px; /*alto botones barra vertical*/
}
::-webkit-scrollbar-button:horizontal:increment { /*botón derecho barra horizontal*/
background-color: violet; /*fondo violeta botón*/
background-image: url("URL imagen flecha_dcha.png"); /*imagen flecha a la derecha fondo transparente*/
}
::-webkit-scrollbar-button:horizontal:decrement { /*botón izquierdo barra horizontal*/
background-color: lightblue; /*fondo azul claro botón*/
background-image: url("URL imagen flecha_izda.png"); /*imagen flecha a la izquierda fondo transparente*/
}
::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo verde claro botón*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo fondo transparente*/
}
::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo oro botón*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba fondo transparente*/
}
::-webkit-scrollbar-track:horizontal { /*pista entre los botones de la barra horizontal*/
background: linear-gradient(#FF8C07 15%, #000000 90%); /*fondo degradado lineal*/
}
::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha*/
}
::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado*/
border:1.2px solid #7a7a0f; /*estilo borde sólido*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde sólido*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial en gris, blanco y snow*/
}
::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial*/
}
::-webkit-scrollbar-corner { /*esquina inferior derecha de la ventana*/
background-color: lavender; /*fondo lavanda esquina*/
background-image: url("URL imagen resizer"); /*imagen icono resizer*/
background-repeat: no-repeat; /*no repite la imagen*/
background-position: bottom right; /*la imagen se posiciona a la derecha*/
}
------------------------------------------------------------------- */
::-webkit-scrollbar { /*espacio destinado a las barras de desplazamiento*/
width:20px; /*ancho scrollbar vertical*/
height:20px; /*altura scrollbar horizontal*/
}
::-webkit-scrollbar-button { /*botones extremos barras de desplazamiento*/
width:20px; /*ancho botones barra horizontal*/
height:20px; /*alto botones barra vertical*/
}
::-webkit-scrollbar-button:horizontal:increment { /*botón derecho barra horizontal*/
background-color: violet; /*fondo violeta botón*/
background-image: url("URL imagen flecha_dcha.png"); /*imagen flecha a la derecha fondo transparente*/
}
::-webkit-scrollbar-button:horizontal:decrement { /*botón izquierdo barra horizontal*/
background-color: lightblue; /*fondo azul claro botón*/
background-image: url("URL imagen flecha_izda.png"); /*imagen flecha a la izquierda fondo transparente*/
}
::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo verde claro botón*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo fondo transparente*/
}
::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo oro botón*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba fondo transparente*/
}
::-webkit-scrollbar-track:horizontal { /*pista entre los botones de la barra horizontal*/
background: linear-gradient(#FF8C07 15%, #000000 90%); /*fondo degradado lineal*/
}
::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha*/
}
::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado*/
border:1.2px solid #7a7a0f; /*estilo borde sólido*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde sólido*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial en gris, blanco y snow*/
}
::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial*/
}
::-webkit-scrollbar-corner { /*esquina inferior derecha de la ventana*/
background-color: lavender; /*fondo lavanda esquina*/
background-image: url("URL imagen resizer"); /*imagen icono resizer*/
background-repeat: no-repeat; /*no repite la imagen*/
background-position: bottom right; /*la imagen se posiciona a la derecha*/
}
El aspecto de las barras de desplazamiento para el blog y para todos los elementos que incorporen scroll bars será el siguiente:
Pista barra horizontal. ::-webkit-scrollbar-track:horizontal
Pulgar barra vertical. ::-webkit-scrollbar-thumb
Pulgar barra horizontal. ::-webkit-scrollbar-thumb
Efecto hover sobre pulgar barra vertical. ::-webkit-scrollbar-thumb:hover
Pulgar activo barra vertical. :-webkit-scrollbar-thumb:active
Al igual que para los iconos de redes sociales que he agregado al blog de prueba, las imágenes de los botones y esquina se pueden conseguir por el mismo medio (ver "Botones de redes sociales descargados de la web").
Aplicar estilo CSS a las barras de desplazamiento para una determinada caja de texto
En este segundo ejemplo voy a ver cómo se pueden personalizar las barras de desplazamiento para una caja de texto concreta.
Como el formato se aplicará de forma individual (y no general como en el caso anterior), tengo que asignar un nombre de clase a la caja de texto en la que voy a personalizar el estilo de sus barras de desplazamiento así que debo trabajar el HTML de la entrada en la que se encuentra.
Accedo a la entrada y hago clic sobre la pestaña HTML.
Introduzco el siguiente código,
(corresponde al cuadro de texto del ejemplo anterior)
<style type="text/css">
div.scrollbar {
height: 100px;
margin: 0px 100px 0px 100px;
overflow: auto;
padding: 30px;
text-align: left;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
white-space: nowrap;
}
</style>
<div class="scrollbar">.....texto a incluir en la caja de texto....</div>
div.scrollbar {
height: 100px;
margin: 0px 100px 0px 100px;
overflow: auto;
padding: 30px;
text-align: left;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
white-space: nowrap;
}
</style>
<div class="scrollbar">.....texto a incluir en la caja de texto....</div>
Ya he creado una clase con el nombre "scrollbar" para el cuadro de texto que he definido con el elemento div.
Para aplicar estilo a la clase regreso a la plantilla del blog y, al igual que en el caso anterior, pego justo encima de la etiqueta </b:skin> el código CSS siguiente:
El código CSS añadido es exactamente igual al del ejemplo anterior (para
todo el blog) pero los pseudo-elementos del scroll deben ir precedidos
por .scrollbar (el nombre de la clase definida para el elemento div de la caja de texto).
/*Scrollbar barra de desplazamiento para textarea
---------------------------------------------------------------------- */
.scrollbar::-webkit-scrollbar { /*espacio destinado a las barras de desplazamiento*/
width:20px; /*ancho scrollbar vertical*/
height:20px; /*altura scrollbar horizontal*/
}
.scrollbar::-webkit-scrollbar-button { /*botones extremos barras de desplazamiento*/
width:20px; /*ancho botones barra horizontal*/
height:20px; /*alto botones barra vertical*/
}
.scrollbar::-webkit-scrollbar-button:horizontal:increment { /*botón derecho barra horizontal*/
background-color: violet; /*fondo violeta botón*/
background-image: url("URL imagen flecha_dcha.png"); /*imagen flecha a la derecha fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:horizontal:decrement { /*botón izquierdo barra horizontal*/
background-color: lightblue; /*fondo azul claro botón*/
background-image: url("URL imagen flecha_izda.png"); /*imagen flecha a la izquierda fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo verde claro botón*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo oro botón*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba fondo transparente*/
}
.scrollbar::-webkit-scrollbar-track:horizontal { /*pista entre los botones de la barra horizontal*/
background: linear-gradient(#FF8C07 15%, #000000 90%); /*fondo degradado lineal*/
}
.scrollbar::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha*/
}
.scrollbar::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado*/
border:1.2px solid #7a7a0f; /*estilo borde sólido*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
.scrollbar::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde sólido*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial en gris, blanco y snow*/
}
.scrollbar::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial*/
}
.scrollbar::-webkit-scrollbar-corner { /*esquina inferior derecha de la ventana*/
background-color: lavender; /*fondo lavanda esquina*/
background-image: url("URL imagen resizer"); /*imagen icono resizer*/
background-repeat: no-repeat; /*no repite la imagen*/
background-position: bottom right; /*la imagen se posiciona a la derecha*/
}
---------------------------------------------------------------------- */
.scrollbar::-webkit-scrollbar { /*espacio destinado a las barras de desplazamiento*/
width:20px; /*ancho scrollbar vertical*/
height:20px; /*altura scrollbar horizontal*/
}
.scrollbar::-webkit-scrollbar-button { /*botones extremos barras de desplazamiento*/
width:20px; /*ancho botones barra horizontal*/
height:20px; /*alto botones barra vertical*/
}
.scrollbar::-webkit-scrollbar-button:horizontal:increment { /*botón derecho barra horizontal*/
background-color: violet; /*fondo violeta botón*/
background-image: url("URL imagen flecha_dcha.png"); /*imagen flecha a la derecha fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:horizontal:decrement { /*botón izquierdo barra horizontal*/
background-color: lightblue; /*fondo azul claro botón*/
background-image: url("URL imagen flecha_izda.png"); /*imagen flecha a la izquierda fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo verde claro botón*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo fondo transparente*/
}
.scrollbar::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo oro botón*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba fondo transparente*/
}
.scrollbar::-webkit-scrollbar-track:horizontal { /*pista entre los botones de la barra horizontal*/
background: linear-gradient(#FF8C07 15%, #000000 90%); /*fondo degradado lineal*/
}
.scrollbar::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha*/
}
.scrollbar::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado*/
border:1.2px solid #7a7a0f; /*estilo borde sólido*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
.scrollbar::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde sólido*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial en gris, blanco y snow*/
}
.scrollbar::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial*/
}
.scrollbar::-webkit-scrollbar-corner { /*esquina inferior derecha de la ventana*/
background-color: lavender; /*fondo lavanda esquina*/
background-image: url("URL imagen resizer"); /*imagen icono resizer*/
background-repeat: no-repeat; /*no repite la imagen*/
background-position: bottom right; /*la imagen se posiciona a la derecha*/
}
Aplicar estilo CSS a las barras de desplazamiento de un gadget
En este último ejemplo voy a añadir las barras de desplazamiento a un gadget de la plantilla, en concreto al gadget de Etiquetas.
Una vez que he añadido el gadget de Etiquetas al blog (con disposición en lista) su aspecto por el momento es el siguiente.
El problema es que el blog tiene muchas etiquetas y esto ocasiona que el gadget ocupe practicamente todo el espacio destinado a la barra lateral o sidebar del blog.
Una forma de solucionarlo es añadiendo al gadget las barras de desplazamiento. Para esto tan solo tengo que añadir código CSS a la plantilla.
De nuevo regreso a la plantilla del blog (Tema → Editar HTML) y añado encima de la etiqueta </b:skin> el código CSS siguiente:
/*Gadget Etiquetas con scrollbar
---------------------------------------------*/
#Label1 .widget-content { /*gadget etiquetas*/
height: 150px; /*altura*/
widht: auto; /*ancho automático*/
overflow: auto; /*recorte automático de contenido con scrollbar*/
{
---------------------------------------------*/
#Label1 .widget-content { /*gadget etiquetas*/
height: 150px; /*altura*/
widht: auto; /*ancho automático*/
overflow: auto; /*recorte automático de contenido con scrollbar*/
{
He localizado el nombre del gadget accediendo a Tema → Editar HTML → Ir la widget.
Selecciono el widget (para este ejemplo Label1) y Blogger me dirige a la zona de la plantilla con el código HTML que corresponde a este widget.
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
La id del widget es 'Label1' y el nombre de clase es 'widget-content'.
- Las id van precedidas del signo almohadilla #
- Las clases van precedidas de un punto .
Por lo tanto para personalizar el gadget de Etiquetas debo usar,
#Label1 .widget-content
Ahora el gadget se muestra en una caja, ocupa menos espacio y tiene una barra vertical para desplazarse por el contenido.
Si queremos aplicar estilo al gadget y a su barra de desplazamiento tenemos que añadir más código CSS.
Ejemplo de Gadget Etiquetas con scrollbar vertical, personalizado con CSS
Código CSS a añadir sobre la etiqueta de cierre </b:skin> :
/*Gadget Etiquetas con scrollbar
---------------------------------------------*/
#Label1 h2 { /*título gadget Etiquetas*/
font-size:18px; /*tamaño letra título*/
color: indigo; /*color título*/
text-align :center; /*título alineado al centro*/
}
#Label1 .widget-content { /*caja gadget Etiquetas*/
height: 175px; /*altura caja*/
widht: auto; /*ancho automático*/
overflow: auto; /*recorte automático de contenido con scrollbar*/
background: indigo; /*color fondo caja*/
color:red; /*color punto etiquetas*/
padding-left:6px; /*relleno punto etiquetas*/
}
#Label1 ul li a { /*enlaces etiquetas*/
margin-left:5px; /*margen*/
color:yellow; /*color letra*/
font-weight: bold; /*letra en negrilla*/
}
#Label1 .widget-content::-webkit-scrollbar { /*espacio destinado a la barra de desplazamiento*/
width:20px; /*ancho scrollbar*/
height:20px; /*alto scrollbar*/
}
#Label1 .widget-content::-webkit-scrollbar-button { /*botones extremos barra*/
height:20px; /*alto botón barra*/
width:20px; /*ancho botón barra*/
}
#Label1 .widget-content::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo botón inferior barra vertical*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo*/
}
#Label1 .widget-content::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo botón superior barra vertical*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba*/
}
#Label1 .widget-content::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha para pista*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado pulgar*/
border:1.2px solid #7a7a0f; /*estilo borde pulgar*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde pulgar hover*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial efecto hover*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial */
}
---------------------------------------------*/
#Label1 h2 { /*título gadget Etiquetas*/
font-size:18px; /*tamaño letra título*/
color: indigo; /*color título*/
text-align :center; /*título alineado al centro*/
}
#Label1 .widget-content { /*caja gadget Etiquetas*/
height: 175px; /*altura caja*/
widht: auto; /*ancho automático*/
overflow: auto; /*recorte automático de contenido con scrollbar*/
background: indigo; /*color fondo caja*/
color:red; /*color punto etiquetas*/
padding-left:6px; /*relleno punto etiquetas*/
}
#Label1 ul li a { /*enlaces etiquetas*/
margin-left:5px; /*margen*/
color:yellow; /*color letra*/
font-weight: bold; /*letra en negrilla*/
}
#Label1 .widget-content::-webkit-scrollbar { /*espacio destinado a la barra de desplazamiento*/
width:20px; /*ancho scrollbar*/
height:20px; /*alto scrollbar*/
}
#Label1 .widget-content::-webkit-scrollbar-button { /*botones extremos barra*/
height:20px; /*alto botón barra*/
width:20px; /*ancho botón barra*/
}
#Label1 .widget-content::-webkit-scrollbar-button:vertical:increment { /*botón inferior barra vertical*/
background-color: lightgreen; /*fondo botón inferior barra vertical*/
background-image: url("URL imagen flecha_abajo.png"); /*imagen flecha hacia abajo*/
}
#Label1 .widget-content::-webkit-scrollbar-button:vertical:decrement { /*botón superior barra vertical*/
background-color: gold; /*fondo botón superior barra vertical*/
background-image: url("URL imagen flecha_arriba.png"); /*imagen flecha hacia arriba*/
}
#Label1 .widget-content::-webkit-scrollbar-track:vertical { /*pista entre los botones de la barra vertical*/
background: linear-gradient(to right, #FF8C07 15%, #000000 90%); /*fondo degradado lineal hacia la derecha para pista*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb { /*pulgar que se desplaza por el track*/
border-radius: 18px; /*borde redondeado pulgar*/
border:1.2px solid #7a7a0f; /*estilo borde pulgar*/
background: radial-gradient(#d9dde2 5%, #7a7a0f 90%); /*fondo degradado lineal*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb:hover { /*efecto hover cuando el ratón se posiciona sobre el pulgar*/
border:1.2px solid grey; /*estilo borde pulgar hover*/
background: radial-gradient(circle, snow 2%, white 1%, grey); /*fondo radial efecto hover*/
}
#Label1 .widget-content::-webkit-scrollbar-thumb:active { /*pulgar activo cuando se pulsa y se arrastra*/
border:1.2px solid goldenrod; /*estilo borde pulgar activo*/
background: radial-gradient(palegoldenrod 5%, goldenrod 85%, gold); /*fondo radial */
}