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

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 Don Kseso Kseso

Comentarios: 2

  1. Wow muy interesante esta entrada! No conocia tu blog y me a encantado es unico!
    Los colores y todo en si! Esta hermoso, ya te estoy siguiendo en google + y con mi correo..
    Tengo una pregunta: Cuando entro a mi blog el scrol se desaparece y tengo que bajarlo con el mouse.. Aveces sale y aveces no sale y aunque he tratado de ver que lo provoca no doy con el asunto!
    Me podria ayudar?

    Ohh y tienes el tuto de como poner loc comentarios asi flotantes al costado como lo tienes aca?
    Mil gracias! Bendiciones!

    ResponderEliminar
    Respuestas
    1. Aunque se que exageras, gracias por tu opinión.

      Sobre tu scroll (o su falta de él):
      lo siento, pero no he podido dar con la causa. Se queda a la espera pero no termina de cargar todos los elementos.
      Lo que si he visto es que posiblemente no le viniese mal limpiar un poco el código. Demasiadas cosas por ahí.

      Quizás el problema sea un coincidir de varios:
      .body-fauxcolumns, .content-fauxcolumns {} lo tienes posicionado de forma absoluta y con overflow: hidden. Al igual que .fauxcolumn-outer {}
      Añade que por ahí tienes un selector ::-webkit-scrollbar marcando 10px y 13px
      Y sin descartar algún js que no deja de crear div´s al final del documento.

      Pero como te decía, no se ha llegado a cargar todo el documento.

      ¿Con el tuto de los comentarios a qué te refieres?
      Si es al widget para mostrarlos, creo recordar que Oloman en su blog tiene varios artículos al respecto.
      Si es a los estilos sólo tienes que ver el código fuente. Todos están ahí.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap