flex-direction - Direção na qual os itens são posicionados:
- row: Horizontal, da esquerda para direita
- row-reverse: Horizontal, da direita para esquerda
- column: Vertical, de cima para baixo
- column-reverse: Vertical, da baixo para cima
Na nomenclatura de classes, é bom que sejamos o mais específicos e genéricos ao mesmo tempo. Se formos muito específicos, não poderemos reutilizar o código. Caso formos muito genéricos, teremos que combinar classes para alcançar os resultados desejados.
Usar classes nos ajuda a não repetir código e a termos um código mais organizado, mas quando vamos fazer algo muito específico e que não queremos repetir, pode ser melhor usar a seleção inline, principalmente quando não vamos escrever um código muito extenso, caso contrário é melhor usar o id. Uma diferença fundamental entre id e class é que usamos id para definir comportamento e class para estilo.
div > p -> seleciona todos o parágrafos que são filhos diretos de uma div.
h3 + p -> seleciona o parágrafo irmão de um título h3.
img ~ li -> seleciona todos os itens de listas que vêm depois de uma imagem.
div:not(.exemplo) -> seleciona todas as div que não possuem a classe exemplo.
As cores podem ser definidas pelo nome em inglês, por código hexadecimal, ou seguindo o pardão RGB.
Fonte com 24px
Fonte com 1.5em
10% de padding para baixo.
1.5em de padding para baixo.
30px de padding para baixo.
Embora seja uma funcionalidade usado somente em momentos muito específicos, existe a função calc no css, onde é possível fazer operações matemáticas. Exemplo:
width: calc(40% + 55px);
width: calc(10em + 20%);
Para simplificar o código e evitar problemas com refatorações e mudanças de tema, podemos usar variáveis no CSS, instanciando-as com --nome-da-variavel: valor; e depois as utilizando com var(--nome-da-variavel).
:root {
--branco: #FFF;
--fonte-sans: sans-serif;
--rosa: #F0F;
}
.exemplo-variaveis {
font-family: var(--fonte-sans);
background-color: var(--rosa);
color: var(--branco);
}
As fontes padrões não são as mais adequadas para a internet, pois em sua maioria, foram feitas pensando em textos impressos. Usar fontes externas pode padronizar o conteúdo em todos os navegadores, deixar a página mais agradável esteticamente, e ainda ganhamos mais alternativas.
É possível importar fontes da API Google Fonts, uma das mais usadas no mercado: Google Fonts
body {
font-family: 'Monstserrat', sans-serif;
}
É possível usar caracteres unicode na sua página HTML, basta pesquisar na internet, copiar e colar. Veja alguns exemplos:
Podemos colocar emojis, símbolos ou até caracteres de outros alfabetos no nosso site desse modo. É possível simplesmente copiar e colar símbolos ou usar um código HTML específico, que cada símbolo tem para utilizá-los.
Veja mais no site Unicode Table
#hover:hover {
background-color: #FFF;
color: #222;
}
#focus:focus {
background-color: lightcyan;
color: fuchsia;
}
#active:active {
background-color: floralwhite;
color: firebrick;
}
Podemos criar elementos que não existem no HTML com CSS, atribuindo classes por exemplo. Pseudoelementos criados com CSS existem somente de forma visual, não é possível selecioná-los com o mouse, por exemplo.
Alguns exemplos:
.entre-parenteses::before {
content: "( ";
}
.entre-parenteses::after {
content: " )";
}
.entre-parenteses::first-letter {
font-weight: bold;
}
Primeira letra em negrito.
Primeira letra maior.
.primeira-em-negrito::first-letter {
font-weight: bold;
}
.primeira-maior::first-letter {
font-size: 1.4em;
}
A propriedade float permite que "levantemos" um elemento, contudo afetando também os elementos posteriores, por isso devemos usar a propriedade clear para limpar o float.
/* Marcando o início do float */
float: left;
/* Limpando-o, passando qual o tipo de float deve ser limpo */
clear: left;
É possível fazer muitas coisas com essa funcionalidade, podemos passar quantas cores quisermos, ângulo de inclinação e até mesmo qual a porcentagem que cada cor deverá ocupar.
Aplicando o degradê no background:
.degrade {
background: linear-gradient(grey, lightgrey, white);
}
.degrade-vertical {
background: linear-gradient(90deg, grey, lightgrey, white);
}
.degrade-circular {
background: radial-gradient(lightgrey, white);
}
.arco-iris {
background: linear-gradient(90deg, red, orange, yellow, green, blue, darkblue, violet);
}
Com a propriedade transition, é possível fazer com que uma mudança ocorra de forma gradual, precisamos definir o tempo da transição e qual a transformação.
#botao-transicao {
transition: 1.5s all;
}
#botao-transicao:hover {
background-color: #FFF;
color: #222;
}
Usando CSS, é possível fazer algumas transformações nos elementos a partir de certos eventos (pseudoclasses). Podemos, por exemplo, rotacionar o elemento, aumentar seu tamanho e entre outros.
.transformar {
transition: 1.5s all;
}
.scale:hover {
transform: scale(1.2);
}
.rotate:hover {
transform: rotate(360deg);
}
É possível fazer adaptações na visualização dependendo das dimensões da tela do dispositivo:
Precisamos, antes de tudo, definir uma nova tag meta na head do html, com as propriedades name="viewport" e content="width=device-width", assim fazendo com que a largura da página seja igual à largura da tela do dispositivo.
Depois, basta fazer as alterações no CSS:
@media screen and (max-width: 480px) {
/* Definindo propriedades diferentes para telas com até 480 px de largura */
}
Para sombrear um elemento, basta utilizarmos a propriedade box-shadow, que recebe o valor no eixo X (horizontal), eixo Y (vertical), blur (espalhamento), intensidade da borda e a cor.
box-shadow: 10px 10px #222; /* sem transparência na sombra */
box-shadow: -10px -10px 15px #222; /* com blur de 15px e aplicando coordenadas X e Y negativas */
box-shadow: 10px 10px 15px 5px #222; /* Intensidade de borda em 5px */
box-shadow: 10px 10px #222, -10px -10px #CDCD; /* colocando mais de uma sombra no elemento */
box-shadow: inset 0 0 20px #AAA; /* sombra interna */
text-shadow: 1px 1px green; /* sombras em textos */
O display flex é utilizado para alterar a forma como os elementos filhos se distribuem pela container flex (qualquer tag pai que possua a propriedade display: flex).
Também existe a propriedade flex-flow, que combina a flex-direction com flex-wrap. Exemplo: flex-flow: row wrap;
nowrap
wrap
wrap-reverse
flex-start
flex-end
center
space-between
space-around
space-evenly
Exemplos com flex-direction: column
stretch
center
flex-start
flex-end
baseline
Possui os mesmos valores que align-items. Exemplo com flex-flow: column wrap, e com align-items: center. A quarta barra se encontra no começo (align-self: flex-start) e a quinta no fim (align-self: flex-end).
O display grid serve para alterar a forma como o conteúdo da página é posicionado, ideal para layouts mais complexos e que não seguem uma estrutura linear, contendo seções uma do lado da outra, ocupando um espaço pré determinado de linhas e colunas.
Com a propriedade grid é possível definir as linhas e colunas, assim como seus tamanhos de forma enxuta.
Exemplos:
Foram definidas duas linhas e três colunas, cada uma ocupando o mesmo espaço, por causa do valor auto na propriedade grid:
grid: {
auto auto / auto auto auto;
/* linhas / colunas */
}
No caso acima, definimos a fração que cada linha e coluna podem ocupar, assim delimitando seus tamanhos facilmente. Também podemos definir seus tamanhos com outras unidades, como em, rem, px, % e entre outras.
grid: {
1fr 2fr / 1fr 1fr 2fr;
/* 1/3 2/3 / 1/4 1/4 2/4 */
}
Uma outra forma de usar grid é com as grid areas, onde podemos definir áreas específicas e já onde serão posicionadas, assim como quais linhas e colunas ocuparão.
.grid-area {
display: grid;
grid-template-areas: 'vermelho vermelho vermelho vermelho'
'azul verde verde verde'
'azul verde verde verde'
'azul verde verde verde'
'azul amarelo amarelo amarelo';
color: #FFFFFF;
font-weight: 600;
text-align: center;
}
.vermelho {
background-color: #EE1111;
grid-area: vermelho;
padding: 1rem;
border-radius: 1rem;
}
.azul {
background-color: #1111EE;
grid-area: azul;
padding: 1rem;
border-radius: 1rem;
}
.verde {
background-color: #11EE11;
grid-area: verde;
padding: 1rem;
border-radius: 1rem;
}
.amarelo {
background-color: #EEEE11;
grid-area: amarelo;
padding: 1rem;
border-radius: 1rem;
}
É importante saber que é possível usar os displays grid e flex em conjunto, cada seção dentro de um container grid pode ser um container flex. Também podemos adicionar espaçamento entre as linhas e colunas de um grid com as propriedades grid-row-gap e grid-column-gap, de forma parecida com o que temos no display flex.