Programação para Web I

Uma pseudo-classe é usada para definir o estado especial de um elemento HTML. Através das pseudo-classes podemos estilizar um elemento dado uma condição, geralmente uma ação do usuário como mover o mouse ou alterar o elemento foco da página. No entanto, também possuimos elementos que definem uma lógica simples para a aplicação das regras de um seletor, como por exemplo aplicar apenas aos elementos pares do documento. A sintaxe utilizada para as pseudo-classes é dada pela adição do nome precedido de : (dois pontos) após o nome do seletor:

seletor:pseudoclasse{
    propriedade: valor;
}

Lista de Pseudo-Seletores

Abaixo temos uma lista de pseudo-seletores usado pelo CSS:

:checked

Seleciona os elementos com o atributo checked

:disabled

Seleciona os elementos desabilitados

:enabled

Seleciona os elementos habilitados

:empty

Seleciona um elemento que não possui filhos

:focus

Seleciona um elemento que possui foco para o usuário

:hover

Seleciona quando o mouse está sobre o elemento

:invalid

Seleciona quando o elemento possui um valor inválido

:valid

Seleciona quando o elemento possui um valor válido

:optional

Seleciona quando o elemento é opcional

:required

Seleciona quando um elemento é obrigatório

:out-of-range

Seleciona quando o valor de um elemento está fora do intervalo

:in-range

Seleciona quando o valor de um elemento está dentro do intervalo

:read-only

Seleciona quando o elemento é apenas de leitura

:read-write

Seleciona quando o elemento é de leitura e escrita

:active

Seleciona quando o elemento (link) está ativo

:link

Seleciona quando o elemento (link) não foi visitado

:visited

Seleciona quando o elemento (link) foi visitado

:target

Seleciona quando o elemento âncora está ativo

:root

Seleciona o elemento raiz do documento

:first-child

Seleciona apenas o primeiro elemento filho do seletor

:last-child

Seleciona apenas o último elemento filho do seletor

:first-of-type

Seleciona apenas o primeiro elemento do tipo do seletor

:last-of-type

Seleciona apenas o último elemento do tipo do seletor

:lang(lingua)

Seleciona quando o elemento possui o atributo lang igual ao especificado emlingua

:not(seletor)

Seleciona quando o seletor não é do mesmo tipo especificado em seletor

:only-of-type

Seleciona apenas o elemento que é o único filho de seu tipo

:only-child

Seleciona apenas o elemento que é o único filho de seu pai

:nth-child(n)

Seleciona apenas o elemento filho de número n

:nth-of-type(n)

Seleciona apenas o elemento de número n do tipo do seletor

:nth-last-child(n)

Seleciona apenas o elemento filho de número n, contando a partir do último filho

:nth-last-of-type(n)

Seleciona apenas o elemento de número n do tipo do seletor, contando a partir do último filho

::after

Seleciona o conteúdo final do elemento. Necessita do atributo content para definir um conteúdo.

::before

Seleciona o conteúdo inicial do elemento. Necessita do atributo content para definir um conteúdo.

::fist-letter

Seleciona a primeira letra

::first-line

Seleciona a primeira linha

::selection

Seleciona a parte selecionada por um usuário

Exemplos de uso

Inserindo conteúdo no final de um elemento:

.contador::after{
    content: " pessoas";
    color: gray;
    font-weight: bold;
}

Formatando parágrafo com conteúdo em outra língua:

p::lang(en){
    font-style: italic;
}

Inserindo cor de fundo apenas no primeiro elemento de uma div:

.noticias::first-child{
    background-color: grey;
}

Formatando todos os elementos de main, exceto os 5 primeiros:

.noticias::nth-child(n+6){
    text-transformation: uppercase;
}

Inserindo borda ao passar com o mouse sobre uma elemento:

#noticia::hover{
    border: 1px solid grey;
}

Mais sobre pseudo-classes em W3Schools

O CSS permite a utilização de variáveis dentro de um documento através de atributos iniciados com-- e da função var(). Cada variável possui seu escopo limitado ao seletor que foi selecionado, por isso, para criar variáveis globais, podemos utilizar o escopo do pseudo-seletor :root:

:root{
--main-color: blue;
}

.botaoPrincipal{
background-color: var(--main-color, red);
}

Repare que a função var() possui dois parâmetros, o primeiro é o nome da propriedade (sempre iniciando com --), e o segundo (opcional) é o chamadofallback, que define o valor caso a variável não seja encontrada.

Mais informações sobre variáveis

As transições do CSS permitem que possamos alterar as propriedades de um elemento de forma gradual, especificando duração, curva e delay. As transições acontecem cada vez que uma nova regra é aplicada a um elemento. Isso pode acontecer pela aplicação pseudo-elementos vistos acima, ou mesmo pela alteração da DOM através de javascript. Utilizaremos os seguintes atributos:

As transições só serão aplicadas a propriedades com valores contínuos, como por exemploopacity, width e margin. Não é possível executar transição de atributos como display e text-transformation, por exemplo.

transition

Atalho para todas os atributos a seguir. Ex.:

transition: opacity 5s linear 0.5s

transition-property

Especifica quais são os nomes das propriedades que receberão o efeito de transição; Ex.:

transition-property: opacity;

transition-duration

Especifica a duração da transição. Ex.:

transition-duration: 5s;

transition-timing-function

Especifica o tipo de curva usada na transição. Os valores podem ser ease,ease, linear, ease-in, ease-out,ease-in-out, além da função personalida cubic-belzier(). Exemplos de funções aqui. Ex.:

transition-timing-funcion: linear;

transition-delay

Especifica o tempo para início da transição. Ex.:

transition-delay: 0.5s;

Exemplos de uso

Alterando o tamanho de uma div ao passar o mouse sobre ela:

div {
    transition-property: width;
}

div:hover {
    width: 300px;
}

Mais informações sobre transições em W3Schools

Um elemento pode ter várias classes e, dessa forma, ter diversas regras diferentes aplicadas pelo CSS. Podemos adicionar uma nova classe a um elemento utilizando o código abaixo, que adiciona a classe notificacao ao elemento de id msg usando um botão:

<button type="button" onclick="return adicionar()">Adicionar</button>

function adicionar(){
    document.querySelector("#nota").classList.add("notificacao")
}

Para remover uma classe, utilize:

document.querySelector("#nota").classList.remove("notificacao")

As animações possuem um conceito muito parecido com o das transições no CSS. No entanto, ao contrário das transições, as animações permitem adicionar keyframes, ou etapas intermediárias que permitem criar animações muito mais complexas, além da possibilidade de animar objetos sem a ação imediata do usuário.

Para criar uma animação, vamos definir o atributo animation no seletor em que pretendemos aplicar:

.caixa{
    animation: mover 1s;
}

E em seguida definir as etapas da animação de mesmo nome, usando a anotação@keyframes:

@keyframes mover{
    0% {
        transform: translateX(100px);
    }
    100%{
        transform: translateX(0);
    }
}

Como em transition, a propriedade animation também é um atalho para outras propriedades:

animation

Atalho para as propriedades abaixo. Ex.:

animation: 3s ease-in 1s infinite alternate both running tremer;

animation-duration

Define a duração da animação. Ex.:

animation-duration: 3s;

animation-timing-function

Define a curva de animação. Pode usar os valores como ease,linear,ease-in, ease-out e ease-in-out, além da função personalida cubic-belzier(). Ex.:

animation-timing-function: ease-in;

animation-delay

Define o delay até o ínicio da animação. Ex.:

animation-delay: 1s;

animation-iteration-count

Define o número de vezes que a animação será repetida. Utilize infinite para repetir indefinidamente. Ex.:

animation-iteration-count: infinite;

animation-direction

Define a direção da animação e/ou se ela deve alternar. Pode conter os valoresnormal, reverse, alternate,alternate-reverse. Ex.:

animation-direction: alternate;

animation-fill-mode

Define como os valores iniciais e finais serão aplicados. Aceita os valoresnone,forwards, backwards e both. Ex.:

animation-fill-mode: both;

animation-play-state

Permite rodar e pausar a animação usando os valores paused erunning. Ex.:

animation-play-state: running;

animation-name

Define o nome da animação, ou seja, qual o nome dos @keyframes a serem utilizados. Ex.:

animation-name: tremer;

Assim como as transições, as animações do CSS também são executadas apenas sobre atributos contínuos, que possuem valores numéricos.

Crie um formulário contendo duas entradas para usuário (email) e senha (password), além de um botão para realizar autenticação.

Ao lado de cada formulário, deve haver uma div contendo a descrição do campo, que deve ser mostrada apenas quando o usuário passa o mouse sobre o input

Ao clicar no botão, a caixa de mensagem (inicialmente escondida) deve ser mostrada indicando que a autenticação está sendo processada. Nenhuma ação é necessária, mas o aparecimento da caixa de mensagem na tela deve seguir os seguntes parâmetros:

1. Uma transição de opacidade 0 para 1 deve ser aplicada, usando a função easeOutCubic
2. O tempo de transição deve ser de 0.8 segundos
3. O formulário de login deve desaparecer usando a mesma transição, mas com opacidade inversa

Utilizando este exemplo, implemente uma animação para a barra de carregamento .barra que atenda as seguintes especificações:

1. Deve modificar de opacidade 0 para opacidade 1 no 1/10 da animação
2. Deve transitar entre as cores red (para 0/10), yellow (para 5/10) e green (para 10/10)
3. A largura inicial do elemento deve ser de 0px e a largura final de 500px
4. A animação total deve durar 10 segundos
5. Os valores finais devem ser preservados depois que animação acabar

Utilizando este exemplo como base, implemente a estilização de um formulário baseado nas seguintes regras:

• Entradas que estão válidas devem ter a cor de fundo verde
• Entradas em foco devem ter a cor de fundo amarela
• O botão deve ter cor de fundo azul e mudar de tom quando o mouse estiver sobre ele e quando for clicado

Utilizando o mesmo modelo do exemplo anterior, estilize o formulário para conter as seguintes animações/transições:

• A primeira deve alternar a cor do elemento h1 da página gradativamente entre 3 cores a sua escolha, com número de execuções indefinidas.
• A segunda deve implementar uma animação de "chacoalhar" para os input que estão inválidos
• Por fim, o formulário deverá aparecer suavemente ao ser carregado na tela.