Quali sono alcuni degli abusi più belli / migliori / peggiori dei CSS?

Ad esempio, queste forme o l'utilizzo di più box-ombre per creare pixel art.

concorso di popolarità che termina il 16/04/14.

Qualcuno ha creato uno strumento per convertire qualsiasi immagine in puro CSS. Questo va ben oltre l'intento originale del CSS.

Ecco un esempio (La famosa Gioconda): http://codepen.io/jaysalvat/pen/HaqBf

Ed ecco lo strumento: https://github.com/jaysalvat/image2css

Cambiare le immagini al volo

Non lo chiamerò necessariamente abuso, ma puoi usare CSS per sostituire un IMGcon un dato SRCper mostrare un'immagine completamente diversa.

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

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

Può essere molto divertente in combinazione con i @mediaselettori per visualizzare immagini completamente diverse quando si stampa una pagina Web. (Lo stesso trucco può essere fatto in mezzo PDF. Bello vedere il volto del ragazzo che sta stampando un documento e tutti i grafici dall'aspetto serio sono sostituiti da belle donne :))

Elementi ridimensionabili:

È possibile aggiungere resize:bothper consentire all'utente di ridimensionare un elemento.
Su alcuni browser, questo è supportato solo su<textarea> di.

Anteprima CSS in tempo reale:

Questa non è una vera cosa css, ma puoi aggiungere la contenteditableproprietà, aggiungere la proprietàstyle="display:block;z-index:99;width:500px;height:500px;resizable:both;" e puoi modificare il tuo CSS.

Caselle di controllo CSS / pulsanti radio in stile:

Usando il seguente markup come esempio:

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

È possibile utilizzare display:nonesui <input>selettori CSS3 e, è possibile impostare uno sfondo 'sprite' per mostrare i diversi stati della casella di controllo / pulsante di opzione.

L'ordine degli elementi è importante e corrisponde a for="" proprietà con id=""l'input è ancora più importante!

Puoi vedere alcuni esempi qui: http://www.csscheckbox.com/

Selettori specifici del browser:

Tutti abbiamo provato a usare una sorta di mix javascript con classi css e media-query ...

Bene, ecco alcuni selettori specifici del browser:

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

Per IE, hai tonnellate di selettori. Non c'è bisogno di altro.

Immagino che dipenda da cosa intendi per abuso ma questo farebbe impazzire i tuoi utenti:

Nervosismo

*:hover{
  zoom:99%;
}

(mentre passi con il mouse sulla pagina, tutto si agita su di te)

Scambio di esperti / Effetto pay-to-view

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

(rende tutto il testo sfocato)

"GIF animate" utilizzando fogli sprite CSS

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

(Java "The Dude" agitando la mano)