Bloques y texto tridimensionales de dos colores - Trucos CSS

Anonim

Podemos usar valores múltiples text-shadowy box-shadowpara crear una apariencia tridimensional de bloques o texto, como esta captura de pantalla del pie de página de David DeSandro. Sin embargo, en ese ejemplo, la parte "tridimensional" es un color sólido.

Al alternar colores de un lado a otro en el "orden de apilamiento" de nuestra declaración de sombra de cuadro o texto, podemos simular un efecto más tridimensional / iluminado.

text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px 6px #eee, 6px 7px #ccc, 8px 7px #eee, 7px 8px #ccc, 8px 8px #eee;

Ejemplo