EstruturaIniciante
Damas — duas fileiras corretas
Prévia das 16 primeiras casas com peças encaixadas nas casas escuras.
ACERVO REUTILIZÁVEL
Códigos prontos
Pesquise, visualize e adapte recursos para construir seus próprios projetos.
32recursos disponíveis
CHEGARAM AGORA
Códigos recentes
Interação JavaScriptIniciante
LÓGICA — Uma seleção por vez
Remove a marcação anterior antes de selecionar uma nova peça.
Interação JavaScriptIniciante
INTERAÇÃO — Clique em um elemento
Localiza as peças e executa uma ação quando uma delas recebe um clique.
OutrosIniciante
ESTADO — Peça selecionada
Cria uma indicação visual para mostrar qual peça foi escolhida.
EXPLORE O ACERVO
32 resultado(s)Todos os códigos
AnimaçõesIniciante
Seção iluminada — Hover com box-shadow
Acrescenta uma luz colorida ao redor da seção durante o hover.
AnimaçõesIniciante
Seção que se eleva — Hover com transform
Move suavemente uma seção para cima quando o ponteiro passa sobre ela.
LayoutIniciante
Seções lado a lado — CSS Grid
Organiza duas seções com a mesma largura e as empilha em telas pequenas.
AnimaçõesIntermediário
Sublinhado animado — Pseudo-elemento ::after
Desenha uma linha que cresce abaixo do título quando ocorre hover.
LayoutIniciante
Tabuleiro Quadriculado com CSS
Cria um tabuleiro 8 × 8 responsivo com casas claras e escuras.
Estilo visualIntermediário
Título em degradê — background-clip
Preenche as letras do título com uma passagem entre duas cores.
OutrosIniciante
Título marcado em amarelo — Efeito marca-texto
Cria uma faixa amarela atrás de parte do título sem esconder as letras.
Estilo visualIniciante
VARIAÇÃO — Cores dos jogadores
Usa duas classes para diferenciar visualmente os jogadores.