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

compartilhe

comments powered by Disqus