23 CSS Flip Cards 08 / 23

Language Flashcard with Pronunciation

Front shows a foreign-language word with phonetic transcription and an audio play button; back reveals definition, usage example, and a memory tip.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fc-06">
  <div class="fc-06__nav">
    <button class="fc-06__nav-btn">← Prev</button>
    <button class="fc-06__nav-btn">Next →</button>
  </div>
  <div class="fc-06__counter">Card 7 of 24 · Japanese N3</div>
  <div class="fc-06__scene">
    <div class="fc-06__card">
      <div class="fc-06__front">
        <div class="fc-06__lang-flag">🇯🇵</div>
        <div class="fc-06__lang-label">Japanese</div>
        <div class="fc-06__word">木漏れ日</div>
        <div class="fc-06__phonetic">/ ko·mo·re·bi /</div>
        <button class="fc-06__sound-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          Play audio
        </button>
        <div class="fc-06__front-hint">Hover to see definition →</div>
      </div>
      <div class="fc-06__back">
        <div class="fc-06__def-label">Definition</div>
        <div class="fc-06__pos">noun · untranslatable</div>
        <div class="fc-06__definition">Sunlight filtering through leaves; the interplay of light and shadow when sun shines through a canopy of trees.</div>
        <div class="fc-06__example-label">Example sentence</div>
        <div class="fc-06__example">「公園の木漏れ日の中で読書するのが好きです。」<br>"I love reading in the komorebi of the park."</div>
        <div class="fc-06__mnemonic"><strong>Memory tip:</strong> 木 (ki = tree) + 漏れ (more = leaking) + 日 (hi = sun) → "sun leaking through trees" — paint the picture.</div>
      </div>
    </div>
  </div>
</div>
.fc-06,.fc-06 *,.fc-06 *::before,.fc-06 *::after{box-sizing:border-box;margin:0;padding:0}
.fc-06 ::selection{background:#a78bfa;color:#000}
.fc-06{
  --bg:#080612;--purple:#a78bfa;--indigo:#6366f1;--mint:#34d399;--white:#f5f3ff;
  --card-w:340px;--card-h:400px;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 40%,#120b2e,#080612 65%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;gap:20px;color:var(--white);
}
.fc-06__nav{display:flex;gap:12px}
.fc-06__nav-btn{
  padding:8px 20px;border-radius:20px;border:1px solid rgba(163,139,250,.25);
  background:rgba(163,139,250,.08);color:rgba(245,243,255,.6);
  font-size:12px;font-weight:600;cursor:pointer;transition:background .2s;
}
.fc-06__nav-btn:hover{background:rgba(163,139,250,.18);color:var(--purple)}
.fc-06__counter{font-size:12px;color:rgba(245,243,255,.35);letter-spacing:.08em}
.fc-06__scene{width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer}
.fc-06__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.fc-06__scene:hover .fc-06__card{transform:rotateY(180deg)}
.fc-06__front,.fc-06__back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* FRONT */
.fc-06__front{
  background:linear-gradient(145deg,#130d2e,#0e0a22);
  border:1px solid rgba(163,139,250,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:40px 32px;
}
.fc-06__front::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(163,139,250,.1),transparent 60%)}
.fc-06__lang-flag{font-size:40px;position:relative;z-index:1}
.fc-06__lang-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,255,.4);font-weight:600;position:relative;z-index:1}
.fc-06__word{
  font-size:52px;font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;position:relative;z-index:1;
}
.fc-06__phonetic{font-size:16px;color:rgba(245,243,255,.5);font-style:italic;position:relative;z-index:1;letter-spacing:.04em}
.fc-06__sound-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:20px;
  background:rgba(163,139,250,.1);border:1px solid rgba(163,139,250,.2);
  color:var(--purple);font-size:12px;font-weight:600;cursor:pointer;
  position:relative;z-index:1;transition:background .2s;
}
.fc-06__sound-btn:hover{background:rgba(163,139,250,.2)}
.fc-06__front-hint{position:absolute;bottom:18px;font-size:10px;color:rgba(245,243,255,.2);letter-spacing:.08em}
/* BACK */
.fc-06__back{
  background:linear-gradient(145deg,#0a1a0e,#0d1f12);
  border:1px solid rgba(52,211,153,.2);
  transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:30px;gap:14px;
}
.fc-06__def-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);font-weight:700}
.fc-06__definition{font-size:16px;font-weight:700;color:var(--white);line-height:1.4}
.fc-06__pos{display:inline-block;font-size:10px;padding:2px 10px;border-radius:20px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);color:var(--mint);font-style:italic;margin-bottom:4px}
.fc-06__example-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,255,.35);margin-top:4px}
.fc-06__example{font-size:13px;color:rgba(245,243,255,.65);line-height:1.7;font-style:italic;border-left:2px solid rgba(52,211,153,.3);padding-left:12px}
.fc-06__mnemonic{margin-top:auto;padding:12px;border-radius:12px;background:rgba(163,139,250,.06);border:1px solid rgba(163,139,250,.12);font-size:12px;color:rgba(245,243,255,.5);line-height:1.6}
.fc-06__mnemonic strong{color:var(--purple)}
@media(prefers-reduced-motion:reduce){.fc-06__card{transition:none}}

How this works

The large Japanese characters use a system serif stack so the script renders correctly on all operating systems without a web-font request. The phonetic transcription is styled with font-style: italic and reduced opacity to visually separate it from the primary word. The audio play button uses an inline SVG play-triangle — no icon font dependency.

The back face uses a left-border quote style on the example sentence (border-left: 2px solid rgba) — a lightweight semantic accent. The mnemonic tip targets a <strong> element with the accent gradient colour so the keyword is immediately scannable at a glance.

Customize

  • Add a flip counter by tracking navigation button clicks in JS and updating a data-count attribute that drives a CSS counter() display.
  • Create a study-mode where cards auto-flip after 3 seconds via a setTimeout that toggles .is-flipped, reverting after a further 2s answer dwell.
  • Change the language by editing the .fc-06__lang-flag emoji and updating the word, phonetic, and example sentence strings in the HTML.
  • Add a difficulty star rating on the back face wired to a localStorage score tracker for spaced-repetition scheduling.
  • Animate the word in on load with a @keyframes that fades from translateY(10px) opacity(0) to the resting position over 0.4s.

Watch out for

  • East Asian character rendering depends on the OS font stack — systems without a Japanese font fall back to a generic serif which may lose stroke detail.
  • The play button is a visual affordance only — wire it to window.speechSynthesis.speak() or an <audio> element for actual audio output.
  • Horizontal overflow can occur on narrow cards with long words — add word-break:break-all and reduce font-size via clamp() for small viewports.

Browser support

ChromeSafariFirefoxEdge
36+ 9+ 16+ 36+

East Asian script rendering depends on OS fonts; Web Speech API is available in Chrome and Safari but not Firefox.

More from 23 CSS Flip Cards

Skill Rating Portfolio CardTrivia Quiz Q&A CardGaming Trading Card Character StatsPhoto Gallery Overlay CardAlbum Cover Iris Aperture Reveal CardScratch Card Diagonal Peel RevealVideo Playlist Thumbnail CardTestimonial Customer Review CardDigital Business Card VCardRestaurant Menu Item Recipe CardStep-by-Step Process Map CardTravel Postcard Diagonal 3D Flip Card
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →