Guia de uso de rodapé deslizante
Navegar:399
O site recém -lançado, The Markup, possui um slogan atraente: "Big Tech está assistindo você. Estamos assistindo BigTech". Desenvolvido pela Upstatement, o conteúdo impressionante do site é correspondido por seu design e tecnologia sofisticados. Recursos notáveis incluem tipografia limpa, um layout exclusivo, efeitos de pairar angulares impressionantes em blocos de conteúdo e um motivo de ponto sutil, mas elegante.
Um elemento particularmente notável é o rodapé de design inteligente. Ele desliza suavemente para a vista por baixo do conteúdo principal, enquanto o usuário rola para a parte inferior da página. Vamos explorar como recriar este efeito!
A chave para esse efeito está nesses quatro elementos:
- A área de conteúdo principal deve ter uma altura mínima de 100VH. Enquanto a maioria dos sites já adere a isso, é crucial para funcionalidade confiável.
- A área de conteúdo principal requer uma cor de fundo sólida para mascarar o rodapé antes de deslizar para a vista.
- O rodapé é colocado no html após o conteúdo principal. Os ajustes relativos de posicionamento e índice z garantem que o conteúdo principal permaneça no topo.
- posicionamento adesivo é usado para ancorar o rodapé na parte inferior da viewport.
Esta abordagem de posicionamento pegajosa é superior ao método da marcação, que se baseia na posição : corrigido; e um valor calculado margin-botom no conteúdo principal. Evitar valores arbitrários torna a implementação significativamente mais robusta e adaptável.
A simplicidade e a eficácia dessa técnica de posicionamento pegajosa são notáveis. Obrigado a Stephen Shaw por esta solução inteligente! Minha tentativa inicial usou o posicionamento fixo e os ajustes manuais necessários, destacando a superioridade dessa abordagem pegajosa.
Preethi demonstrou uma técnica semelhante em 2018. A principal diferença aqui é o uso de um gradiente linear para o fundo do corpo, oferecendo uma alternativa flexível a uma cor de fundo sólida, que pode ser restritiva em determinados contextos de design.
Tutorial de vídeo
Um tutorial em vídeo de Stephen Shaw está disponível!
-
Os parâmetros de modelo podem na função C ++ 20 ConstEval depender dos parâmetros da função?funções constEval e parâmetros de modelos dependentes de argumentos da função em c 17, um parâmetro de modelo não pode depender de um argument...Programação Postado em 2025-07-22 -
Dicas do quadro Spark para adicionar colunas constantescriando uma coluna constante em um Spark DataFrame adicionando uma coluna constante a um Spark Dataframe com um valor arbitrário que se aplica...Programação Postado em 2025-07-22
-
Por que estou recebendo um erro "Class \ 'Ziparchive \' não encontrado \" depois de instalar o Archive_zip no meu servidor Linux?classe 'ziparchive' não encontrou erro ao instalar Archive_zip no servidor Linux sintoma: quando o script de script que utiliza o zi...Programação Postado em 2025-07-22
-
Como evitar vazamentos de memória ao fatiar a linguagem?vazamento de memória em go slies Compreendendo os vazamentos de memória nas fatias Go pode ser um desafio. Este artigo tem como objetivo forne...Programação Postado em 2025-07-22
-
Eval () vs. AST.LITERAL_EVAL (): Qual função Python é mais segura para a entrada do usuário?pesando avaliação () e ast.literal_eval () na python Security Ao lidar com a entrada do usuário, é imperativo priorizar a segurança. Eval (), ...Programação Postado em 2025-07-22
-
Como converter uma coluna Pandas Dataframe em formato e filtrar por data de tempo por data?transformar a coluna Pandas Dataframe em DateTime Format cenário: Dados em um Pandas Dataframe frequentemente existe em vários formatos, inc...Programação Postado em 2025-07-22
-
Razões para o Codeigniter se conectar ao banco de dados MySQL depois de mudar para MySqliNão é possível se conectar ao banco de dados MySQL: Mensagem de erro de solução de problemas Ao usar o sedimento do que o MySQL Driver para o ...Programação Postado em 2025-07-22
-
Quando usar "tente" em vez de "se" para detectar valores variáveis no python?usando "Try" vs. "se" para testar o valor da variável no python no python, há situações em que você pode precisar verificar ...Programação Postado em 2025-07-22
-
Método para converter corretamente os caracteres Latin1 em UTF8 na tabela UTF8 MySQLConverte os caracteres latin1 em uma tabela utf8 em utf8 você encontrou um problema em que os caracteres com diacritos (por exemplo, "jáu...Programação Postado em 2025-07-22
-
Guia de criação de páginas de 404 de 404 da FASTAPIPágina 404 personalizada não encontrada com fastapi para criar uma página 404 personalizada não encontrada, o FASTAPI oferece várias abordagen...Programação Postado em 2025-07-22
-
O despertador falso realmente acontecerá em Java?SPEURY WAWUPS em java: realidade ou mito? O conceito de despertars espúrias na sincronização de Java tem sido um assunto de discussão há algum t...Programação Postado em 2025-07-22
-
Por que o Firefox exibe imagens usando a propriedade CSS `Content`?exibindo imagens com URL de conteúdo em Firefox Um problema foi encontrado onde certos navegadores, especificamente Firefox, falham em exibir ...Programação Postado em 2025-07-22
-
O CSS pode localizar elementos HTML com base em qualquer valor de atributo?direcionando elementos html com qualquer valor de atributo no css em css, é possível alvo elementos baseados em atributos específicos, conform...Programação Postado em 2025-07-22
-
Como recuperar com eficiência a última linha para cada identificador exclusivo no PostGresql?postGresql: Extraindo a última linha para cada identificador exclusivo em postgresql, você pode encontrar situações em que você precisa extrai...Programação Postado em 2025-07-22
-
Como capturar e transmitir stdout em tempo real para a execução do comando chatbot?capturando stdout em tempo real da execução de comando no reino do desenvolvimento de chatbots capaz de executar comandos, um requisito comum ...Programação Postado em 2025-07-22
Estude chinês
- 1 Como se diz “andar” em chinês? 走路 Pronúncia chinesa, 走路 aprendizagem chinesa
- 2 Como se diz “pegar um avião” em chinês? 坐飞机 Pronúncia chinesa, 坐飞机 aprendizagem chinesa
- 3 Como se diz “pegar um trem” em chinês? 坐火车 Pronúncia chinesa, 坐火车 aprendizagem chinesa
- 4 Como se diz “pegar um ônibus” em chinês? 坐车 Pronúncia chinesa, 坐车 aprendizagem chinesa
- 5 Como se diz dirigir em chinês? 开车 Pronúncia chinesa, 开车 aprendizagem chinesa
- 6 Como se diz nadar em chinês? 游泳 Pronúncia chinesa, 游泳 aprendizagem chinesa
- 7 Como se diz andar de bicicleta em chinês? 骑自行车 Pronúncia chinesa, 骑自行车 aprendizagem chinesa
- 8 Como você diz olá em chinês? 你好Pronúncia chinesa, 你好Aprendizagem chinesa
- 9 Como você agradece em chinês? 谢谢Pronúncia chinesa, 谢谢Aprendizagem chinesa
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
