As vezes na criação de uma landing page, um portfólio ou até mesmo um site procuramos soluções em plugins ou frameworks como bootstrap, foundation ou qualquer outro. Neste post estarei dando algumas dicas de coisas que podem ser feitas apenas com CSS.
compatibilidade do css
Preste atenção na compatibilidade, nem todas as regras funcionam no IE em todos os browsers! 🙂
1. Fullscreen section
É comum os websites terem seções que ocupem 100% da tela. Como fazer isso? Existem algumas soluções usando apenas CSS, mas elas exigem muitas regras para que o elemento ocupe 100% da tela. Para algo tão complexo, precisamos da regra de css abaixo:
section {
height: 100vh;
}
Sim, só isso.
1 viewport height = 1% da altura de browser, consequentemente você pode criar seções ocupando 100% com 100vh.
Ver exemplo
Compatibilidade: O viewport unit é compatível com 83,28% dos browsers.
2. Scroll sem js/jquery
Assim como seções fullscreen, é comum encontrarmos scroll com animação. Dá um efeito bem mais legal na página em vez de usar apenas o html puro.
A solução apresentada abaixo não funciona em todos os casos, pois é necessário que você conheça a altura de cada seção, mas seguindo o nosso exemplo anterior, não teremos problemas.
body {
overflow: hidden;
}
section {
height: 100vh;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
#section-1:target ~ section {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
Como funciona? O pseudo-selector :target será disparado quando o elemento com o mesmo id do atributo href for encontrado.
Assim, combinamos com a técnica do seletor ~ para selecionar outro elemento através do :target que tem um id igual ao hash da url atual.
Para cada id, passamos qual a posição da tela através do translateY (por isso precisamos da altura definida para cada section).
Confuso? Veja o exemplo.
Compatibilidade: O pseudo-selector :target é compatível com 97,06% e o transform é compatível com 91, 81% dos browsers.
3. Centralizar o texto verticalmente
Nada de table-cell, line-height ou position relative/absolute. Tudo o que você precisa é:
section {
display: flex;
justify-content: center;
flex-direction: column;
}
O display: flex nos permite deixar o elemento num nível block flexível. O justify-content alinha o conteúdo no centro dependendo do flex-direction, que apresenta os elementos verticalmente no caso de column.
Ver exemplo.
Compatibilidade: Todas as propriedades flex são compatíveis em 92,99% dos browsers.
4. Centralizar e cortar <img>
Outro problema comum é quando temos cards, ou imagens que precisa ter um tamanho padronizado mas cada uma tem uma dimensão diferente.
Para isso, além o tamanho necessário (width e height) tudo que você precisa é:
img {
object-fit: cover;
}
O object-fit age como o background-size para imagens no background, assim ele aceita como valores o contain e o cover.
Veja o exemplo.
Compatibilidade: Esse o nosso amigo IE ainda não tem suporte, mas de resto temos uma compatibilidade é 65.16%.
Essas foram algumas dicas não tão comuns de CSS. Nos próximos posts estarei falando um pouco mais sobre html, css e js. Fique ligado 😀
