One place for hosting & domains

      cambiar

      Cómo cambiar el estilo de las barras de desplazamiento con CSS


      Introducción

      En septiembre de 2018, las barras de desplazamiento de CSS de W3C definieron especificaciones para personalizar el aspecto de las barras de desplazamiento con CSS.

      A partir de 2020, 96 % de los usuarios de Internet ejecutan navegadores que admiten el estilo de barra de desplazamiento de CSS. Sin embargo, deberá escribir dos conjuntos de reglas de CSS para abarcar Blink y WebKit y también los navegadores de Firefox.

      En este tutorial, aprenderá a usar CSS para personalizar barras de desplazamiento para admitir navegadores modernos.

      Requisitos previos

      Para seguir este artículo, necesitará lo siguiente:

      Agregar estilo a las barras de desplazamiento en Chrome, Edge y Safari

      Actualmente, agregar estilo a las barras de desplazamiento para Chrome, Edge y Safari está disponible con el seudoelemento del prefijo de proveedor -webkit-scrollbar.

      A continuación, se muestra un ejemplo que utiliza los seudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track y ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Este código funciona en las últimas versiones de Chrome, Edge y Safari.

      Desafortunadamente, W3C abandonó formalmente esta especificación y probablemente quedará obsoleta con el paso del tiempo.

      Agregar estilo a las barras de desplazamiento en Firefox

      Actualmente, aplicar estilo a las barras de desplazamiento en Firefox está disponible con las nuevas barras de desplazamiento de CSS.

      A continuación, se muestra un ejemplo que utiliza las propiedades scrollbar-width y scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      A continuación, se muestra una captura de pantalla de la barra de desplazamiento que se genera con estas reglas de CSS:

      Captura de pantalla de una página web de ejemplo con una barra de desplazamiento personalizada con una barra de desplazamiento azul en un recuadro de desplazamiento anaranjado.

      Esta especificación comparte algunos puntos en común con la especificación -webkit-scrollbar para controlar el color de la barra de desplazamiento. Sin embargo, actualmente no se puede modificar el relleno y la redondez del “botón de desplazamiento”.

      Crear estilos de barra de desplazamiento a prueba del futuro

      Puede escribir su CSS de tal manera que sea compatible con las especificaciones -webkit-scrollbar y CSS Scrollbars.

      A continuación, se muestra un ejemplo que utiliza scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Los navegadores Blink y WebKit ignorarán las reglas que no reconocen y aplicarán las reglas -webkit-scrollbar. Los navegadores de Firefox ignorarán las reglas que no reconocen y aplicarán las reglas de CSS Scrollbars. Una vez que los navegadores Blink y WebKit ya no sean compatibles por completo con la especificación -webkit-scrollbar, regresarán fácilmente a la nueva especificación de las barras de CSS Scrollbar.

      Conclusión

      En este artículo, aprendió a usar CSS para agregar estilo a las barras de desplazamiento y garantizar que estos estilos sean reconocidos en la mayoría de los navegadores modernos.

      También es posible simular una barra de desplazamiento ocultando la barra de desplazamiento predeterminada y usando JavaScript para detectar la altura y la posición de desplazamiento. Sin embargo, estos enfoques tienen limitaciones a la hora de reproducir experiencias como el desplazamiento por inercia (por ejemplo, desactivar el movimiento al desplazarse con trackpads).

      Si desea obtener más información sobre CSS, consulte nuestra página del tema CSS para consultar ejercicios y proyectos de programación.



      Source link

      Cómo cambiar la opacidad de una imagen de fondo en CSS


      Con CSS y CSS3 puede hacer muchas cosas, pero establecer una opacidad en un fondo de CSS no es una de ellas. Sin embargo, si usa la creatividad, hay muchas soluciones creativas para hacer que parezca que está cambiando la opacidad de la imagen de fondo de CSS. Ambos métodos tienen una excelente compatibilidad con navegadores, que llega hasta Internet Explorer 8.

      Método 1: Utilizar el posicionamiento absoluto y una imagen

      Este método significa exactamente lo que dice. Simplemente se utiliza el posicionamiento absoluto en una etiqueta img normal y se hace que parezca que se usó la propiedad de background-image de CSS. Lo único que debe hacer es poner la imagen dentro de un contenedor position: relative;. Generalmente, así es como se ve el formato HTML:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
        <img src="https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png">
      </div>
      

      Y así es como se verá su CSS:

      .demo_wrap {
          position: relative;
          overflow: hidden;
          padding: 16px;
          border: 1px dashed green;
      }
      .demo_wrap h1 {
          padding: 100px;
          position: relative;
          z-index: 2;
      }
      .demo_wrap img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0.6;
      }
      

      El truco aquí es realizar un posicionamiento absoluto de la etiqueta img y estirarla para que llene el contenedor principal por completo. Y posicionar relativamente todo lo demás para poder establecer un z-index que lo arrastre por encima de img.

      A continuación, se muestra una demostración en tiempo real:

      Método 2: Usar los seudoelementos de CSS

      Este método luce sencillo a primera vista y definitivamente es el método preferido para hacerlo. Al usar los seudoelementos de CSS de :before o :after, puede crear un div con una imagen de fondo y establece una opacidad en ella. A continuación, se muestra el aspecto que tendría su formato HTML de forma aproximada:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
      </div>
      

      Y así es como se vería el CSS:

         .demo_wrap {
          position: relative;
          background: #5C97FF;
          overflow: hidden;
      }
      .demo_wrap h1 {
          padding: 50px;
          position: relative;
          z-index: 2;
      }
      /* You could use :after - it doesn't really matter */
      .demo_wrap:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0.6;
          background-image: url('https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png');
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;
      }
      

      Aquí también debemos mover el índice z del contenido (en este caso el <h1>) por encima del seudoelemento de fondo y debemos definir explícitamente position: absolute; y z-index: 1 en el seudoelemento :before.

      El resto de los atributos del seudoelemento existe para posicionarlo de manera que se superponga al 100% del elemento principal y también hacen uso de una nueva e inteligente propiedad de CSS: background-size: cover que dimensiona el fondo para cubrir el elemento sin cambiar las proporciones. A continuación, se muestra una pequeña demostración de este método:



      Source link