Skeuomorphism

Real-world textures, depth, and physical metaphors — interfaces that look like objects you can touch.

html css javascript

Targets: JS HTML

Code

/* ─────────────────────────────────────────────
   Skeuomorphism — style.css
   Tactile depth: gradients, layered shadows,
   insets, textures. Warm paper palette.
───────────────────────────────────────────── */

:root {
  /* Warm paper palette */
  --bg-warm: #d4b896;
  --bg-page: #e8d5b7;
  --bg-card: #f2e6ce;
  --bg-card-top: #f8f0e0;

  --leather-dark: #8b6340;
  --leather-mid: #a0784e;
  --leather-light: #c09060;

  --text-primary: #2c1a0e;
  --text-secondary: #6b4c2a;
  --text-tertiary: #9b7555;

  --btn-top: #f0e6d0;
  --btn-mid: #d4a86a;
  --btn-bottom: #c8a058;
  --btn-shadow: #7a5530;

  --input-bg: #dfc9a4;
  --input-inset: #c8a87e;

  --badge-bg: #c4a06a;
  --badge-border: #8b6340;
  --badge-text: #2c1a0e;

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 72px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Linen/paper texture via CSS ── */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;

  /* Warm paper background with subtle woven texture */
  background-color: var(--bg-page);
  background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.03) 3px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.02) 3px,
      rgba(0, 0, 0, 0.02) 4px
    );
}

/* ── Header (leather shelf) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, var(--leather-mid), var(--leather-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 8px rgba(0, 0, 0, 0.45), 0 1px 0
    rgba(0, 0, 0, 0.5);
}

.header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-icon {
  font-size: 18px;
  color: #f0d080;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: #f5e8cc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
}

.header-nav {
  display: flex;
  gap: var(--space-sm);
}

.header-nav a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 232, 204, 0.75);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.03em;
}

.header-nav a:hover {
  color: #f5e8cc;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Main layout ── */
.main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Card (physical paper lifted) ── */
.card {
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 12px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(100, 65, 25, 0.25);
}

/* Card top edge highlight */
.card::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), transparent);
}

.card-inner {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ── Profile avatar (engraved ring) ── */
.profile-avatar {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c09060 0%, #8b6340 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 -1px 2px rgba(255, 255, 255, 0.15),
    0 0 0 3px rgba(200, 168, 126, 0.6),
    0 0 0 5px rgba(100, 65, 25, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(100, 65, 25, 0.5);
}

.avatar-initials {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: #f5e8cc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Profile info ── */
.profile-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  letter-spacing: -0.01em;
}

.profile-role {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(100, 65, 25, 0.3), transparent);
}

/* ── Section ── */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ── Buttons (convex, pressable) ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: box-shadow 0.1s, transform 0.1s, background 0.1s;
  position: relative;
}

