.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px tracejada "

P (font-size: 24px! important;) A regra! important no final de um valor substituirá quaisquer outras declarações de estilo desse atributo, incluindo inline "

A (/ * URL totalmente válido, provável link externo * /) a (/ * link para site específico * /) a, a (/ * link relativo interno * /) a (/ * link de e-mail * /) a (/ * "

Uma técnica de design popular é criar um contêiner de conteúdo que se pareça com uma folha de papel e empilhar outras folhas de papel abaixo dele, adicionando uma camada "

Home Catálogo Preço Sobre Contato nav (largura: 960px; altura: 100px; margem: 120px automático; alinhamento de texto: centro;) .top-menu li (exibição: bloco em linha; "

Aqui está o Google Code Prettify (encontrado nesta fonte). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "

H1 # logo (largura: 200px; // largura da altura da imagem: 100px; // altura do fundo da imagem: url (../ caminho / para / imagem.jpg.webp); indentação do texto: -9999px;) Esta técnica "

O blockquote é exibido em navegadores compatíveis com os padrões com o efeito "aspas grandes antes de" e no IE com uma borda esquerda espessa e um cinza claro "

Requer jQuery e jQuery UI para o controle deslizante real. A face é feita de elementos formados em círculos com raio de borda. A boca, indicando felicidade "

Do rodapé do design v8 de CSS-Tricks. Ver rodapé de demonstração (limpar: ambos; overflow: hidden; font-size: 16px; line-height: 1.3;) # footer-boxes ("

Por padrão, todas as versões do IE têm uma barra de rolagem nas áreas de texto, mesmo quando estão vazias. Nenhum outro navegador faz isso, então, se você quiser removê-lo para que o IE possa "

Qualquer link de âncora antigo pode ser um link para um documento PDF, mas clicar em um link como esse pensando o contrário pode ser surpreendente e desconfortável para o usuário. Esta"

Isso pressupõe o uso de um autoprefixer. .face: hover (animação: agitar 0,82s cúbico-bezier (0,36, 0,07, 0,19, 0,97) ambos; transform: translate3d (0, 0, 0); "

Padrão: -moz-border-radius: 10px; -webkit-border-radius: 10px; raio da borda: 10px; / * verificação futura * / -khtml-border-radius: 10px; / * para o antigo "

Traga seus próprios prefixos! .grow (transição: all .2s easy-in-out;) .grow: hover (transform: scale (1.1);) "

Todo mundo adora fitas

.ribbon (font-size: 16px! important; / * This ribbon "

Por incluir gráficos de alta resolução, mas apenas para telas que possam fazer uso deles. "Retina" sendo "2x": @media (-webkit-min-device-pixel-ratio: 2), "

Há momentos em que uma seqüência de texto muito longa pode estourar o contêiner de um layout. Por exemplo: URLs normalmente não têm espaços, então eles "

Para idiomas da direita para a esquerda, você pode trocar o layout padrão da esquerda para a direita na maioria dos navegadores simplesmente por meio do atributo dir. texto da direita para a esquerda "

A (contorno: 0;) Cuidado ao remover estilos de contorno dos links, pois são um recurso de usabilidade. Se o fizer, certifique-se de definir estilos de foco claros. Se"

Às vezes, pode ser desejável remover a margem superior ou esquerda do primeiro elemento em um contêiner. Da mesma forma, a margem direita ou inferior do último "

Esta página lista uma tonelada de diferentes dispositivos e consultas de mídia que visam especificamente aquele dispositivo. Isso provavelmente não é geralmente uma boa prática, mas é útil saber quais são as dimensões de todos esses dispositivos em um contexto CSS. "

Webkit-tap-highlight-color: rgba (0,0,0,0); E para permitir: estilos ativos funcionem em seu CSS em uma página do Mobile Safari: "

Bordas pontilhadas ao redor dos links são um recurso de acessibilidade que a maioria dos navegadores tem por padrão. É para usuários que devem ou optam por navegar pelo teclado, lá "

HTML: .. ou .. Go CSS: input.button (text-indent: -9000px; text-transform: capitalize;) O recuo negativo sozinho infelizmente não funciona para remover texto "

Cor ligeiramente mais clara (supondo que o texto seja preto), borda inferior pontilhada e um cursor de ponto de interrogação. Esta se tornou uma abordagem um tanto padronizada, "

Para imagens de plano de fundo CSS. Seu seletor (largura: 200px; altura: 100px; plano de fundo: url (/folder/yourimage.png.webp) sem repetição; _background: nenhum; "

Nota importante aqui! Portas de correr é uma técnica bastante antiga. Já teve seu tempo na web, mas provavelmente não é a maneira mais inteligente de fazer isso atualmente. Nós temos"

Sup, sub (alinhamento vertical: linha de base; posição: relativa; topo: -0,4em;) sub (topo: 0,4em;) "

@media print (a :: after (content: "(" attr (href) ")";)) "