<body id="top">
<header>
<a class="round-button wizard tooltip" href="https://www.osedea.com/en/blog/8-css-wizard-spells" target="_blank" aria-label="Go to article">
<span class="ignore-dark-theme">
🧙
</span>
</a>
<button type="button" class="theme-toggle round-button tooltip left" onclick="toggleTheme()" aria-label="Switch to dark theme">
<svg class="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<svg class="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</button>
<a href="#bottom" class="round-button tooltip left" aria-label="Scroll to bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
</a>
</header>
<main>
<div class="grid">
<a class="card">
<h4 class="title truncate">The Nightmare Before Christmas</h4>
<p class="description line-clamp">
Jack Skellington, king of Halloween Town, discovers Christmas Town, but his
attempts to bring Christmas to his home causes confusion.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Silence of the Lambs</h4>
<p class="description line-clamp">
A young F.B.I. cadet must receive the help of an incarcerated and manipulative
cannibal killer to help catch another serial killer, a madman who skins his
victims. Jack Skellington, king of Halloween Town, discovers Christmas Town, but
his attempts to bring Christmas to his home causes confusion.
</p>
</a>
<a class="card">
<h4 class="title truncate">Hotel Transylvania</h4>
<p class="description line-clamp">
Dracula, who operates a high-end resort away from the human world, goes into
overprotective mode when a boy discovers the resort and falls for the count's
teenaged daughter.
</p>
</a>
<a class="card">
<h4 class="title truncate">Coraline</h4>
<p class="description line-clamp">
An adventurous 11-year-old girl finds another world that is a strangely
idealized version of her frustrating home, but it has sinister secrets.
</p>
</a>
<a class="card">
<h4 class="title truncate">Sleepy Hollow</h4>
<p class="description line-clamp">
Ichabod Crane is sent to Sleepy Hollow to investigate the decapitations of three
people, with the culprit being the legendary apparition, The Headless Horseman.
An adventurous 11-year-old girl finds another world that is a strangely
idealized version of her frustrating home, but it has sinister secrets.
</p>
</a>
<a class="card">
<h4 class="title truncate">Ghostbusters</h4>
<p class="description line-clamp">
Three former parapsychology professors set up shop as a unique ghost removal
service.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Shining</h4>
<p class="description line-clamp">
A family heads to an isolated hotel for the winter where a sinister presence
influences the father into violence, while his psychic son sees horrific
forebodings from both past and future.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Addams Family</h4>
<p class="description line-clamp">
Con artists plan to fleece an eccentric family using an accomplice who claims to
be their long-lost uncle.
</p>
</a>
<a class="card">
<h4 class="title truncate">Psycho</h4>
<p class="description line-clamp">
A Phoenix secretary embezzles $40,000 from her employer's client, goes on the
run, and checks into a remote motel run by a young man under the domination of
his mother.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Witches</h4>
<p class="description line-clamp">
Based on Roald Dahl's 1983 classic book 'The Witches', the story tells the scary, funny and imaginative tale of a seven year old boy who has a run in with some real life witches!
</p>
</a>
<a class="card">
<h4 class="title truncate">Poltergeist</h4>
<p class="description line-clamp">
A family's home is haunted by a host of demonic ghosts.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Conjuring</h4>
<p class="description line-clamp">
Paranormal investigators Ed and Lorraine Warren work to help a family terrorized by a dark presence in their farmhouse.
</p>
</a>
<a class="card">
<h4 class="title truncate">A Nightmare on Elm Street</h4>
<p class="description line-clamp">
The monstrous spirit of a slain child murderer seeks revenge by invading the dreams of teenagers whose parents were responsible for his untimely death.
</p>
</a>
<a class="card">
<h4 class="title truncate">Practical Magic</h4>
<p class="description line-clamp">
Two witch sisters, raised by their eccentric aunts in a small town, face closed-minded prejudice and a curse which threatens to prevent them ever finding lasting love.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Craft</h4>
<p class="description line-clamp">
A newcomer to a Catholic prep high school falls in with a trio of outcast teenage girls who practice witchcraft, and they all soon conjure up various spells and curses against those who anger them.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Sixth Sense</h4>
<p class="description line-clamp">
A boy who communicates with spirits seeks the help of a disheartened child psychologist.
</p>
</a>
<a class="card">
<h4 class="title truncate">A Quiet Place</h4>
<p class="description line-clamp">
In a post-apocalyptic world, a family is forced to live in silence while hiding from monsters with ultra-sensitive hearing.
</p>
</a>
<a class="card">
<h4 class="title truncate">Paranormal Activity</h4>
<p class="description line-clamp">
After moving into a suburban home, a couple becomes increasingly disturbed by a nightly demonic presence.
</p>
</a>
<a class="card">
<h4 class="title truncate">Monster House</h4>
<p class="description line-clamp">
Three teens discover that their neighbor's house is really a living, breathing, scary monster.
</p>
</a>
<a class="card">
<h4 class="title truncate">Hereditary</h4>
<p class="description line-clamp">
A grieving family is haunted by tragic and disturbing occurrences.
</p>
</a>
<a class="card">
<h4 class="title truncate">Us</h4>
<p class="description line-clamp">
A family's serene beach vacation turns to chaos when their doppelgängers appear and begin to terrorize them.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Haunted Mansion</h4>
<p class="description line-clamp">
A realtor and his wife and children are summoned to a mansion, which they soon discover is haunted, and while they attempt to escape, he learns an important lesson about the family he has neglected.
</p>
</a>
<a class="card">
<h4 class="title truncate">Halloween</h4>
<p class="description line-clamp">
Laurie Strode confronts her long-time foe Michael Myers, the masked figure who has haunted her since she narrowly escaped his killing spree on Halloween night four decades ago.
</p>
</a>
<a class="card">
<h4 class="title truncate">The Amityville Horror</h4>
<p class="description line-clamp">
Newlyweds are terrorized by demonic forces after moving into a large house that was the site of a grisly mass murder a year before.
</p>
</a>
<a class="card">
<h4 class="title truncate">Ernest Scared Stupid</h4>
<p class="description line-clamp">
Ernest accidentally unleashes an ugly troll that plots to transform children into wooden dolls in the town of Briarville, Missouri.
</p>
</a>
<a class="card">
<h4 class="title truncate">Get Out</h4>
<p class="description line-clamp">
A young African-American visits his white girlfriend's parents for the weekend, where his simmering uneasiness about their reception of him eventually reaches a boiling point.
</p>
</a>
<a class="card">
<h4 class="title truncate">It</h4>
<p class="description line-clamp">
In the summer of 1989, a group of bullied kids band together to destroy a shape-shifting monster, which disguises itself as a clown and preys on the children of Derry, their small Maine town.
</p>
</a>
<a class="card">
<h4 class="title truncate">Beetlejuice</h4>
<p class="description line-clamp">
The spirits of a deceased couple are harassed by an unbearable family that has moved into their home, and hire a malicious spirit to drive them out.
</p>
</a>
</div>
</main>
<footer id="bottom">
<a href="#top" class="round-button tooltip left" aria-label="Scroll to top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
</a>
</footer>
</body>
/* Demo CSS */
:root {
--background-color: #ececec;
--text-color: #353535;
}
body {
font-family: 'Merriweather', serif;
color: var(--text-color);
background-color: var(--background-color);
max-width: 1024px;
margin: 0 auto;
padding: 1rem;
}
header {
margin: 2rem 0 3rem 0;
display: flex;
align-items: center;
position: relative;
z-index: 10;
}
header > * + * {
margin-left: 1rem;
}
footer {
margin: 3rem 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.wizard {
font-size: 1.5rem;
line-height: 1;
margin-right: auto;
}
.round-button {
color: inherit;
appearance: none;
border: none;
outline: none;
cursor: pointer;
text-decoration: none;
background: var(--background-color);
border-radius: 3rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.card {
padding: 1rem;
background-color: #ffffff;
border-radius: 0.25rem;
}
.card .title {
margin: 0;
font-size: 1.25rem;
color: #252525;
}
.card .description {
margin: 0;
font-size: 0.875rem;
}
.theme-toggle .sun {
display: none;
}
.dark-theme .theme-toggle .sun {
display: block;
}
.dark-theme .theme-toggle .moon {
display: none;
}
/* 1. Instant fluid grid layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-gap: 1rem;
}
/* 2. Truncate strings so they fit on one line */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 3. Truncate text to a specific number of lines */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 4. Instant dark theme */
.dark-theme,
.dark-theme img,
.dark-theme .ignore-dark-theme {
filter: invert(1) hue-rotate(180deg);
}
/* 5. Smooth scroll */
html {
scroll-behavior: smooth;
}
/* 6. Sticky header */
header {
position: sticky;
top: 1rem;
}
/* 7. Easy hover and active states */
button:hover,
a:hover {
filter: brightness(0.9);
}
button:active,
a:active {
filter: brightness(0.85);
}
/* 8. Pure CSS tooltips */
.tooltip {
position: relative;
}
.tooltip:hover::before {
opacity: 1;
}
.tooltip::before {
opacity: 0;
display: block;
content: attr(aria-label);
background-color: #353535;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.875rem;
text-decoration: none;
white-space: nowrap;
padding: 0.5rem;
border-radius: 0.25rem;
pointer-events: none;
position: absolute;
top: 80%;
left: 80%;
}
.tooltip.left::before {
left: auto;
right: 80%;
}
const toggleTheme = () => {
if (document.documentElement.classList.contains('dark-theme')) {
document.documentElement.classList.remove('dark-theme');
document.querySelector('.theme-toggle').setAttribute('aria-label', 'Switch to light theme');
} else {
document.documentElement.classList.add('dark-theme');
document.querySelector('.theme-toggle').setAttribute('aria-label', 'Switch to dark theme');
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.