/* Primary — warm amber gradient, convex feel */
.btn-primary {
  background: linear-gradient(to bottom, #f0e6d0 0%, #d4a86a 40%, #c09050 100%);
  color: var(--text-primary);
  border: 1px solid rgba(100, 65, 25, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 2px 0 rgba(80, 50, 20, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(to bottom, #f5ece0 0%, #dab878 40%, #c89858 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 4px rgba(0, 0, 0, 0.2), 0 5px 10px
    rgba(0, 0, 0, 0.22), 0 3px 0 rgba(80, 50, 20, 0.35);
  transform: translateY(-1px);
}

.btn-primary:active {
  background: linear-gradient(to bottom, #c09050 0%, #d4a86a 60%, #f0e6d0 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0
    rgba(255, 255, 255, 0.2);
  transform: translateY(1px);
}

/* Secondary — lighter warm tones */
.btn-secondary {
  background: linear-gradient(to bottom, #ede0cc 0%, #c8a87e 100%);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 65, 25, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.18), 0 2px 5px
    rgba(0, 0, 0, 0.15), 0 1px 0 rgba(80, 50, 20, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 8px rgba(0, 0, 0, 0.2), 0 2px 0
    rgba(80, 50, 20, 0.25);
}

.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Ghost — debossed outline */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px dashed rgba(100, 65, 25, 0.5);
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(200, 168, 126, 0.15);
  border-style: solid;
  border-color: rgba(100, 65, 25, 0.6);
}

/* ── Input (recessed) ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.field-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.field-input {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid rgba(100, 65, 25, 0.35);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  /* Recessed inset look */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 -1px
    0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.15s;
}

.field-input::placeholder {
  color: var(--text-tertiary);
}

.field-input:focus {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.25),
    inset 0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(160, 120, 78, 0.4);
}

/* ── Badges (stitched labels) ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  border: 1px dashed var(--badge-border);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .header-inner {
    padding: 14px var(--space-sm);
  }
  .main {
    padding: var(--space-lg) var(--space-sm);
    gap: var(--space-md);
  }
  .card-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-nav {
    gap: 4px;
  }
}

// Skeuomorphism — script.js
// Physical button press: add/remove .is-pressed on mousedown/mouseup.
// Also: subtle click sound via Web Audio API (optional, user gesture required).

document.querySelectorAll(".btn").forEach((btn) => {
  btn.addEventListener("mousedown", () => {
    btn.style.transform = "translateY(1px)";
  });

  btn.addEventListener("mouseup", () => {
    btn.style.transform = "";
  });

  btn.addEventListener("mouseleave", () => {
    btn.style.transform = "";
  });
});

// Primary button: toggle commission state
const primaryBtn = document.querySelector(".btn-primary");
if (primaryBtn) {
  let commissioned = false;
  primaryBtn.addEventListener("click", () => {
    commissioned = !commissioned;
    primaryBtn.textContent = commissioned ? "Enquiry Sent ✓" : "Commission";
    if (commissioned) {
      primaryBtn.style.background =
        "linear-gradient(to bottom, #c8ddb0 0%, #88b860 40%, #6a9a42 100%)";
      primaryBtn.style.color = "#1a3a0a";
    } else {
      primaryBtn.style.background = "";
      primaryBtn.style.color = "";
    }
  });
}

// Input: subtle focus ring enhancement already in CSS,
// but we add a soft "paper crinkle" class toggle for fun.
document.querySelectorAll(".field-input").forEach((input) => {
  input.addEventListener("focus", () => input.closest(".field").classList.add("focused"));
  input.addEventListener("blur", () => input.closest(".field").classList.remove("focused"));
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Skeuomorphism</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Header / shelf -->
  <header class="site-header">
    <div class="header-inner">
      <div class="brand">
        <span class="brand-icon" aria-hidden="true">✦</span>
        <span class="brand-name">Studio</span>
      </div>
      <nav class="header-nav">
        <a href="#">Portfolio</a>
        <a href="#">Journal</a>
        <a href="#">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Main content -->
  <main class="main">

    <!-- Profile card -->
    <section class="card profile-card">
      <div class="card-inner">
        <div class="profile-avatar" aria-hidden="true">
          <span class="avatar-initials">EL</span>
        </div>
        <div class="profile-info">
          <h2 class="profile-name">Eleanor Lamb</h2>
          <p class="profile-role">Illustrator &amp; Printmaker</p>
          <div class="profile-stats">
            <div class="stat">
              <span class="stat-value">76</span>
              <span class="stat-label">Works</span>
            </div>
            <div class="stat-divider" aria-hidden="true"></div>
            <div class="stat">
              <span class="stat-value">12k</span>
              <span class="stat-label">Collectors</span>
            </div>
            <div class="stat-divider" aria-hidden="true"></div>
            <div class="stat">
              <span class="stat-value">★ 4.9</span>
              <span class="stat-label">Reputation</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Buttons section -->
    <section class="section">
      <h3 class="section-label">Actions</h3>
      <div class="button-row">
        <button class="btn btn-primary" type="button">Commission</button>
        <button class="btn btn-secondary" type="button">View Work</button>
        <button class="btn btn-ghost" type="button">Dismiss</button>
      </div>
    </section>

    <!-- Input section -->
    <section class="section">
      <h3 class="section-label">Inquiry</h3>
      <div class="field">
        <label class="field-label" for="message">Your message</label>
        <input
          class="field-input"
          id="message"
          type="text"
          placeholder="Describe your project…"
          autocomplete="off"
        />
      </div>
    </section>

    <!-- Badges section -->
    <section class="section">
      <h3 class="section-label">Specialties</h3>
      <div class="badge-row">
        <span class="badge">Etching</span>
        <span class="badge">Woodcut</span>
        <span class="badge">Watercolor</span>
        <span class="badge">Lithography</span>
        <span class="badge">Oil</span>
      </div>
    </section>

  </main>

  <script src="script.js"></script>
</body>
</html>

Skeuomorphism

Skeuomorphism — from the Greek skeuos (vessel, tool) and morphē (form) — is the design practice of making digital interfaces resemble the physical objects they replace. Apple under Steve Jobs and Scott Forstall perfected this language in the original iOS: the Notes app used yellow legal pad paper with a ruled baseline, the Calendar app featured stitched leather binding, and Game Center presented itself as a billiard table. The goal was cognitive ease — if an interface looks like something familiar, users already know how to interact with it.

The visual language is rich with physical cues: gradients simulate curvature and light hitting convex surfaces; layered box-shadows create the illusion of depth and hovering; inset shadows make inputs appear recessed into the surface; textures — linen, leather, paper, wood — are rendered through tiled CSS patterns or subtle noise overlays. Buttons have specular highlights along their top edge and cast soft shadows underneath, as if they truly protrude from the screen.

Though flat design dethroned skeuomorphism from mainstream UIs around 2013, the aesthetic never disappeared — it migrated to audio software (DAWs, synthesizers), games, premium lifestyle apps, and anywhere tactile richness serves an emotional purpose. In 2020s, “neumorphism” and “claymorphism” are its spiritual descendants, carrying forward the fondness for surface and depth.

Key characteristics

Warm beige/paper background with CSS noise or linen texture via repeating-linear-gradient
Buttons with convex gradients: lighter top, darker bottom, inner highlight stripe
Active button state: reversed gradient + deep inset shadow (pressed-in feeling)
Cards with layered box-shadow for lifted, physical paper appearance
Input fields with inset shadow — recessed into the surface
Avatar with engraved ring shadow: inset shadow inside a circle border
Badges styled like stitched woven labels — dashed border, warm colors
Georgia / Palatino body type; Helvetica Neue for labels

When to use

Audio and music production tools — synths, mixers, DAW interfaces
Games and entertainment apps wanting tactile warmth
Premium lifestyle or luxury product interfaces
Retro or vintage-themed applications
Any context where haptic familiarity should reduce the digital barrier