8位像素艺术图案Skill 8-bit-pixel-art-patterns

---

name: 8-bit-pixel-art-patterns description: 为8位复古组件创建像素化边框、阴影和效果。在构建需要真实像素艺术美学的8位风格UI组件时应用。

8位像素艺术图案

使用绝对定位的div创建真实的像素化边框和阴影。这些图案对于8位组件的复古美学至关重要。

像素化边框图案

使用9个div元素创建像素化边框效果：

<div className="relative">
  <ShadcnButton {...props} className="rounded-none" />

  {/* Corner pixels */}
  <div className="absolute top-0 left-0 size-1.5 bg-foreground" />
  <div className="absolute top-0 right-0 size-1.5 bg-foreground" />
  <div className="absolute bottom-0 left-0 size-1.5 bg-foreground" />
  <div className="absolute bottom-0 right-0 size-1.5 bg-foreground" />

  {/* Edge segments */}
  <div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
  <div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />
  <div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground" />
  <div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground" />

  {/* Side borders */}
  <div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
  <div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground" />
</div>

像素化阴影图案

使用像素化阴影添加深度：

{variant !== "outline" && (
  <>
    {/* Top shadow */}
    <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
    <div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />

    {/* Bottom shadow */}
    <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
    <div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
  </>
)}

图标按钮图案

为图标按钮创建更小、自包含的像素边框：

{size === "icon" && (
  <>
    {/* Top/bottom full bars */}
    <div className="absolute top-0 left-0 w-full h-1.5 bg-foreground" />
    <div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground" />

    {/* Side segments */}
    <div className="absolute top-1 -left-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute bottom-1 -left-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute top-1 -right-1 w-1.5 h-1/2 bg-foreground" />
    <div className="absolute bottom-1 -right-1 w-1.5 h-1/2 bg-foreground" />
  </>
)}

暗黑模式考虑

使用CSS自定义属性或暗黑模式变体：

<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />

关键原则

1. 使用 rounded-none - 从基础组件移除所有边框半径
2. 固定像素大小 - 使用一致的像素值（1.5, 3px）以实现复古感
3. 绝对定位 - 所有边框元素在相对容器内绝对定位
4. 暗黑模式颜色 - 使用 ring 或 foreground 与暗黑变体以增强对比
5. 条件渲染 - 仅对适当的变体显示边框（非幽灵、链接、图标）

参考组件

查看 components/ui/8bit/button.tsx 获取完整实现。