Begår CSS-kriminalitet

bilde

Tiden for CSS-Tricks er over. Nå er tiden for CSS Crimes!

I dette nåværende landskapet av innholdstjenesteleverandører er brukere ofte begrenset til å uttrykke seg i tekst, lenker og bilder. Rensingsregler har en tendens til å fjerne HTML, JavaScript og forskjellige attributter.

Sosiale medier tjeneste Medvert lar brukere ha større frihet med markup og innebygde stiler enn vi vanligvis er vant til. Noen brukere har utnyttet denne friheten til å begå CSS-forbrytelser! Det har resultert i kreative gjenskapinger av kjente grensesnitt og interaktive spill ved å bruke egenskaper på ukonvensjonelle måter.

Blackle Mori skapte en innretning der å trekke i et håndtak sakte dreier en rekke tannhjul, trinser og kjeder. Etter hvert åpnes en blenderåpning for å avsløre stedets maskot ("eggbug") og proklamasjonen "Good Job!". Jeg har stirret på dette i Developer Tools, og det er en fantastisk kombinasjon av grid, resize, transformog calc(). Jeg endte opp med å legge til en border til alle <div>s å prøve å få en bedre forståelse av hvordan hvert enkelt element beveget seg.

Det har vært situasjoner tidligere hvor jeg har vært begrenset fra å bruke hele verktøysettet med HTML, JavaScript og CSS. Det har vært mange tilfeller av bruk av dekorative CSS-former for å komme rundt bilder. jeg har brukt :hover som en løsning for mouseenter og mouseleave. jeg har brukt input:checked som søskenvelger for å veksle.

Selv om CSS-kriminalitet sannsynligvis ikke er noe du ønsker å bruke regelmessig, bør vi omfavne eksperimenter innenfor begrensninger som kan fremme kreative løsninger.


Direkte lenke →

Tidstempel:

Mer fra CSS triks