Pular para o conteúdo principal

Paginação clean com css

Paginação com css

Já foi o tempo em que a paginação do seu blog/site eram aquelas simples setas, botões ou o simplesmente textos. Hoje o CSS os permite criar o que quisermos de forma simples e descomplicada.

O tutorial a seguir pode ser utilizado na páginação do blogger por exemplo.


Passo 1 – Corpo da paginação

Defina sua paginação no html


<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>

Passo 2 - Css


ul {
display:block;
font: bold 15px Arial, times, Serif;
}
ul li {
display: inline;
text-align: center;
}
ul li a {
border:3px solid #9b59b6;
color: #9b59b6;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding:10px 15px;
transition: all 0.3s linear;
}
ul li a:hover {
background: #9b59b6;
color:#fff;
}

O efeito de transição no preenchimento da paginação se deve a propriedade "transition". Agora é só aplicar em seus projetos.

Comentários

  1. Adorei, mas não entendi em que parte do HTML colocar o primeiro código :(

    ResponderExcluir
    Respostas
    1. Prezada,
      Na verdade esse seria um exemplo puro, em html apenas. Para adaptar ao blogger eu precisaria mexer com todos os demais códigos da plataforma. Estou preparando um novo, já adaptado ao blogger.

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.

Adicione um botão voltar ao topo no rodapé do seu blog

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.