soy Kseso y esto EsCSS

If Scroll ⇒ Shadows (puro Css)

Sombras que aparecen o no en función de hacer scroll o no. Esto es, la sombra superior es visible al bacer scroll hacia abajo y la inferior desaparece al alcanzar la parte inferior de la caja. Una forma de indicar si hay más contenido oculto.

If Scroll ⇒ Shadows (puro Css)

·Por Kseso ✎ 2

Sombras que aparecen o no en función de hacer scroll o no. Esto es, la sombra superior es visible al hacer scroll hacia abajo y la inferior desaparece al alcanzar la parte inferior de la caja. Una forma de indicar si hay más contenido oculto.

En esta demo se logra con puro Css, por lo que se evita el uso de js y tener que calcular el desplazamiento del scroll para aplicar unos estilos u otros.

Posíblemente te recuerde a la demo de Lea Verou que incluía en el artículo Sticky header-shadow y parallax scroll. La diferencia es que allí la autora lo basa en el nuevo background-attachment: local;

Es un efecto que si usas blogger lo habrás visto en su panel de administración, o en g+, así como en multitud de otras páginas. Pero como me explico tan mal, mejor mira la demo de abajo. Haz scroll y observa qué ocurre en la parte superior de la caja que tiene el desplazamiento y al llegar al final de la misma verás que la sombra desaparece

Check out this Pen!

El marcado Html del "Scroll & Shadows"

Es sencillo y sin macado extra o sólo para lograr los efectos. Como ves, un contenedor del grupo, un encabezado siempre visible y la caja que contiene toda la información que es la se desplaza. Y en esta puedes alojar toto lo que quieras.

<div class="screen"> <h1>Scroll & shadows</h1> <div class="scrollshadow"> <p>Scroll & look at the shadows!</p> <ul> <!-- sus items --> </ul> </div> </div>

Css asociado al "Scroll & Shadows"

Lo primero a tener es la estructura base con el scroll y algún detalle ornamental más. Son detalles:

html, body {background: #eee; color: #8AA9B8;} .screen { background: #FFFFFF; margin: 10px auto 40px; overflow: hidden; position: relative; width: 300px; z-index: 5; border: 1px solid #CDCDCD; border-radius: 5px 5px 5px 5px; } h1 { background: #F9F9F9; border-bottom: 1px solid #CDCDCD; font-family: nunito, sans serif; font-size: 2rem; color: #999; height: 48px; line-height: 3rem; margin-bottom: 5px; position: relative; text-align: center; } .scrollshadow { font-family: monospace; margin-top: -0.3rem; max-height: 200px; overflow: auto; padding: 1rem 0; position: relative; } ul { list-style-type: none; position: static; /*La razón más abajo */ margin-bottom: -1rem; /*colisión de estilos con codepen*/ } li { font-family: carme, sans serif; font-size: 1rem; padding-left: 1rem; }

El resultado

Las sombras

Para tener las sombras y hacerlas visibles nos apoyamos en los dos pseudoelementos :before y :after de la caja general. Y los posicionamos de forma absoluta para que siempre estén en la misma posición

.screen:before { border-radius: 60%/10px; box-shadow: 2px 0 10px 3px rgba(0, 0, 0, 0.8); content: ""; height: 47px; left: 0; position: absolute; top: 0; width: 100%; } .screen:after { border-radius: 60%/10px; box-shadow: -2px 0 10px 2px rgba(0, 0, 0, 0.6); content: ""; height: 20px; left: 0; margin-left: 10%; position: absolute; bottom: -20px; width: 80%; }

El resultado abajo. Quita el fondo al h1 y verás donde está el .screen:before

Como ves, hagas lo que hagas con el scroll, las sombras siempre están ahí. Así que como Css no nos da herramientas para controlar nada en función de la posición del scroll, sólo es cuestión de pensar de otra manera:

Sobre el scroll no, pero el desplazamiento de los elementos sí los controla el scroll. Así que si tengo las sombras fijas y visibles sólo necesito "algo" que al "scrollear" la tape o destape.

Y ese "algo" va a ser de nuevo otro pseudoelemento:

Para esconder de inicio la sombra superior usamos el de la lista ul:before. Por esa razón la lista la posicioné como static. Así no es referente para el posicionamiento de su pseudoelemento y se puede incluir cualquier contenido antes de ella.

.scrollshadow ul:before { background: #FFFFFF; content: ""; display: block; height: 10px; left: 0; position: absolute; right: 0; top: 0rem; width: 100%; z-index: 8; }

Ya tenemos la sombra superior que se oculta o muestra al desplazar la barra del scroll estando de inicio oculta.

Ya sólo nos falta hacer lo mismo, pero a la inversa, con la sombra inferior. La tenemos visible, sólo hay que ocultarla cuando aparezca la última información. En la demo es el último item de la lista.

Para ello recurrimos al selector de último hijo ul li:last-child. Le ponemos el mismo background que tiene la caja del scroll y lo superponemos (eje-z) sobre la sombra:

ul li:last-child { background: #fff; z-index: 10; }

Y esta es la tapa de la sombra inferior. Permanecerá fuera de la vista hasta que el scroll alcance el final, momento en que ocultará a la sombra inferior.

EL resultado final del "Scroll & Shadows"

Por si falla codepen, aquí en otra fuente

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso