Criado por: Malcon Toledo
Selecione somente o primeiro elemento Y imediatamente após o elemento X
Titulo do Documento
Texto1 de Exemplo
Texto2 de Exemplo
Texto3 de Exemplo
- item 1
- item 2
- item 3
- item 4
- item 5
h1 + p {
background-color: #df9090;
}
Selecione todos os elementos Y que sejam filhos diretos de X
Titulo do Documento
Texto1 de Exemplo
Texto2 de Exemplo
Texto3 de Exemplo
Outro texto
Mais um texto
.principal > p {
background-color: #df9090;
}
Selecione todos os elementos Y que sejam irmãos do elemento X e que venham após o elemento X
Titulo do Documento
Texto1 de Exemplo
Texto1 de Exemplo
Texto2 de Exemplo
Texto3 de Exemplo
teste
Texto3 de Exemplo
Outro texto
Mais um texto
hr ~ p {
background-color: #df9090;
}
Pseudo-classe é uma palavra-chave adicionada a um seletor que especifica um estado especial do elemento selecionado.
acesse mozilla.org para saber mais
seleciona elementos com base em suas posições em um grupo de elementos irmãos
Lista de itens
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
li:nth-child(2) {
background-color: #df9090;
}
dos irmãos <li>, selecione o segundo.
seleciona elementos com base em suas posições em um grupo de elementos irmãos
Lista de itens
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
li:nth-child(2n) {
background-color: #df9090;
}
dos irmãos <li>, selecione o 2º, 4º, ...
seleciona elementos com base em suas posições em um grupo de elementos irmãos
Lista de itens
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
li:nth-child(2n+1) {
background-color: #df9090;
}
dos irmãos <li>, selecione o 1º, 3º, ...
seleciona o enésimo elemento contando do último elemento.
Lista de itens
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
li:nth-last-child(1) {
background-color: #df9090;
}
dos irmãos <li>, selecione último elemento.
Pseudo-elemento É uma palavra-chave adicionada a um seletor que permite definir o estilo de uma parte específica do elemento selecionado./p>
acesse mozilla.org para saber mais
cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade content. Este elemento é inline por padrão.
Lista de itens
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
h1::before {
content: '';
display: block;
width: 180px;
height: 5px;
background-color: #f00;
}
h1::after {
content: '';
display: block;
width: 180px;
height: 5px;
background-color: #f00;
}
Propriedades:
transition @keyframes animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animationaropriedade transition faz com que a mudança de uma propriedade css acontece de maneira suave.
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
transition-property | Propriedade CSS que será envolvida na transição |
transition-duration | tempo (em segundos) que irá durar a transição |
transition-timing-function |
ease - especifica um efeito de transição com início lento, depois rápido e, a seguir, fim lento (é o padrão)
linear - especifica um efeito de transição com a mesma velocidade do início ao fim ease-in - especifica um efeito de transição com um início lento ease-out - especifica um efeito de transição com um final lento ease-in-out - especifica um efeito de transição com início e fim lentos cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função de bezier cúbico ( https://easings.net ) |
transition-delay | tempo (em segundos) que irá atrasar o início da transição |
.btn{
padding: 10px;
background-color: #ff009d;
color: #ffffff;
text-decoration:none;
transition: background-color 1s ease, border-radius 2s;
}
.btn:hover {
border-radius: 15px;
background-color: #eeff02;
color: #0f0f0f;
}
O que são animações CSS ?
Uma animação permite que um elemento mude gradualmente de um estilo para outro.
Você pode alterar quantas propriedades CSS quiser, quantas vezes quiser.
Para usar animação CSS, você deve primeiro especificar alguns quadros-chave para a animação.
Os quadros-chave contêm os estilos que o elemento terá em determinados momentos.
@keyframes | define os pontos de transição. |
animation-name | vincula um keyframe a um determinado estilo. |
animation-duration | define o tempo de duração da animação. |
animation-timing-function |
ease - especifica um efeito de transição com início lento, depois rápido e, a seguir, fim lento (é o padrão)
linear - especifica um efeito de transição com a mesma velocidade do início ao fim ease-in - especifica um efeito de transição com um início lento ease-out - especifica um efeito de transição com um final lento ease-in-out - especifica um efeito de transição com início e fim lentos cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função de bezier cúbico ( https://easings.net ) |
animation-delay | define o atraso na animação. |
animation-iteration-count | define o número de vezes que a animação será executada. |
animation-direction |
normal - A animação é reproduzida normalmente (para frente). Este é o padrão
reverse - A animação é reproduzida na direção reversa (para trás) alternate - A animação é reproduzida primeiro para a frente, depois para trás alternate-reverse - A animação é reproduzida primeiro para trás e depois para a frente |
div {
width: 20px;
height: 20px;
background-color: red;
position: relative;
animation-name: quadrado;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes quadrado {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:100px; top:0px;}
50% {background-color:blue; left:200px; top:100px;}
75% {background-color:green; left:0px; top:100px;}
100% {background-color:red; left:0px; top:0px;}
}
Links úteis:
Variáveis são espaçamentos armazenados na memória. Cada espaçamento é definido com um nome e um conteúdo.
Para definir uma variável --nome-var: conteúdo | |
Para acessar uma variável color: var(--nome-var) |
Exemplo
título 1
a piece of classical Latin literature from 45 BC, making it over 2000,
título 2
ollege in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
:root {
--cor-primaria: #3e658a;
--cor-secundaria: #9c9c9c;
--tamanho1: 1rem;
--tamanho2: calc(16px * 1.618);
}
.cor-titulo {
color: var(--cor-primaria);
font-size: var(--tamanho2);
}
.cor-paragrafo {
color: var(--cor-secundaria);
font-size: var(--tamanho1);
}