es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo crear CSS solo para pie de página adhesivo

Normalmente, necesitamos JavaScript para realizar efectos de desplazamiento relacionados con diferentes acciones del usuario en páginas web. La secuencia de comandos hace el trabajo de hacer un seguimiento de hasta qué punto el desplazamiento hacia arriba o hacia abajo toma una página y desencadena una acción cuando se alcanza una altura de umbral.

No es particularmente malo usar JavaScript para desplazarse por los efectos. De hecho, hay casos más complicados que son imposibles de resolver sin JavaScript . Sin embargo, hay hacks CSS que pueden reemplazar estos scripts a veces.

Esta publicación te mostrará cómo crear efectos de revelado de pie de página en el desplazamiento de página mediante CSS. Utilizaremos dos casos de uso para demostrar esto: uno para toda la página (ver demostración) y otro para elementos de página individuales, como artículos.

Página completa

Necesitamos crear un pie de página que aparezca debajo de la página mientras el usuario se desplaza hacia abajo. Además, cuando están desplazando la página hacia atrás, el pie de página debe ocultarse debajo de la página nuevamente.

Para lograr este objetivo, primero tenemos que crear un pie de página con una posición fija en la parte inferior de la pantalla.

1. Crea un pie de página fijo

Vamos a agregar un poco de contenido y un pie de página a la página primero. Estoy usando las etiquetas HTML

y
para la semántica. Sin embargo,
funciona también

En mi demostración, hay una imagen de murciélago que se muestra dentro del pie de página para un efecto no tan tenebroso, pero puede elegir cualquier otra imagen que desee.

