Cometer delitos de CSS

imagen

El tiempo de CSS-Tricks ha terminado. ¡Ahora es el momento de los CSS Crimes!

En este panorama actual de proveedores de servicios de contenido, los usuarios a menudo se limitan a expresarse en texto, enlaces e imágenes. Las reglas de desinfección tienden a eliminar HTML, JavaScript y varios atributos.

servicio de redes sociales Cohost permite a los usuarios tener una mayor libertad con el marcado y los estilos en línea de lo que normalmente estamos acostumbrados. ¡Algunos usuarios se han aprovechado de esta libertad para cometer CSS Crimes! Ha dado como resultado recreaciones creativas de interfaces familiares y juegos interactivos mediante el uso de propiedades de formas no convencionales.

Blackle Mori creó un artilugio donde tirando de una manija gira lentamente una serie de engranajes, poleas y cadenas. Eventualmente, se abre una abertura para revelar la mascota del sitio ("huevo de huevo") y la proclamación "¡Buen trabajo!". He mirado esto en Developer Tools y es una combinación increíble de grid, resize, transformy calc(). Terminé agregando un border para todos <div>s para tratar de obtener una mejor comprensión de cómo se movió cada elemento individual.

Ha habido situaciones en el pasado en las que se me ha restringido el uso del conjunto de herramientas completo de HTML, JavaScript y CSS. Ha habido muchos casos de uso de elementos decorativos Formas CSS para moverse por las imágenes. he utilizado :hover como una solución para mouseenter y mouseleave. he utilizado input:checked como selector de hermanos para alternar.

Si bien los CSS Crimes probablemente no sean algo que le gustaría emplear de forma regular, deberíamos adoptar experimentos dentro de las limitaciones que puedan fomentar soluciones creativas.


Enlace directo →

Sello de tiempo:

Mas de Trucos CSS