Style Details - Skeuomorphism

About This Style

Skeuomorphism is an interface design method whose core lies in imitating the appearance, materials, textures, and interaction methods of corresponding objects in the real world, striving to create a realistic and familiar feeling on digital interfaces.

Main Features:

Realistic Materials: Extensive use of textures and visual effects of real-world materials such as leather, wood, metal, fabric, and paper.
Sense of Depth: Simulates lighting effects through rich shadows (drop shadows, inner shadows), highlights, and gradients to create a three-dimensional feel and depth for elements.
Physical Metaphors: The appearance and interaction of interface elements (like buttons, switches, knobs) directly mimic their real-world counterparts, e.g., buttons look like they can be pressed, books can be flipped.
Rich Details: Focus on detailed depictions, such as stitching, wear effects, edges of physical buttons, etc., to enhance realism.
Familiarity: Leverages users' familiarity with real-world objects to reduce learning curves and provide an intuitive user experience.

This style was very popular in the early days of smartphones (e.g., early iOS), aiming to help users understand and transition to new touchscreen interactions. Although flat and minimalist design are more common now, skeuomorphism still has its unique charm and value in certain scenarios (like game interfaces, specific applications, or when emphasizing brand texture).

Example AI Prompt

Design a skeuomorphic UI element, like a leather-bound notebook app interface. Use realistic leather texture, stitching details, drop shadows, and maybe a textured paper background. Font like Georgia or a classic serif.

(Explanation: Design a skeuomorphic UI element, like a leather-bound notebook app interface. Use realistic leather texture, stitching details, drop shadows, and maybe a textured paper background. Font like Georgia or a classic serif.)

Theme CSS Snippet

The following is the core CSS code for applying the skeuomorphism style as a global theme (body.theme-skeuomorphism):

/* 1. Skeuomorphism Theme (NEW) */
body.theme-skeuomorphism {
    --skeuo-texture-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); /* Example subtle texture */
    --skeuo-texture-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a0522d' fill-opacity='0.05' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    --page-bg: #e5d9b3; /* Old paper */
    --page-bg-gradient: none; background-image: var(--skeuo-texture-dark);
    --text-color: #3b2f2f; /* Dark brown text */
    --heading-color: #6b4423;
    --link-color: #8b4513; /* SaddleBrown */
    --link-hover-color: #a0522d; /* Sienna */
    --border-color: #a0522d;
    --card-bg: #d2b48c; --card-bg-image: var(--skeuo-texture-light); --card-shadow: var(--skeuo-shadow-outset), 0 3px 5px rgba(0,0,0,0.2); --card-hover-shadow: var(--skeuo-shadow-outset), 0 5px 8px rgba(0,0,0,0.3);
    --header-bg: #8b4513; --header-text-color: #f5f5dc; --header-shadow: inset 0 -3px 5px rgba(0,0,0,0.3);
    --footer-text-color: #6b4423; --footer-bg: #e5d9b3;
    --button-bg: linear-gradient(to bottom, #b8860b, #cd853f); --button-text-color: white; --button-hover-bg: linear-gradient(to bottom, #cd853f, #b8860b); --button-border: 1px solid #8b4513; --button-shadow: var(--skeuo-shadow-outset); --button-hover-shadow: var(--button-shadow);
    --button-secondary-bg: linear-gradient(to bottom, #f0e68c, #eee8aa); --button-secondary-text-color: #5e3a1d; --button-secondary-hover-bg: linear-gradient(to bottom, #eee8aa, #f0e68c); --button-secondary-border: 1px solid #bdb76b;
    --prompt-bg: #f5f5dc; --prompt-text-color: #4a3c2a; --prompt-shadow: var(--skeuo-shadow-inset); --prompt-bg-image: none;
    --base-font: var(--font-serif); --heading-font: var(--font-serif);
    --card-border-radius: 6px; --button-border-radius: 4px;

    /* --- Skeuomorphism Specific Shadows --- */
    --skeuo-shadow-inset: inset 1px 1px 2px rgba(0,0,0,0.3), inset -1px -1px 2px rgba(255,255,255,0.5);
    --skeuo-shadow-outset: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 2px rgba(255,255,255,0.5);
}

/* --- Skeuomorphism Specific Element Styles --- */
body.theme-skeuomorphism .card {
    border: 1px solid rgba(0,0,0,0.2);
    border-top-color: rgba(255,255,255,0.2);
    border-left-color: rgba(255,255,255,0.2);
    background-color: var(--card-bg);
    background-image: var(--card-bg-image); /* Apply texture to cards */
}

body.theme-skeuomorphism .btn {
    box-shadow: var(--button-shadow);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
body.theme-skeuomorphism .btn:active {
    box-shadow: var(--skeuo-shadow-inset); /* Inset shadow when pressed */
    transform: translateY(1px);
}

body.theme-skeuomorphism .style-detail-section {
    /* Make sections look like embossed paper or panels */
    background-color: var(--card-bg); /* Use card background */
    border: 1px solid var(--border-color);
    border-top-color: rgba(255,255,255,0.3); /* Lighter top border */
    border-left-color: rgba(255,255,255,0.3); /* Lighter left border */
    box-shadow: var(--skeuo-shadow-outset); /* Outset shadow */
    background-image: var(--card-bg-image); /* Apply texture */
}

body.theme-skeuomorphism pre {
    /* Make code blocks look inset */
    background-color: var(--prompt-bg);
    box-shadow: var(--prompt-shadow); /* Inset shadow */
    border: 1px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.2);
    border-left-color: rgba(0,0,0,0.2);
    background-image: var(--prompt-bg-image); /* Remove texture if needed */
}

body.theme-skeuomorphism header {
    /* Add some texture or depth to header */
    background-image: var(--skeuo-texture-dark);
}

Note: This is just the core theme code. In actual application, you may need to adjust the styles of specific components to achieve the best skeuomorphic effect.

Resource Download (Example)

Download a zip package containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download skeuomorphism.zip