Commettre des crimes CSS

image

Le temps des CSS-Tricks est révolu. C'est maintenant le temps des CSS Crimes !

Dans le paysage actuel des fournisseurs de services de contenu, les utilisateurs sont souvent limités à s'exprimer sous forme de texte, de liens et d'images. Les règles de nettoyage ont tendance à supprimer HTML, JavaScript et divers attributs.

Service de médias sociaux Cohost permet aux utilisateurs d'avoir une plus grande liberté avec le balisage et les styles en ligne que ce à quoi nous sommes généralement habitués. Certains utilisateurs ont profité de cette liberté pour commettre des CSS Crimes ! Cela a abouti à des recréations créatives d'interfaces familières et de jeux interactifs en utilisant des propriétés de manière non conventionnelle.

Blackle Mori a créé un engin où tirer une poignée fait tourner lentement une série d'engrenages, de poulies et de chaînes. Finalement, une ouverture s'ouvre pour révéler la mascotte du site ("eggbug") et la proclamation "Good Job!". J'ai regardé cela dans les outils de développement et c'est une combinaison étonnante de grid, resize, transformet une calc(). j'ai fini par ajouter un border à tous <div>s pour essayer de mieux comprendre comment chaque élément individuel se déplaçait.

Il y a eu des situations dans le passé où j'ai été empêché d'utiliser la boîte à outils complète de HTML, JavaScript et CSS. Il y a eu de nombreux exemples d'utilisation décorative Formes CSS pour contourner les images. j'ai utilisé :hover comme solution de contournement pour mouseenter et les mouseleave. j'ai utilisé input:checked en tant que sélecteur de frères et sœurs pour basculer.

Bien que les crimes CSS ne soient probablement pas quelque chose que vous voudriez utiliser de manière régulière, nous devrions adopter des expériences dans le cadre de contraintes susceptibles de favoriser des solutions créatives.


Lien direct →

Horodatage:

Plus de Astuces CSS