Blocuri tridimensionale și text bicolor - CSS-Tricks

Anonim

Putem folosi multiple text-shadowși box-shadowvalori pentru a crea un aspect tridimensional în blocuri sau text, ca această captură de ecran a subsolului lui David DeSandro. Cu toate acestea, în acest exemplu, partea „cu trei dimensiuni” are o culoare solidă.

Alternând culorile înainte și înapoi în „ordinea de stivuire” a declarației noastre de casetă sau umbră de text, putem simula un efect mai tridimensional / luminat.

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;

Exemplu