Style Detail - Skeuomorphism

See this style applied to a real page — identical content, different stylesheet.

About This Style

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

Main Features:

Realistic Materials: Extensive use of textures and visual effects of real-world materials such as leather, wood, metal, fabric, and paper.
Stereoscopic Sense & Depth: Simulates lighting effects through rich shadows (drop shadows, inner shadows), highlights, and gradients to create a sense of three-dimensionality and depth for elements.
Physical Metaphors: The appearance and interaction of interface elements (such as buttons, switches, knobs) directly imitate their real-world counterparts. For example, buttons look like they can be 'pressed', and books can be 'flipped'.
Rich Details: Focuses on detailed depictions, such as stitching, wear effects, and the edges of physical buttons, to enhance realism.
Familiarity: Leverages users' familiarity with real-world objects to reduce learning costs and provide an intuitive operating 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 (such as 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.

(English 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 Code 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 only 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 compressed package containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download skeuomorphism.zip