<div class="content-container">
<h1 class="overlap">Wood Type Daydreamin’</h1>
</div>
@font-face {
font-family: 'Datillo';
src: url('https://rwt.io/_demo_fonts/datillo/DattiloDJRBannerVariable-VF.woff2') format('woff2 supports variations'), url('https://rwt.io/_demo_fonts/datillo/DattiloDJRBannerVariable-VF.woff2') format('woff2-variations');
font-stretch: normal;
font-weight: 200 900;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f1f1fa;
color: #224;
font-family: 'Datillo', serif;
font-size: 1.25rem;
font-weight: 400;
}
h1 {
font-family: "Datillo", serif;
font-size: calc( 10vw + 2.5em );
font-weight: 850;
line-height: 1.1;
margin: 0;
max-width: 100%;
padding: 0;
text-transform: uppercase;
}
.overlap span {
/* set up transparency and overlap */
color: rgba(55,110,25,.75);
letter-spacing: -0.135em;
line-height: 0.7;
position: relative;
word-spacing: 0.75em;
}
.overlap span::before {
content: attr(data-content);
color: rgba(125,20,0,.75);
font-weight: 750;
line-height: 1;
opacity: 0.35;
position: absolute;
top: 0.1em;
left: -0.05em;
}
/* Play with the second solid fill color and opacity */
.overlap span:nth-child(odd)::before {
color: rgba(0,0,75,.14);
}
.overlap span:nth-child(5n+1)::before {
color: rgba(35,50,00,.15);
}
.overlap span:nth-child(7n+0)::before {
color: rgba(0,80,95,.25);
}
.overlap span::after {
content: attr(data-content);
color: transparent;
font-weight: 900;
line-height: 1;
position: absolute;
top: 0.1em;
left: 0;
-webkit-text-stroke: 0.01em black;
text-stroke: 0.01em black;
}
/* mix up the letter outlines a bit */
.overlap span:nth-child(odd)::after {
-webkit-text-stroke: 0.01em black;
text-stroke: 0.01em black;
left: -0.0025em;
top: 0.12em;
opacity: 0.7;
}
.overlap span:nth-child(5n+1)::after {
-webkit-text-stroke: 0.03em rgba(70,80,95,.9);
text-stroke: 0.03em rgba(70,80,95,.9);
left: 0.05em;
opacity: 0.7;
}
.overlap span:nth-child(4n+3)::after {
-webkit-text-stroke: 0.02em black;
text-stroke: 0.02em black;
top: 0.125em;
left: 0.015em;
opacity: 0.7;
}
.overlap span:nth-child(7n+0)::after {
-webkit-text-stroke: 0.015em black;
text-stroke: 0.015em black;
left: -0.025em;
top: 0.072em;
opacity: 0.7;
}
.content-container {
max-width: 80vw;
margin: 2rem auto;
}
// Text from the split-text element
const splitElement = document.querySelector('.overlap');
const str = splitElement.innerHTML;
const chars = str.split('');
// Remove the existing text so it can be replaced by the characters in spans
splitElement.innerHTML = '';
// Set up an aria-label so screen readers will still read out the whole string
splitElement.setAttribute('aria-label', str);
chars.forEach(function (item, index) {
var c = document.createElement('span');
// and give it some content
var letter = document.createTextNode(item);
// add the text node to the newly created span
c.appendChild(letter);
// add the newly created element and its content into the DOM
splitElement.append(c);
// add the letter to a data-content attribute so we can target it with CSS
c.setAttribute('data-content', c.innerHTML);
// Add aria-hidden to each character if the aria-label has been applied to the parent
if (c.parentElement.getAttribute('aria-label')) {
c.setAttribute('aria-hidden', true);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.