Back to Details

8-bit-pixel-art-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

8-bit Pixel Art Patterns

8位像素艺术样式

Create authentic pixelated borders and shadows using absolute-positioned divs. These patterns are essential for the retro aesthetic of 8-bit components.
使用绝对定位的div创建真实的像素化边框和阴影。这些样式对于8位组件的复古美学至关重要。

Pixelated Border Pattern

像素化边框样式

Use 9 div elements to create a pixelated border effect:
tsx
<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>
使用9个div元素创建像素化边框效果：
tsx
<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>

Pixelated Shadow Pattern

像素化阴影样式

Add depth with pixelated shadows:
tsx
{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" />
  </>
)}
添加像素化阴影以增强层次感：
tsx
{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" />
  </>
)}

Icon Button Pattern

图标按钮样式

Smaller, self-contained pixel borders for icon buttons:
tsx
{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" />
  </>
)}
为图标按钮设计的小型独立像素边框：
tsx
{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" />
  </>
)}

Dark Mode Considerations

暗黑模式适配

Use CSS custom properties or dark mode variants:
tsx
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
使用CSS自定义属性或暗黑模式变体：
tsx
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />

Key Principles

核心原则

  1. Use 
    rounded-none
     - Remove all border radius from base components
  2. Fixed pixel sizes - Use consistent pixel values (1.5, 3px) for retro feel
  3. Absolute positioning - All border elements are absolute within relative container
  4. Dark mode colors - Use 
    ring
    or 
    foreground
    with dark variant for contrast
  5. Conditional rendering - Only show borders for appropriate variants (not ghost, link, icon)
  1. 使用
    rounded-none
     - 移除基础组件的所有圆角
  2. 固定像素尺寸 - 使用统一的像素值（1.5、3px）以营造复古感
  3. 绝对定位 - 所有边框元素都在相对容器内使用绝对定位
  4. 暗黑模式配色 - 使用
    ring
    或带暗黑变体的
    foreground
    以保证对比度
  5. 条件渲染 - 仅为合适的变体显示边框（如ghost、link、icon变体不显示）

Reference Component

参考组件

See 
components/ui/8bit/button.tsx
for complete implementation.
完整实现请查看
components/ui/8bit/button.tsx
。