Layering Fonts in CSS

Again with another post “Layering Fonts in CSS”. In Photoshop, Illustrator, or any other graphics software we utilizes layer to show text in layered to make highly decorative and multi-colored fonts. Now, we are going to make the text in layered for web browsers in CSS.

Layering Fonts with div’s

One approach would be to create several div’s and pin them to the same point. While this does work, it involves creating a div for each layer of the font, and then repeating the same content in each div. The resulting markup is a semantic mess, failing entirely to separate content and style information.

<div id="first">
 <h1>Layering Fonts in CSS</h1>
</div>
<div id="second">
 <h1>Layering Fonts in CSS</h1>
</div>
<div id="third">
 <h1>Layering Fonts in CSS</h1>
</div>
#first, #second, #third {
 display: block;
 position: absolute;
 top: 5px;
 left: 5px;
}
h1 {
 font: 5em 'One';
 color: #d00000;
 margin-left: 0.5em;
}
#second h1 {
 font-family: 'Two';
 color: #6B6B6B;;
}
#third h1 {
 font-family: 'Three';
 color: #000;
}

Layering Fonts with Pseudo Elements

Another technique that doesn’t interfere with the markup: by using the ::before and ::after pseudo elements the text can be layered without cluttering up the html. we nee to create an h1 containing the text to be layered, and then place a div around it. We add a text attribute to the h1 tag and set it to match our heading text (this will later be used by the CSS to set the content of the ::before and ::after). By setting the content of the pseudo-elements in the attribute we are keeping the content in the markup (just about), this means we don’t have to set the content of the pseudo-elements in the CSS.

<div>
<h1 text="Layering Fonts in CSS">Layering Fonts in CSS</h1>
</div>
div {
	display: block;
	position: relative;
}
h1 {
	font: 5em 'Display';
	color: #6B6B6B;
	margin-left: .5em;
}
h1::before {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: .5em;
	content: attr(text);
	font-family: 'Two';
	color: #d00000;
}
h1::after {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: .5em;
	content: attr(text);
	font-family: 'Three';
	color: #6B6B6B;
}

Thanks for reading this article. Font which we used here is Homestead under the Personal Use License, You can download the font (Homestead) from official website. Different font can be used in this method to show the text in different manner.

Download/Demo:

Demo Download

Siva Sankar

SIVA SANKAR, Working as a Software Engineer, Blogging is my hobby. I completed my Bachelors of Engineering (Computer Science Engineering) in Chennai, India. and my Master of Engineering (Embedded System Technologies) in Tamilnadu, India.

Leave a Reply

Your email address will not be published. Required fields are marked *