Anáglifo é uma imagem (ou um vídeo) formatada de maneira especial para fornecer um efeito tridimensional estereoscópico quando visto com óculos de duas cores (cada lente com uma cor diferente).
Como fazer isso com css
Existem duas formas de fezer o efeito com css. O primeiro é com text-shadow
. Tudo bem simples, você só precisa aplicar duas sombras, uma com margem negativa e outra positiva, uma vermelho e outra ciano:
1
<h2 class="anaglyph">my text anaglyph 3d</h2>
1
2
3
.anaglyph {
text-shadow: -0.08em 0 0 red, 0.08em 0 0 cyan;
}
A outra forma de fazer isso é com pseudo elementos css :before
ou :after
e data-attributes
, bem simples também olha só:
1
<h2 class="anaglyph-2" data-text="my text anaglyph 3d">my text anaglyph 3d</h2>
Primeiro declaramos o atributo data-text
como o mesmo valor do texto. E no css definimos as cores e criamos o pseudo elemento:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.anaglyph-2 {
position: relative;
color: red;
mix-blend-mode: multiply;
}
.anaglyph-2:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: cyan;
content: attr(data-text);
transform: translate(3px, 2px);
mix-blend-mode: multiply;
}
No pseudo elemento :after
pegamos o valor do data-text
com o atributo css content
e posicionamos como se fosse uma sombra. Depois é só aplicar um blend multiply com o atributo mix-blend-mode
, simples né não?
Veja funcionando nesse link