Cohost.org 的失落 CSS 技巧 | CSS-Tricks

主要观点:介绍了已关停的 Cohost.org 及其独特的 HTML 支持所带来的创意玩法,如“width-hacking”和 SVG 动画,展示了如何利用这些特性实现各种有趣的效果和游戏。
关键信息:

  • Cohost.org 于 2022 年 6 月公开,2024 年 9 月关停,其服务器已消失,仅 Wayback Machine 有存档。
  • 用户大多是小众互联网创作者及其朋友,被其反资本主义设计吸引,网站无广告和关注者计数,发布界面支持部分 HTML。
  • “width-hacking”利用<details>元素和calc()函数实现各种功能,如组合锁、瓷砖匹配游戏等。
  • SVG 可用于存储矢量图像,其内部可包含<style>块用于配置元素属性,且其样式可使用媒体查询,还能在 SVG 内使用 CSS 动画。
    重要细节:
  • 通过给<summary>元素固定位置、大小和边框样式,创建可点击的按钮效果,利用<div>元素实现按钮状态切换。
  • 利用三个<details>元素在inline-flex容器中的宽度变化,可表示多种状态,如用于谜题游戏或塔防游戏。
  • 在 SVG 背景中使用媒体查询可根据容器大小改变元素属性,如颜色,通过添加“dummy animation”可解决浏览器对 SVG 动画检测的问题,实现平滑过渡。
  • 示例包括用 SVG 实现秘密消息显示、塔防游戏等,还推荐了相关的链接和视频。
阅读 12
0 条评论