Laboratório · 001 · Ao vivo

Chronographe,
em tempo real.

Nossos estudos de relógios em CSS codificados à mão, reconstruídos como um instrumento WebGL com iluminação física. Ele marca a sua hora local. Arraste para girá-lo; aperte os botões para cronometrar algo.

Cronógrafo00:00.0

Código e arte

O arquivo.

A arte em código une a elegância da programação ao poder expressivo da estética visual. Veja mais no Figma e no CodePen.

Novo · Antes & agora Oito destas peças, refeitas em 2026: em HTML & CSS e em 3D. Veja lado a lado.

Balão em CSS

Animação de balão flutuando em loop.

2025

Primeira letra em CSS

Fundo animado a partir de uma primeira letra.

2021

Rosto em CSS

Ilustração de rosto baseada em grid, em HTML & CSS puros.

2019

Animação Undraw

Animação de foguete em SVG.

2018

CSS Sucks

Animação de texto elástico e multicolorido.

2018

Telas mobile elásticas

Faça suas capturas de tela mobile se destacarem.

2018

Títulos de terror animados

Aberturas de filmes de terror em CSS.

2018

Novos recursos de CSS

Os recursos de CSS de 2019 organizados como uma UI.

2018

Escolha do CodePen

Barras de rolagem e caixas

Esqueça o layout. Temos isso (de novo).

2018

Escolha do CodePen

CSS is Awesome

Animação de texto do famoso meme.

2018

Escolha do CodePen

Abertura voadora

Animação em loop de abertura de filme.

2018

Escolha do CodePen

Abertura de cinema

Tipografia cinematográfica animada.

2018

Escolha do CodePen

Relógio de pêndulo

Cena responsiva em HTML, CSS, SVG e emoji.

2018

Escolha do CodePen

Checkbox zumbi

Um checkbox transformado em apocalipse.

2018

Desafio do formulário das tartarugas

Um formulário simples com muito estilo.

2018

Cronógrafo, platina

Cronógrafo de platina funcional em HTML & CSS.

2018

Cronógrafo, ouro branco

Cronógrafo de ouro branco funcional em HTML & CSS.

2018

Cronógrafo, ouro rosé

Cronógrafo de ouro funcional em HTML & CSS.

2018

“

O primeiro cartunista de CSS?

Editores do CodePen ↗“

Just a few of our favorite Pens from this week.

Editores do CodePen ↗

Peças do cronógrafo, platina

Todas as peças do cronógrafo de platina, dispostas.

2018

Peças do cronógrafo, ouro branco

Todas as peças do cronógrafo de ouro branco, dispostas.

2018

Peças do cronógrafo, ouro rosé

Todas as peças do cronógrafo de ouro, dispostas.

2018

Game & Watch em CSS

Ilustração responsiva de um portátil clássico.

2012

R2-D2 em CSS

Ilustração de robô em HTML & CSS.

2012