Quais são alguns dos abusos mais legais / melhores / piores do CSS?

Por exemplo, essas formas ou usando várias sombras de caixa para criar pixel art.

concurso de popularidade que termina em 16/04/14.

Algum cara criou uma ferramenta para converter qualquer imagem em CSS puro. Isso vai muito além da intenção original do CSS.

Aqui está um exemplo (A famosa Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

E aqui está a ferramenta: https://github.com/jaysalvat/image2css

Alterar imagens em tempo real

Não vou necessariamente chamá-lo de abuso, mas você pode usar CSS para substituir um IMGpor um dado SRCpara mostrar uma imagem completamente diferente.

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

Consulte: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

Pode ser muito divertido combinado com @mediaseletores para exibir imagens completamente diferentes ao imprimir uma página da web. (O mesmo truque pode ser feito na PDFbtw. É bom ver o rosto do cara que está imprimindo um documento e todos os gráficos de aparência séria são substituídos por lindas mulheres :))

Elementos redimensionáveis:

Você pode adicionar resize:bothpara permitir que um elemento seja redimensionado pelo usuário.
Em alguns navegadores, isso é suportado apenas em <textarea>.

Visualização de CSS em tempo real:

Isso não é algo real em CSS, mas você pode adicionar a contenteditablepropriedade, adicionar a propriedade style="display:block;z-index:99;width:500px;height:500px;resizable:both;"e editar seu CSS.

Caixas de seleção CSS estilizadas / botões de opção:

Usando o seguinte pedaço de marcação como exemplo:

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

Você pode usar display:noneos <input>seletores CSS3 e, em conjunto, pode definir um plano de fundo 'sprite' para mostrar os diferentes estados da caixa de seleção / botão de opção.

A ordem dos elementos é importante, e combinar a for=""propriedade com id=""a entrada é ainda mais importante!

Você pode ver alguns exemplos aqui: http://www.csscheckbox.com/

Seletores específicos do navegador:

Todos nós tentamos usar algum tipo de mistura de javascript com classes css e consultas de mídia ...

Bem, aqui estão alguns seletores específicos do navegador:

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

Para o IE, você tem vários seletores. Não há necessidade de mais.

Acho que depende do que você quer dizer com abuso, mas isso deixaria seus usuários malucos:

Nervosismo

*:hover{
  zoom:99%;
}

(enquanto você passa o mouse pela página, tudo fica tremendo em você)

Efeito de troca de especialistas / pagamento para visualizar

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

(torna todo o texto embaçado)

"GIFs animados" usando folhas de sprite CSS

http://jsfiddle.net/simurai/CGmCe/light/

("The Dude" de Java acenando com a mão)