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.

Escaparate de diseños de sitios web inspirados en el espacio

Escaparate de diseños de sitios web inspirados en el espacio

El espacio es una de las mejores fuentes de inspiración en cualquier tipo de trabajo: escribir, pintar o incluso fondos de pantalla espaciales; y por ahora, diseño web. Es tan grande, colorido y emocionante que es imposible permanecer apático mirando a estos colores vívidos y atractivos, lugares inexplorados. Lo

(Consejos de tecnología y diseño)

40+ creativos y hermosos diseños de tarjetas de crédito

40+ creativos y hermosos diseños de tarjetas de crédito

Las tarjetas de crédito son una de las mejores herramientas financieras que tiene a su disposición, si se usan correctamente. También es una de las mejores maneras de expresarse : sus gustos, aversiones, preferencias personales, incluso su marca personal, si así lo desea.Es más que una simple tarjeta de plástico con el logotipo de un banco. Pued

(Consejos de tecnología y diseño)


Artículos De Interés
Perfeccionistas en el trabajo: 30 ejemplos que necesita ver

Perfeccionistas en el trabajo: 30 ejemplos que necesita ver
Compras navideñas: compre inteligentemente con el motor de recomendaciones de Amazon

Compras navideñas: compre inteligentemente con el motor de recomendaciones de Amazon
Generadores de patrones gratuitos: Aquí hay 8 herramientas que quiere marcar

Generadores de patrones gratuitos: Aquí hay 8 herramientas que quiere marcar
15 aplicaciones Android VPN gratuitas para navegar de forma anónima

15 aplicaciones Android VPN gratuitas para navegar de forma anónima