Sigue desplazándote hasta que veas el pie de página 
Lorem ipsum dolor sit amet ...
 cuerpo {font-family: Crimson Text; tamaño de fuente: 13pt; margen: 0; } pie de página {ancho: 100%; altura: 200px; posición: fija; abajo: 0; color de fondo: # DD5632; }
2. Ocultar el pie de página

Aplique la regla z-index:-1 al pie de página para colocarlo detrás de todos los demás elementos en la página.

Colorea tanto el y etiquetas blancas para cubrir el pie de página .

 cuerpo, html {background-color: #fff; } pie de página {ancho: 100%; altura: 200px; posición: fija; abajo: 0; color de fondo: # DD5632; índice z: -1; }
3. Ajuste el margen inferior

Establecer el margin-bottom de la etiqueta igual a la altura del pie de página (en mi ejemplo 200px).

De esta forma, habrá suficiente espacio en la parte inferior para que el pie de página esté visible cuando el usuario se desplace por la página.

 cuerpo {altura: 1000px; margen: 0; margen inferior: 200px; }

Eso es. El efecto de revelar pie de página para una página web completa está hecho. Mira la demostración de Codepen a continuación.

Elementos de página individuales

Esta técnica se puede usar para un elemento HTML individual (con un pie de página) que sea lo suficientemente largo para un efecto de desplazamiento de página adecuado. El método es un poco raro, ya que actualmente no funciona en Chrome e Internet Explorer, pero tiene una buena inversión.

1. Crea un artículo largo

Primero, creemos un artículo largo con un pie de página. Para promover el código semántico, elegí

y
.

Articulo 1 
Lorem ipsum dolor sit amet ...

A continuación puede ver el estilo básico del artículo y el pie de página.

 artículo {ancho: 500px; color de fondo: # FEF9F3; relleno: 20px 40px; } article> footer {height: 100px; color de fondo: # FE0178; } body {font-family: cormorán garamond; }

Mi artículo actualmente se ve así. Por supuesto, también puedes usar otras reglas básicas de estilo.

2. Hacer el pie de página adhesivo

El pie de página anterior fue reparado, este será pegajoso . Aplique la position:sticky regla position:sticky al pie de página, por lo que se moverá dentro de los límites del artículo pero aún mantendrá su posición en la pantalla mientras el usuario se desplaza hacia arriba y hacia abajo.

 artículo> pie de página {altura: 100px; color de fondo: # FE0178; posición: -webkit-sticky; posición: pegajosa; abajo: 80px; }

La bottom:80px regla de bottom:80px corrige la posición del pie de página 80 píxeles por encima de la parte inferior del artículo .

Puede ajustar su valor a su gusto, ya que determina el punto donde el pie de página comienza a aparecer o desaparecer mientras el usuario se desplaza hacia abajo o hacia arriba.

Proporcione el mismo valor para el margen inferior del artículo, de modo que haya suficiente espacio en la parte inferior para revelar el pie de página completo.

 artículo {ancho: 500px; color de fondo: # FEF9F3; relleno: 20px 40px; margen inferior: 80px; }
3. Agregue un fondo parcialmente transparente

Ahora necesitamos una abertura al pie de la parte inferior del artículo para ver que el pie de página pegajoso se desplaza hacia abajo y hacia arriba.

Para lograr esto, reemplace el background-color de background-color del artículo con una background-image degradado lineal, que desde la parte superior del artículo hasta la parte superior del pie de página está coloreada con el color de fondo del artículo, y la parte restante en la parte inferior se hace transparente .

 artículo {ancho: 500px; relleno: 20px 40px; imagen de fondo: gradiente lineal (hacia abajo, # FEF9F3 calc (100% - 120px), transparente 0); margen inferior: 80px; }

La función CSS de calc(100%-120px) calcula la altura completa del artículo menos el pie de página . En mi ejemplo, es 120px (100px para la altura y más, 20px para el relleno).

4. Coloque el pie de página hacia atrás

Finalmente, coloquemos el pie de página detrás del artículo usando la regla z-index: -1 CSS.

 artículo> pie de página {altura: 100px; color de fondo: # FE0178; posición: -webkit-sticky; posición: pegajosa; abajo: 80px; índice z: -1; }

Y eso es todo, el elemento de página individual con el efecto de revelar en desplazamiento está hecho. Mira el bolígrafo Codepen a continuación. También puede encontrar ambos casos de uso en nuestra página de Github.

Cómo modificar la página Nuevas pestañas de Microsoft Edge

Cómo modificar la página Nuevas pestañas de Microsoft Edge

Al igual que muchos otros navegadores, abrir una nueva pestaña en el navegador Edge de Microsoft te enviará a una nueva página de pestañas. La nueva pestaña que se abre se siente más como un centro central, ya que contiene noticias, información y una lista de sus mejores sitios.Si bien la página de pestañas nueva puede ser muy informativa, no se puede negar que dicha página se siente llena de desorden . Por lo t

(Consejos de tecnología y diseño)

20 ejemplos de diseño vertical de pantalla dividida en diseño web

20 ejemplos de diseño vertical de pantalla dividida en diseño web

Un diseño de pantalla dividida está en uso cuando los elementos de pantalla completa están divididos en dos o más partes verticales . A pesar del hecho de que este tipo de diseños de sitios web están de moda en estos días, esta decisión puede hacer o deshacer su diseño. Cuando se hace de forma lógica y correcta, el diseño de pantalla dividida ofrece una experiencia de visualización mágica para los usuarios.El diseño de

(Consejos de tecnología y diseño)


Artículos De Interés
Actualización de creadores: la próxima gran actualización para Windows 10

Actualización de creadores: la próxima gran actualización para Windows 10
Controle las aplicaciones de teléfonos inteligentes con Twitter Hashtags usando CtrlTwit

Controle las aplicaciones de teléfonos inteligentes con Twitter Hashtags usando CtrlTwit
Iconos realistas de la aplicación iOS para su inspiración

Iconos realistas de la aplicación iOS para su inspiración
Los hackers adoran sus acciones en las redes sociales. Este es el por qué.

Los hackers adoran sus acciones en las redes sociales. Este es el por qué.