Capítulo 7

Css 3 - Aprofundamento

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



Saiba mais


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