5 truques de CSS que vão fazer a diferença no seu site

Published in

reprogramabr

4 min readOct 22, 2019

Sempre que entramos em um aplicativo ou site, a primeira coisa que chama nossa atenção é a estética. É muito mágico ver as cores, como tudo está organizado na tela, as interações, o botão que muda a cor, os efeitos da página, etc.

Como sempre tive muita curiosidade de saber como tudo funcionava, fui entender mais sobre o que o CSS podia fazer e aprendi alguns truques que vou compartilhar aqui neste post.

Todas as dicas são bem fáceis de entender e executar, pode acreditar.

Vamos lá?

fonte: Photo by Pankaj Patel on Unsplash

1. Mudando as características de um objeto quando você passar o mouse em cima (mouseover)

Quando você vai estilizar um elemento no CSS, utilize um seletor. Nesse exemplo, usarei buttoncomo meu seletor. Para conseguir o efeito hover, basta escrever o seletor seguido de :hovere adicionar nas chaves a alteração desejada. No exemplo abaixo, mudei a cor e o tamanho.

Gif com o botão mudando de cor e tamanho no mouseover

button {
  margin-left: 50vw;
  margin-top: 50vh;
  padding: 10px;
  border-radius: 10px;
  transition-duration: 2s;  
}button:hover {
  background-color: black;
  color: white;
  transform: scale(1.5)
}

2. Efeito de rolagem da página quando um link é clicado (âncora)

Gif que mostra a transição ao clicar nos itens do menu

No HTML, você precisa ligar o link de cada menu (tag <a>), por exemplo, com a seção da página que você deseja que ele te encaminhe. Depois disso, copie o código abaixo e cole na sua folha de estilo CSS:

html {
  scroll-behavior: smooth;
}

Prontinho! Você já tem seu efeito de rolagem. Lembrando que essa é uma propriedade experimental e que nem sempre vai funcionar em todos os navegadores. Recomendo dar uma olhada na documentação para demais dúvidas :)

3. Estilizando a barra de rolagem

O ::-webkit-scrollbar é um pseudo-elemento não padrão, que nos permite modificar a aparência da barra de rolagem do navegador.

::-webkit-scrollbar é a barra principal.
::-webkit-scrollbar-button são os botões na barra de rolagem, as setinhas que apontam para cima e para baixo.
::-webkit-scrollbar-thumb é a barra de rolagem arrastável.
::-webkit-scrollbar-track é a faixa (barra de progresso) da barra de rolagem.
::-webkit-scrollbar-track-piece é a faixa (barra de progresso) que não é coberta pela alça.
::-webkit-scrollbar-corner é o canto inferior da barra de rolagem, onde as barras de rolagem horizontal e vertical se encontram.
::-webkit-resizer é o identificador de redimensionamento arrastável que aparece no canto inferior de alguns elementos.

Modificando essas características no body do seu projeto, temos:

body::-webkit-scrollbar {
     width: 10px
} 
   
body::-webkit-scrollbar-thumb {   
background-color: darkgrey;   
}

Gif com uma barra de scroll com suas propriedades editadas

4. Aparecimento gradual de um elemento ao carregar a página

No HTML, coloque uma classe fadeIn no elemento que irá aplicar o efeito. Em seguida, no CSS, vamos adicionar a seguinte animação:

.fadeIn {
    animation: fadeIn 1s linear;
}@keyframes fadeIn {
    from{ opacity: 0;
    }
    to{ opacity: 1; 
    }
}

Gif da animação criada no Menu, onde os itens aparecem de forma gradual na tela

A propriedade animationvai configurar a animação, dar um nome a ela e determinar sua duração. O @keyframe vai determinar os estados do seu objeto, sendo o from seu estado inicial e o to seu estado final. Para determinar mais estados, escrevemos em formato de porcentagem, como no exemplo abaixo:

@keyframes fadeIn {
    0%{opacity: 0;
    }
    50%{opacity: 0.5;
    }
    100%{opacity: 1;
    }
}

5. Cortando imagens

Sim, é possível dar formato a imagens ou divs através do CSS! Se você já quis algum banner estilizado ou cortar uma imagem em determinado formato, existe uma solução.

O clip-path pode cortar um elemento em diversos formatos, como círculos, triângulos, e até mesmo em formato de seta, como no exemplo:

Imagem cortada em formato de seta para a direita

img {
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Mas como vou determinar as porcentagens para conseguir o formato que eu quero? Existe um site que gera o código com base no formato escolhido. Nesse site aqui você pode customizar seu clip-path ou escolher um dos modelos prontos do site.

Gostou das dicas? Espero que tenha sido útil conhecer algumas propriedades e possibilidades que o CSS oferece para nós!

Até a próxima