¿Cuáles son algunos de los abusos más geniales / mejores / peores de CSS?

Por ejemplo, estas formas , o el uso de múltiples sombras de cuadro para hacer pixel art.

concurso de popularidad que termina el 16/04/14.

Algún tipo creó una herramienta para convertir cualquier imagen a CSS puro. Esto va mucho más allá de la intención original de CSS.

Aquí hay un ejemplo (La famosa Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

Y aquí está la herramienta: https://github.com/jaysalvat/image2css

Cambiar imágenes sobre la marcha

No necesariamente lo llamaré abuso, pero puede usar CSS para reemplazar un IMGcon un dado SRCpara mostrar una imagen completamente diferente.

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

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

Puede ser muy divertido combinarlo con @mediaselectores para mostrar imágenes completamente diferentes al imprimir una página web. (El mismo truco se puede hacer por PDFcierto. Es bueno ver la cara del tipo que está imprimiendo un documento y todos los cuadros de aspecto serio son reemplazados por hermosas damas :))

Elementos redimensionables:

Puede agregar resize:bothpara permitir que el usuario cambie el tamaño de un elemento.
En algunos navegadores, esto solo se admite en <textarea>'s.

Vista previa de CSS en tiempo real:

Esto no es una cosa real de CSS, pero puede agregar la contenteditablepropiedad, agregar la propiedad style="display:block;z-index:99;width:500px;height:500px;resizable:both;"y puede editar su CSS.

Estilo CSS Casillas de verificación / botones de radio:

Usando la siguiente pieza de marcado como ejemplo:

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

Puede usar display:noneel <input>y, usando los selectores CSS3, puede establecer un fondo 'sprite' para mostrar los diferentes estados de la casilla de verificación / botón de radio.

¡El orden de los elementos es importante, y hacer coincidir la for=""propiedad con id=""la entrada es aún más importante!

Puede ver algunos ejemplos aquí: http://www.csscheckbox.com/

Selectores específicos del navegador:

Todos hemos intentado utilizar algún tipo de mezcla de JavaScript con clases CSS y consultas de medios ...

Bueno, aquí hay algunos selectores específicos del navegador:

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

Para IE, tienes toneladas de selectores. No hay necesidad de más.

Supongo que depende de lo que quieras decir con abuso, pero esto volvería loco a tus usuarios:

Nervios

*:hover{
  zoom:99%;
}

(al pasar el mouse por la página, todo te inquieta)

Efecto Experts-Exchange / Pay-to-View

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

(hace que todo el texto sea borroso)

"GIF animados" usando hojas de sprites CSS

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

("The Dude" de Java agitando su mano)