Begår CSS-brott

bild

Tiden för CSS-Tricks är förbi. Nu är det dags för CSS Crimes!

I detta nuvarande landskap av innehållsleverantörer är användare ofta begränsade till att uttrycka sig i text, länkar och bilder. Saneringsregler tenderar att ta bort HTML, JavaScript och olika attribut.

Sociala medier tjänst Medvärd tillåter användare att ha större frihet med uppmärkning och inline-stilar än vad vi vanligtvis är vana vid. Vissa användare har utnyttjat denna frihet att begå CSS-brott! Det har resulterat i kreativa återskapanden av välbekanta gränssnitt och interaktiva spel genom att använda egenskaper på okonventionella sätt.

Blackle Mori skapade en grej där man drar i ett handtag långsamt vrider en serie växlar, remskivor och kedjor. Så småningom öppnas en öppning för att avslöja webbplatsens maskot ("ägglus") och proklamationen "Bra jobbat!". Jag har stirrat på detta i Developer Tools och det är en fantastisk kombination av grid, resize, transformoch calc(). Det slutade med att jag lade till en border till alla <div>s att försöka få en bättre förståelse för hur varje enskilt element rörde sig.

Det har funnits situationer tidigare där jag har varit begränsad från att använda den fullständiga verktygslådan med HTML, JavaScript och CSS. Det har förekommit många tillfällen av att använda dekorativa CSS-former för att komma runt bilder. jag har använt :hover som en lösning för mouseenter och mouseleave. jag har använt input:checked som syskonväljare för att växla.

Även om CSS-brott förmodligen inte är något du skulle vilja använda regelbundet, bör vi anamma experiment inom begränsningar som kan främja kreativa lösningar.


Direktlänk →

Tidsstämpel:

Mer från CSS-tricks