¿El peor abuso de CSS? [cerrado]

12

¿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.

popularity-contest css 930913
fuente
14
Usándolo en línea en styleatributos y agregando !importanta cada uno.
user80551
¿Cómo se define un abuso ? Estoy fuera de tema, pero gracias por el enlace con formas inspiradoras.
AL
@ n.1 Algo que claramente no estaba previsto cuando se hicieron las especificaciones.
930913
Esta pregunta no cumple con las reglas .
AL
Internet ...
TwoThe

Respuestas:

13

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

almathie
fuente
Santa virgen madre de dios! Esa es una herramienta bastante buena cuando haces un fondo degradado y (por alguna razón) no tienes el código cerca de ti y lo necesitas.
Ismael Miguel
13

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 :))

RobAu
fuente
+1 Por formas crueles pero ingeniosas de pagar a los colegas ... No es que lo haría, por supuesto ...
WallyWest
El mejor uso que he visto con img {background-image} fue incrustar un gif animado con un fondo jpg
albert
1

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.

Ismael Miguel
fuente
0

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)

scunliffe
fuente