Text Play

Text effects such as fluid-headers, engraving, or neon.

fluid-header experimental

<header class="fluid-header"><p>fluid-header sample. Works well for a lot of text. Resize your browser for a demonstration.</p></header>

Create a <p> tag within a <header> tag and apply the fluid-header class to the <header> tag. This bestows adaptive behavior to the header so that it grows or shrinks according to the viewport size.

text-engraved experimental

Engraved

<h1 class="text-engraved-white-bg">Engraved</h1>

Engraved

<h1 class="text-engraved-gray-bg">Engraved</h1>

Engraved

<h1 class="text-engraved-black-bg">Engraved</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-engraved-[color]-bg class such as text-engraved-black-bg.

text-neon experimental

Neon

<h1 class="text-neon">Neon</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a font-neon class and a text-neon class.

Neon

<h1 class="text-neon-2">Neon</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a font-neon class and a text-neon-2 class.