Código de CSS - Degradado al final de un scroll para mostrar que hay mas contenido

Imágen de perfil
Val: 96
Bronce
Ha aumentado su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Degradado al final de un scroll para mostrar que hay mas contenidográfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 21 de Diciembre del 2019 por Katas
539 visualizaciones desde el 21 de Diciembre del 2019
Agrega un degradado de desvanecimiento a un elemento que se desborda para indicar mejor que hay más contenido para desplazarse.

degradado

1
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 23 de Diciembre del 2019 (Publicado el 21 de Diciembre del 2019)gráfica de visualizaciones de la versión: 1
540 visualizaciones desde el 21 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .overflow-scroll-gradient {
        position: relative;
    }
    .overflow-scroll-gradient::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 240px;
        height: 25px;
        background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
        pointer-events: none;
    }
    .overflow-scroll-gradient__scroller {
        overflow-y: scroll;
        background: white;
        width: 240px;
        height: 200px;
        padding: 15px;
        line-height: 1.2;
    }
    </style>
</head>
 
<body>
 
<div class="overflow-scroll-gradient">
    <div class="overflow-scroll-gradient__scroller">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
        Iure id exercitationem nulla qui repellat laborum vitae, <br />
        molestias tempora velit natus. Quas, assumenda nisi. <br />
        Quisquam enim qui iure, consequatur velit sit? <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
        Iure id exercitationem nulla qui repellat laborum vitae, <br />
        molestias tempora velit natus. Quas, assumenda nisi. <br />
        Quisquam enim qui iure, consequatur velit sit?
    </div>
</div>
 
</body>
</html>



Comentarios sobre la versión: 1 (2)

Imágen de perfil
22 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Manuel
13 de Febrero del 2020
estrellaestrellaestrellaestrellaestrella
interesante, muchas gracias
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5748