En otra ocasion os hable de como hacer el efecto 3D en el texto, en el que jugabamos con el efecto 'text shadow' para su realizacion. Ahora, y basandome en otros diseños, vamos a jugar con las letras en lo que he denominado "Texto 3DMix". La cosa es simple CSS, aprovechamos la duplicacion del texto y lo combinamos con los colores rgba, lo que nos puede dar muchas posibilidades para nuestros diseños.El codigo que utilizamos para mostrarlo es este:
<tresdmix>TEXTO</tresdmix> |
Ahora, ponemos el codigo de los estilos, donde tenemos que poner el mismo texto que pusimos en el de arriba para duplicarlo. Si queremos cambiar los colores, donde pone color: rgba(230, 191, 0,0.5) vamos jugando con los numeros y la distancia hasta conseguir los tonos deseados.
<style> tresdmix { display: inline; position: relative; font: 70px Verdana; letter-spacing: -5px; color: rgba(230, 191, 0,0.5); } tresdmix:after { content: "TEXTO" ; position: absolute; left: 5px; top: 5px; color: rgba(255,0,0,0.5); } </style> |
Este metodo da muchas posibilidades. Aqui tienes dos ejemplos:
