<main>
<div id="gasses">
<div class="gas he">
<span class="number">2</span>
<h2 class="symbol">He</h2>
<p class="name">Helium</p>
</div>
<div class="gas ne">
<span class="number">10</span>
<h2 class="symbol">Ne</h2>
<p class="name">Neon</p>
</div>
<div class="gas ar">
<span class="number">18</span>
<h2 class="symbol">Ar</h2>
<p class="name">Argon</p>
</div>
<div class="gas kr">
<span class="number">36</span>
<h2 class="symbol">Kr</h2>
<p class="name">Krypton</p>
</div>
<div class="gas xe">
<span class="number">54</span>
<h2 class="symbol">Xe</h2>
<p class="name">Xenon</p>
</div>
</div>
</main>
/*
Font: "Neon Glow" by weknow
(https://www.fontspace.com/neon-glow-font-f14014)
*/
@font-face {
font-family: 'Neon Glow';
src: url(https://assets.codepen.io/230569/NeonGlow-8VLz.ttf);
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
html {
background-color: #101010;
box-sizing: border-box;
}
main {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
}
#gasses {
display: flex;
flex-wrap: wrap;
justify-content: center;
> * {
margin: 2rem;
}
}
.gas {
--blur: 1.75rem;
--box-blur: calc(0.5 * var(--blur));
--glow: var(--color);
--size: 12rem;
align-items: center;
border-radius: 12px;
border: 4px solid currentColor;
box-shadow:
/* --- "glass" tube --- */
/* inside */ inset 0 0 0 2px rgba(0, 0, 0, 0.15),
/* outside */ 0 0 0 2px rgba(0, 0, 0, 0.15),
/* --- glow --- */
/* inside */ inset 0 0 var(--box-blur) var(--glow),
/* outside */ 0 0 var(--box-blur) var(--glow);
color: var(--color, white);
display: inline-flex;
flex-direction: column;
font-family: system-ui, sans-serif;
height: var(--size);
justify-content: space-around;
padding: 1rem;
width: var(--size);
> * {
margin: 0;
padding: 0;
}
.number {
font-weight: 700;
}
.symbol {
font-size: 4rem;
font-family: 'Neon Glow';
text-shadow: 0 0 var(--blur) var(--glow);
}
&.he { --color: #FCEAAC; filter: saturate(175%); }
&.ne { --color: #FDA802; filter: brightness(110%); }
&.ar { --color: #E555C7; filter: brightness(125%); }
&.kr { --color: #B7E7F7; filter: saturate(200%); }
&.xe { --color: #C4C4C6; filter: brightness(105%); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.