CSS-Tricks 的时代已经结束。现在是犯 CSS 罪的时代!
在当前的內容服务提供商环境中,用户通常仅限于以文本、链接和图像形式表达自己。消毒规则往往会剥离 HTML、JavaScript 和各种属性。
社交媒体服务 Cohost 允许用户比我们通常习惯的拥有更大的标记和内联样式自由度。一些用户利用这种自由犯下了 CSS 罪!它导致通过以非常规方式使用属性来进行熟悉界面的创意重建和互动游戏。
Blackle Mori 创建了一个装置,其中缓慢拉动一个把手会转动一系列齿轮、滑轮和链条。最终,一个孔口会打开,露出该网站的吉祥物(“蛋虫”)和“干得好!”的宣告。我一直在开发者工具中盯着它看,它是一个令人惊叹的 grid
、resize
、transform
和 calc()
的组合。我最终给所有 <div>
添加了 border
,以更好地了解每个元素是如何移动的。
- 其他一些 CSS 罪使用
resize
来允许查看者进行基本的点击和拖动操作。 - 其他 CSS 罪通过
<details>
和<summary>
创建有限的交互。 - 社区中的一些成员已经采用 Andrew Siller 在 “活着的 GIF 之夜:制作互动多人体验” 中的技术来创建一个多人 Pokemon 体验!
过去,我曾被限制使用 HTML、JavaScript 和 CSS 的完整工具包。有很多使用装饰性 CSS 形状 来绕过图像的实例。我使用 :hover
作为 mouseenter
和 mouseleave
的变通方法。我使用 input:checked
作为兄弟选择器 进行切换。
虽然 CSS 罪可能不是您想经常使用的东西,但我们应该拥抱在限制条件下进行的实验,这可以培养创造性的解决方案。