CSS-rikosten tekeminen

kuva

CSS-temppujen aika on ohi. Nyt on CSS-rikosten aika!

Tässä nykyisessä sisältöpalveluntarjoajan ympäristössä käyttäjät rajoittuvat usein ilmaisemaan itseään tekstin, linkkien ja kuvien muodossa. Puhdistussäännöt yleensä poistavat HTML:n, JavaScriptin ja erilaiset attribuutit.

Sosiaalisen median palvelu Cohost antaa käyttäjille enemmän vapautta merkintöjen ja sisäisten tyylien kanssa kuin mihin olemme yleensä tottuneet. Jotkut käyttäjät ovat hyödyntäneet tätä vapautta tehdäkseen CSS-rikoksia! Se on johtanut tuttujen käyttöliittymien ja interaktiivisten pelien luoviin toistoihin käyttämällä ominaisuuksia epätavallisilla tavoilla.

Blackle Mori loi juonen jossa kahvasta vetämällä hitaasti kääntyy sarja vaihteita, hihnapyöriä ja ketjuja. Lopulta aukko avautuu paljastamaan sivuston maskotin ("munapuikko") ja julistuksen "Hyvää työtä!". Olen tuijottanut tätä Developer Toolsissa ja se on hämmästyttävä yhdistelmä grid, resize, transformja calc(). Lopulta lisäsin a border kaikille <div>s yrittää saada parempi käsitys siitä, miten kukin yksittäinen elementti liikkui.

Aiemmin on ollut tilanteita, joissa minua on rajoitettu käyttämästä täyttä HTML-, JavaScript- ja CSS-työkalupakettia. On ollut monia tapauksia käyttää koristeita CSS-muodot kiertää kuvia. olen käyttänyt :hover kiertotapana mouseenter ja mouseleave. olen käyttänyt input:checked sisarusten valitsijana vaihtamista varten.

Vaikka CSS-rikoksia ei luultavasti haluaisi käyttää säännöllisesti, meidän pitäisi omaksua kokeiluja rajoitusten puitteissa, jotka voivat edistää luovia ratkaisuja.


Suora linkki →

Aikaleima:

Lisää aiheesta CSS-temppuja