Capítulo 7

Css 3 - Aprofundamento

Criado por: Malcon Toledo

Seletores Avançados

X + Y

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;
}

X > Y

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;
}

X ~ Y

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

Pseudo-classe é uma palavra-chave adicionada a um seletor que especifica um estado especial do elemento selecionado.

acesse mozilla.org para saber mais

:nth-child(n)

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.

:nth-child(n)

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º, ...

:nth-child(n)

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º, ...

:nth-last-child(n)

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

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

::before

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;
}

Animações

Propriedades:

transition @keyframes animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation

Propriedade transition

aropriedade 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;
}

Propriedade Animation

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.

fonte: w3schools.com

@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:

https://animista.net

https://animate.style

https://webkul.github.io/micron/

Variáveis no CSS

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);
}