Este artigo vem no seguimento de outros sobre O Elemento Âncora [a], e desta vez quero focar naquelas ligações internas, que servem para unir diferentes secções dentro da mesma página, e como as podemos tornar mais apelativas ao visitante... 8)
Relembrando o que escrevi no artigo mencionado acima:
<a href="#exemploUM">Vai para algum local nesta mesma página</a>Este é um link interno (ou âncora), e leva-te para um elemento existente dentro da mesma página onde colocamos a ID, que ser única, da seguinte maneira:
<div id="#exemploUM"></div>Podes colocar a ID para onde se dirige a ligação em qualquer elemento HTML, e a menos que lhe dês um estilo personalizado, este tipo de ligação apresenta-se tal como qualquer outro link.
Então vamos ver como podemos dar aquele estilo extra a este tipo de ligações com 4 simples passos:
Primeiro que tudo, vamos colocar uma pequena propriedade no CSS para criar um efeito de rolagem suave, animado, mais fluido e visualmente agradável em vez dum salto abrupto para o novo destino:
html {
scroll-behavior: smooth;
}
Como já tenho esta propriedade no CSS deste blogue há algum tempo, podes testar o efeito clicando em qualquer ligação com destino dentro da própria página, como por exemplo, a seta na lateral que te leva ao topo da página.
Se um cabeçalho fixo estiver presente, como é o caso neste blogue que tem um com 79px de altura, o conteúdo pode aparecer cortado ao rolar para o destino.
Para evitar isso, além da ID para a ligação interna, inclui também uma class no elemento de destino e usa a propriedade scroll-margin-top para adicionar um espaço extra no topo:
<b class="anchorLINK" id="efsmooth">O efeito de rolagem suave</b>
.anchorLINK {
scroll-margin-top: 95px;
}
Podes utilizar a pseudo-classe CSS :target para dares um estilo ao elemento de destino duma ligação âncora dentro da mesma página:
.anchorLINK:target {
color: #af0; /* verde */
}
Nesta demonstração, ao clicares na ligação acima, vais ter ao destino onde vais ver o texto na cor verde.
Ao clicares em Volta atrás vai fazer com que o título deixe de ser o alvo, pelo que o texto deixará de ser verde.
Podemos fazer coisas mais complexas com o atributo :target do que apenas alterar a cor do texto.
Repara na seguinte demonstração que destaca áreas de conteúdo, enquanto mostra como animar a ligação Volta atrás para que deslize no lado esquerdo do ecrã.
A pera é o fruto comestível da pereira, uma árvore do gênero Pyrus L., pertencente à família Rosaceae, e que conta com vinte variedades de espécies cultivadas em todo o mundo. A fruta pode ser consumida in natura, enlatada, em suco e desidratada.
A laranja é um fruto de várias espécies cítricas da família Rutaceae. Refere-se principalmente ao fruto da espécie Citrus × sinensis, que também é chamado de laranja-doce, para distingui-lo do relacionado Citrus × aurantium, referido como laranja-azeda.
O limão é uma fruta cítrica originária da Ásia, rica em vitamina C e antioxidantes, e amplamente utilizada na culinária para dar sabor a pratos doces, salgados e bebidas. Os seus benefícios incluem o fortalecimento do sistema imunitário, a ação antioxidante e a melhoria da digestão.
Aqui está o HTML (abreviado) para mostrar como a demonstração anterior está configurada.
E como o CSS (com comentários) é utilizado para apresentar e destacar cada secção ao clicar em cada ligação no cimo da demonstração para ir para cada secção relacionada.
E também mostra como o CSS pode ser definido para mostrar/ocultar a ligação Volta ao topo da demonstração.
<nav id="nav">
<a href="#peras">Pêras</a>
<a href="#laranjas">Laranjas</a>
<a href="#limoes">Limões</a>
</nav>
<article>
<h1 id="peras">Pêras</h1>
<img align="left" alt="peras.jpg" src=""/>
<p></p>
</article>
<a class="gobacktest" href="#nav">Volta ao topo da demonstração</a>
/* Estilos das ligações de navegação no topo */
nav {
display: flex;
gap: 10px;
}
nav a {
flex-grow: 1;
box-shadow: 0px 10px 14px -7px #3e7327;
background: linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
border-radius: 4px;
border: 1px solid #4b8f29;
color: #fff;
font-family: Arial;
text-align: center;
padding: 10px 0;
text-decoration: none;
text-shadow: 0px 1px 0px #5b8a3c;
}
nav a:hover {
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
}
nav a:active {
position:relative;
top:1px;
}
/* Estilos dos tilulos de cada secção, que também servem de destino de cada ligação no topo */
h1 {
margin: 0 0 20px;
scroll-margin-top: 100px;
}
h1#laranjas:target {/* Estilos do titulo da secção #laranjas */
color: #ffa500;
}
h1#limoes:target {/* Estilos do titulo da secção #limoes */
color: #f4e075;
}
h1:target {/* Estilos do titulo da secção #peras */
color: #71a819;
}
article {/* Estilos de cada secção */
margin-top: 60px;
padding: 20px;
border: 3px solid transparent; /* a borda é inicialmente transparente */
border-radius: 10px;
background-color: #fffc;
}
article img {/* Estilos da imagem em cada secção */
width: 80px;
margin-right: 10px;
border: 4px double transparent; /* a borda é inicialmente transparente */
border-radius: 8px;
}
article:has(h1:target) {/* Estilos da cor da borda da secção que fica verde quando o h1 de destino #peras está dentro dela */
border-color: #71a819;
}
article:has(h1#laranjas:target) {/* Estilos da cor da borda da secção que fica laranja quando o h1 de destino #laranjas está dentro dela */
border-color: #ffa500;
}
article:has(h1#limoes:target) {/* Estilos da cor da borda da secção que fica amarela quando o h1 de destino #limoes está dentro dela */
border-color: #f4e075;
}
article:has(h1:target) img {/* Estilos da cor da borda da imagem que fica verde quando o h1 de destino #peras está dentro dela */
border-color: #71a819;
box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
}
article:has(h1#laranjas:target) img {/* Estilos da cor da borda da imagem que fica laranja quando o h1 de destino #laranjas está dentro dela */
border-color: #ffa500;
box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
}
article:has(h1#limoes:target) img {/* Estilos da cor da borda da imagem que fica amarela quando o h1 de destino #limoes está dentro dela */
border-color: #f4e075;
box-shadow: -15px 0 15px -15px #2C3E50, 15px 0 15px -15px #2C3E50;
}
/* Estilos da ligação "Volta ao topo da demonstração" */
.gobacktest {
font-size: 17px;
font-weight: 500;
line-height: 34px;
text-align: center;
/* A ligação está numa posição fixa no canto superior esquerdo. */
position: fixed;
top: 100px;
left: 200px;
/* A ligação aparece inicialmente meio transparente e deslocada para fora da margem esquerda do ecrã. */
opacity: 0;
translate: calc(-100% + 10px);
/* duração da transição de meio segundo */
transition: all 0.5s;
/* forma da borda em redor da ligação */
height: 35px;
border: 1px solid red;
border-right: none;
width: fit-content;
}
.gobacktest:after { /* triângulo no lado direito da forma */
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Quando o corpo do texto contiver um h1 de destino, a ligação aparecerá gradualmente e tornar-se-á visível */
body:has(h1:target) .gobacktest {
opacity: 1;
translate: 0px;
}
Ainda há mais coisas que se pode fazer com as ligações âncora e como podem ser utlizadas para fazer coisas incríveis, mas por agora fico por aqui. :D
No entanto caso tenhas curiosidade e queiras saber mais, recomendo o artigo (em inglês) que me inspirou a escrever este, e do qual traduzi muito do leram aqui: Anchor Links and How to Make Them Awesome
E por hoje é tudo. ;)
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário