Exemplo CSS
- Página anterior Item de grade CSS
- Próxima página Quiz CSS
Seletor do CSS
Uso do CSS
Comentário do CSS
Cor do CSS
Fundo do CSS
- Definir a cor de fundo da página
- Definir a cor de fundo de diferentes elementos
- Definir a imagem como fundo da página
- Como repetir a imagem de fundo apenas na direção horizontal
- Como posicionar a imagem de fundo
- Imagem de fundo fixa (a imagem não rola com o resto da página)
- Todas as propriedades de fundo em uma declaração
- Exemplo avançado de fundo
Borda do CSS
- Definir a largura de todas as bordas
- Definir a largura da borda superior
- Definir a largura da borda inferior
- Definir a largura da borda esquerda
- Definir a largura da borda direita
- Definir o estilo de todas as bordas
- Definir o estilo da borda superior
- Definir o estilo da borda inferior
- Definir o estilo da borda esquerda
- Definir o estilo da borda direita
- Definir a cor de todas as bordas
- Definir a cor da borda superior
- Definir a cor da borda inferior
- Definir a cor da borda esquerda
- Definir a cor da borda direita
- Todas as propriedades de borda em uma declaração
- Adicionar bordas arredondadas ao elemento
- Definir diferentes bordas para cada lado
- Todas as propriedades de borda superior em uma declaração
- Todas as propriedades de borda inferior em uma declaração
- Todas as propriedades de borda esquerda em uma declaração
- Todas as propriedades de borda direita em uma declaração
Margem do CSS
- Definir diferentes margens externas para todos os lados do elemento
- Usar a propriedade margin abreviada com quatro valores
- Usar a propriedade margin abreviada com três valores
- Usar a propriedade margin abreviada com dois valores
- Usar a propriedade margin abreviada com um valor
- Definir a margem externa como auto para centralizar o elemento dentro do contêiner
- Herdar a margem externa esquerda do pai
- Mergulho de margem
Margem Interna do CSS
- Definir diferentes margens internas para todos os lados do elemento
- Usar a abreviação de margem interna com quatro valores
- Usar a abreviação de margem interna com três valores
- Usar a abreviação de margem interna com dois valores
- Usar a abreviação de margem interna com um valor
- Margem interna e largura do elemento (não definir box-sizing)
- Margem interna e largura do elemento (definir box-sizing)
- Definir a margem interna esquerda do elemento
- Definir a margem interna direita do elemento
- Definir a margem interna superior do elemento
- Definir a margem interna inferior do elemento
Altura/Largura CSS
Modelo de caixa CSS
Contorno do CSS
Texto do CSS
- Definir a cor do texto para diferentes elementos
- Alinhar o texto
- Remover a linha abaixo do link
- Decorar o texto
- Controlar o caso das letras no texto
- Indentar o texto
- Definir o espaçamento entre os caracteres
- Definir o espaçamento entre as linhas
- Definir a direção do texto do elemento
- Aumentar o espaçamento entre as letras
- Definir sombra de texto do elemento
- Desativar quebra de linha no elemento
- Alinhar imagens no texto verticalmente
Fonte do CSS
Ícone do CSS
Link do CSS
Lista do CSS
Tabela do CSS
- Definir bordas pretas para table, th e td
- Usar border-collapse
- Borda única ao redor da tabela
- Definir a largura e altura da tabela
- Definir o alinhamento horizontal do conteúdo (text-align)
- Definir a alinhamento vertical do conteúdo
- Definir a margem interna dos elementos th e td
- Separador horizontal
- Tabelas suspensores
- Tabelas de barras
- Definir a cor da borda da tabela
- Definir a posição do título da tabela
- Tabelas responsivas
- Criar tabelas bonitas
Exibição CSS
Posicionamento CSS
- Posicionar elementos em relação à janela do navegador
- Posicionar elementos em relação à posição normal do elemento
- Posicionar elementos usando valores absolutos
- Posicionamento adesivo
- Elementos sobrepostos
- Definir a forma do elemento
- Definir a borda superior da imagem usando valores de pixels
- Definir a borda inferior da imagem usando valores de pixels
- Uso de valores em pixels para definir a margem esquerda da imagem
- Uso de valores em pixels para definir a margem direita da imagem
- Posicionamento de imagem e texto (canto superior esquerdo)
- Posicionamento de imagem e texto (canto superior direito)
- Posicionamento de imagem e texto (canto inferior esquerdo)
- Posicionamento de imagem e texto (canto inferior direito)
- Posicionamento de imagem e texto (centralizado)
CSS Sobra
- Uso de overflow: visible - O conteúdo não é cortado. Ele é renderizado fora da caixa do elemento.
- Uso de overflow: hidden - O conteúdo é cortado, e o restante do conteúdo é escondido.
- Uso de overflow: scroll - O conteúdo é cortado, mas uma barra de rolagem é adicionada para ver o restante do conteúdo.
- Uso de overflow: auto - Se o conteúdo for cortado, deve ser adicionada uma barra de rolagem para ver o restante do conteúdo.
- Uso de overflow-x e overflow-y
CSS Flutuante
- Uso simples da propriedade float
- Imagem com borda e margem flutuando para a direita do parágrafo
- Imagem com título flutuando para a direita
- Deixar a primeira letra do parágrafo flutuando para a esquerda
- Fechar flutuante (usando propriedade clear)
- Fechar flutuante (usando hacko clearfix)
- Criação de caixas flutuantes
- Criação de imagens alinhadas
- Criação de caixas iguais em altura (através de flexbox)
- Criação de menu horizontal
- Exemplo de criação de layout web
CSS Inline-block
Elementos alinhados CSS
- Alinhamento central através de margem
- Alinhamento central do texto
- Alinhamento central da imagem
- Alinhamento à esquerda/direita através de position
- Alinhamento à esquerda/direita através de position - solução cross-browser
- Alinhamento à esquerda/direita através de float
- Alinhamento à esquerda/direita através de float - solução cross-browser
- Alinhamento vertical através de padding
- Alinhamento vertical e horizontal
- Alinhamento vertical através de line-height
- Alinhamento vertical e horizontal através de position
Combinador CSS
Pseudo-classe do CSS
- Adicionar cores diferentes para links
- Adicionar estilos adicionais para links
- Uso :focus
- :first-child - Seleciona o primeiro elemento p
- :first-child - Seleciona o primeiro elemento i dentro de todos os elementos p
- :first-child - Seleciona todos os elementos i dentro do primeiro filho de todos os elementos p
- Usar :lang
Pseudo-elemento do CSS
Geração de conteúdo CSS
Opacidade do CSS
Barra de Navegação do CSS
- Barra de navegação vertical com estilo completo
- Barra de navegação horizontal com estilo completo
- Barra de navegação vertical fixa de altura total
- Barra de navegação horizontal fixa
- Barra de navegação adesiva (não funciona no IE ou Edge 15 e versões anteriores)
- Barra de navegação superior responsiva
- Barra de navegação lateral responsiva
Lista suspenso CSS
Biblioteca de Imagens do CSS
Image Sprite do CSS
Seletor de Propriedade do CSS
- Selecionar todos os elementos <a> com o atributo target
- Selecionar todos os elementos <a> com o atributo target="_blank"
- Selecionar todos os elementos com o atributo title contendo a lista de palavras separadas por espaço, uma das quais é "flower"
- Selecionar todos os elementos com o valor de atributo class começando com "top" (deve ser a palavra inteira)
- Selecionar todos os elementos com o valor de atributo class começando com "top" (não pode ser a palavra inteira)
- Selecionar todos os elementos com o valor de atributo class terminando com "test"
- Selecionar todos os elementos com o valor de atributo class contendo "te"
Formulário do CSS
- Campo de entrada de largura total
- Campo de entrada preenchido
- Campo de entrada com borda
- Campo de entrada com borda inferior
- Campo de entrada com cor
- Campo de entrada com foco
- Campo de entrada com foco 2
- Campo de entrada com ícone
- Caixa de busca com efeito de animação
- Definir o estilo da caixa de texto
- Definir o estilo do menu de seleção
- Definir o estilo do botão
- Formulário responsivo
Contador do CSS
Layout do Site do CSS
Arredondamento do CSS
Imagem da Borda do CSS
Fundo do CSS
- Adicionar várias imagens de fundo ao elemento
- Determinar o tamanho da imagem de fundo
- Usar "contain" e "cover" para dimensionar a imagem de fundo
- Definir o tamanho da imagem de fundo
- Imagem de fundo de tamanho completo (cobrindo toda a área do conteúdo)
- Usar background-origin para determinar a posição de colocação da imagem de fundo
- Usar background-clip para determinar a área de renderização do fundo
Gradiente do CSS
- Gradiente linear - De cima para baixo
- Gradiente linear - De esquerda para direita
- Gradiente linear - Diagonal
- Gradiente linear - Ângulo específico
- Gradiente linear - Múltiplas legendas de cor
- Gradiente linear - Arco-íris + texto
- Gradiente linear - Transparência
- Gradiente linear - Gradiente linear repetido
- Gradiente radial - Legendas de cor distribuídas uniformemente
- Gradiente radial - Espaçamento diferente das legendas de cor
- Gradiente radial - Definir a forma
- Gradiente radial - Diferentes palavras-chave de tamanho
- Gradiente radial - Gradiente radial repetido
Efeito de sombra CSS
- Efeito de sombra simples
- Adicionar cor à sombra
- Adicionar efeito de nebulosidade à sombra
- Texto branco com sombra preta
- Sombra brilhante de neônio vermelha
- Sombra brilhante de neônio vermelha e azul
- Texto branco com sombras pretas, azuis e azuis escuros
- Adicionar box-shadow simples ao elemento
- Adicionar cor ao box-shadow
- Adicionar cor e efeito de nebulosidade ao box-shadow
- Criar um cartão de papelão semelhante (texto)
- Criar um cartão de papelão semelhante (imagem Polaroid)
Efeito de Texto do CSS
- Especificar como o conteúdo sobressalente deve ser apresentado ao usuário
- Como exibir o conteúdo sobressalente ao passar o mouse sobre o elemento
- Permitir que textos longos sejam quebrados e continuem na próxima linha
- Determinar as regras de quebra de linha
- Determinar o modo de escrita do texto (esquerda para direita ou verticalmente)
Fonte web CSS
Transformações 2D CSS
- translate() - Remover elemento da posição atual
- rotate() - Rotação horária do elemento
- rotate() - Rotação anti-horária do elemento
- scale() - Aumentar o elemento
- scale() - Diminuir o elemento
- skewX() - Inclinar o elemento ao longo do eixo X
- skewY() - Inclinar o elemento ao longo do eixo Y
- skew() - Inclinar o elemento ao longo dos eixos X e Y
- matrix() - Rotacionar, escalar, mover e inclinar o elemento
Transformações 3D CSS
Transições CSS
- Transição - Mudar a largura de um elemento
- Transição - Mudar a largura e a altura de um elemento
- Definir diferentes curvas de velocidade para a transição
- Definir atraso para a transição
- Adicionar transformação ao efeito de transição
- Definir todas as propriedades de transição em uma propriedade abreviada
Animações CSS
- Ligar a animação a um elemento
- Animação - Mudar a cor de fundo de um elemento
- Animação - Mudar a cor de fundo e a posição de um elemento
- Atraso na animação
- Executar a animação três vezes antes de parar
- Animação eterna
- Animação em sentido inverso
- Animação alternada
- Curva de velocidade da animação
- Atributo abreviado de animação
Dicas de ferramenta CSS
Imagem estilizada CSS
- Imagem arredondada
- Imagem circular
- Miniatura
- Miniatura como link
- Imagem responsiva
- Texto de imagem (canto superior esquerdo)
- Texto de imagem (canto superior direito)
- Texto de imagem (canto inferior esquerdo)
- Texto de imagem (canto superior direito)
- Texto de imagem (centrado)
- Imagem Polaroid
- Filtro de imagem em tons de cinza
- Avançado - Imagem modal implementada por CSS e JavaScript
Object-fit CSS
Botão CSS
Paginação CSS
Colunas CSS
- Criar colunas múltiplas
- Definir o espaçamento entre as colunas
- Definir o estilo das regras entre as colunas
- Definir a largura das regras entre as colunas
- Definir a cor das regras entre as colunas
- Definir a largura, estilo e cor das regras entre as colunas
- Definir quantas colunas o elemento deve cruzar
- Definir a largura recomendada para as colunas
Interface do usuário CSS
Variáveis CSS
Box Sizing CSS
CSS Flexbox
- Flexbox com três itens flexíveis
- Flexbox com três itens flexíveis - direção rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Ordem dos itens flexíveis
- Margin-right:auto;
- Margin:auto; = centralização perfeita
- Definir align-self no item flexível
- Definir o comprimento do item flexível, em relação aos outros componentes do item flexível
- Criar uma biblioteca de imagens responsiva usando o flexbox
- Criar um site responsivo usando o flexbox
Consultas de mídia CSS
Consultas de mídia CSS - Mais exemplos
- Definir diferentes cores de fundo com base na largura da tela
- Menu de navegação responsivo
- Colunas responsivas usando flutuação
- Colunas responsivas usando Flexbox
- Ocultar elementos usando consultas de mídia
- Tamanho da fonte responsivo
- Biblioteca de imagens responsiva
- Site responsivo
- Mudar o layout da página conforme a direção do navegador
- Largura mínima até largura máxima
Design de Web responsivo CSS
Grade CSS
- Página anterior Item de grade CSS
- Próxima página Quiz CSS
