Begå CSS-forbrydelser

billede

Tiden for CSS-Tricks er forbi. Nu er det tid til CSS Crimes!

I dette nuværende landskab af indholdstjenesteudbydere er brugere ofte begrænset til at udtrykke sig i tekst, links og billeder. Rengøringsregler har en tendens til at fjerne HTML, JavaScript og forskellige attributter.

Social medietjeneste Medvært giver brugerne større frihed med markup og inline-stile, end vi typisk er vant til. Nogle brugere har udnyttet denne frihed til at begå CSS-forbrydelser! Det har resulteret i kreative genskaber af velkendte grænseflader og interaktive spil ved at bruge egenskaber på utraditionelle måder.

Blackle Mori skabte en tingest hvor træk i et håndtag langsomt drejer en række gear, remskiver og kæder. Til sidst åbnes en åbning for at afsløre stedets maskot ("æggelus") og proklamationen "Godt arbejde!". Jeg har stirret på dette i Developer Tools, og det er en fantastisk kombination af grid, resize, transformog calc(). Jeg endte med at tilføje en border til alle <div>s at forsøge at få en bedre forståelse af, hvordan hvert enkelt element bevægede sig.

Der har tidligere været situationer, hvor jeg har været begrænset fra at bruge det fulde værktøjssæt med HTML, JavaScript og CSS. Der har været mange tilfælde af brug af dekorative CSS-former at komme rundt om billeder. jeg har brugt :hover som en løsning til mouseenter , mouseleave. jeg har brugt input:checked som søskendevælger til at skifte.

Selvom CSS-forbrydelser nok ikke er noget, du ønsker at bruge regelmæssigt, bør vi omfavne eksperimenter inden for begrænsninger, der kan fremme kreative løsninger.


Direkte link →

Tidsstempel:

Mere fra CSS-tricks