Escala o tamanho das fontes de forma fluida entre dois breakpoints sem media queries.
/* Sintaxe: clamp(mínimo, preferido, máximo) */
/* Preferido = valor linear entre os breakpoints */
:root {
/* 14px em 320px → 18px em 1280px */
--text-sm: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
/* 16px → 20px */
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
/* 24px → 36px */
--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
/* 32px → 56px */
--text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
p { font-size: var(--text-base); }Componente accordion com ARIA expandido/colapsado e animação de altura com CSS.
Componente de abas seguindo o padrão ARIA Authoring Practices com navegação por teclado.
Estrutura semântica de card de produto com preço, avaliação e botão de compra acessível.
Estrutura completa de variáveis CSS para cores, tipografia, espaçamento e breakpoints.
Efeito de carregamento skeleton (shimmer) com CSS puro para placeholders de conteúdo.