Anaglyph is the 3D effect, that contains two differently filtered colored images, one for each eye and is fully visible through 3D glasses. However, even without glasses, these effect looks cool and creative, and you can use it for making your Website more attractive.
Let’s try to create one together.
<h1>Welcome</h1>
h1 {
display: inline;
position: relative;
font: 150px Optima, serif;
letter-spacing: -5px;
color: rgba(150, 0, 255, 0.5);
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: rgba(255, 0, 100, 0.5);
}
Let’s bring all the parts together and try some examples.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline;
position: relative;
font: 150px Optima, serif;
letter-spacing: -5px;
color: rgba(150, 0, 255, 0.5);
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: rgba(255, 0, 100, 0.5);
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
If you don’t need this effect especially for using it with 3D glasses, you can change its colors and use only the style.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline;
position: relative;
font: 150px Garamond, serif;
letter-spacing: -5px;
color: #FFFFF0;
}
h1:after {
content: "Welcome";
position: absolute;
left: 10px;
top: 5px;
color: #FF69B4;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>