Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Barras de desplazamiento personalizadas con CSS y Webkit

El diseño de la interfaz de usuario de la página web con una barra de desplazamiento personalizada agrega un valor adicional a su sitio web. Las barras de desplazamiento personalizadas hacen que el sitio se sienta y se vea diferente. La barra de desplazamiento del navegador se puede personalizar usando CSS. Usando el pseudo-elemento CSS, puede cambiar fácilmente el estilo predeterminado de la barra de desplazamiento con su estilo personalizado. En este tutorial, le mostraremos cómo puede crear una barra de desplazamiento personalizada y personalizar el aspecto de la barra de desplazamiento del navegador con Webkit (pseudoelemento).
WebKit te permite diseñar barras de desplazamiento con tu CSS personalizado. Si se define el pseudo-elemento de la barra de desplazamiento, WebKit desactiva el estilo de la barra de desplazamiento incorporada y usa el estilo que se proporciona en CSS en: - elemento de barra de desplazamiento webkit.
Aquí proporcionaremos un breve fragmento de código CSS para cambiar el estilo de la barra de desplazamiento predeterminada y crear una barra de desplazamiento personalizada con WebKit . Usaremos solo 3 pseudo-elementos, webkit-scrollbar , webkit-scrollbar-trackwebkit-scrollbar-thumb en WebKit. Usa el siguiente CSS en tu página web para crear barras de desplazamiento personalizadas.

Estilo de barra de desplazamiento personalizado 1:

:: - webkit-scrollbar {
     ancho :  12 px ;
}
:: - webkit-scrollbar-track {
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.3 ); 
    radio del borde :  10 px ;
}
:: - webkit-scrollbar-thumb {
    radio del borde :  10 px ;
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.5 );
}
custom-scrollbar-css-webkit-style-1-codexworld

Estilo de barra de desplazamiento personalizado 2:

:: - webkit-scrollbar {
     ancho :  12 px ;
}
:: - webkit-scrollbar-track {
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.3 ); 
    radio del borde :  10 px ;
}
:: - webkit-scrollbar-thumb {
    radio del borde :  10 px ;
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.5 );
}
custom-scrollbar-css-webkit-style-2-codexworld

Estilo de barra de desplazamiento personalizado 3:

:: - webkit-scrollbar {
     ancho :  12 px ;
    color de fondo :  # F5F5F5 ;
}
:: - webkit-scrollbar-track {
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.3 );
    color de fondo :  # F5F5F5 ;
}
:: - webkit-scrollbar-thumb {
    color de fondo :  # F90 ; 
    imagen de fondo : -webkit-linear-gradient ( 90 grados , rgba ( 255, 255, 255, .2 ) 25 % , transparente  25 % , transparente  50 % , rgba ( 255, 255, 255, .2 ) 50 % , rgba ( 255, 255, 255, .2 ) 75 % , transparente  75 % , transparente )
}

Barra de desplazamiento personalizada en Div

Puede crear una barra de desplazamiento personalizada para el contenido div con Webkit. La clase de elemento o id deben especificarse en webkit-scrollbar, webkit-scrollbar-track y webkit-scrollbar-thumb. Los siguientes fragmentos de código hacen una barra de desplazamiento personalizada para un div específico usando CSS. 
Código HTML:
< div  class = "content" >
     <! - el contenido de div va aquí -> 
</ div >
Código CSS:
.content :: - webkit-scrollbar {
     width :  12 px ;
}
.content :: - webkit-scrollbar-track {
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.3 ); 
    radio del borde :  10 px ;
}
.content :: - webkit-scrollbar-thumb {
     border-radius :  10 px ;
    -webkit- box-shadow :  recuadro  0  0  6 px  rgba ( 0,0,0,0.5 );
}

Selectores de la barra de desplazamiento (pseudo elementos)

Los siguientes pseudo elementos están disponibles para personalizar la barra de desplazamiento del navegador.
  • ::-webkit-scrollbar - Seleccione la barra de desplazamiento.
  • ::-webkit-scrollbar-button - Seleccione los botones en la barra de desplazamiento.
  • ::-webkit-scrollbar-thumb - Seleccione el controlador de desplazamiento que se puede arrastrar.
  • ::-webkit-scrollbar-track - Seleccione la barra de progreso de la barra de desplazamiento.
  • ::-webkit-scrollbar-track-piece - Selecciona la barra de progreso sin tirador.
  • ::-webkit-scrollbar-corner - Seleccione la esquina inferior de la barra de desplazamiento.
  • ::-webkit-resizer - Seleccione el controlador de tamaño arrastrable.

Conclusión

En nuestro fragmento de código de ejemplo, solo se proporcionan algunos estilos básicos para la barra de desplazamiento personalizada. Puede cambiar el estilo de las barras de desplazamiento personalizadas en función de la IU de su página web. Para personalizar la barra de desplazamiento, especifique el CSS con :: - webkit-scrollbar , :: - webkit-scrollbar-track , y :: - webkit-scrollbar-thumb pseudo elementos.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas