Ombra interna nel testo con CSS3
inserito nella categorie: CSS
marchiato con i tag: css, css3, inset, ombra, shadow, text-shadow
Da quando i web developers hanno a disposizione i nuovi strumenti del CSS3, hanno di certo avuto un grande aiuto nella progettazione grafica dei loro siti web.
Una delle proprietà piu’ amate / usate è sicuramente il text-shadow, per permette di definire un’ ombra per il testo.
Ad esempio tutti i testi del mio sito hanno impostato text-shadow: 0 1px 0 white, in modo da risaltare agli occhi, e apparire quasi scalfita nel body.
Ovviamente, come ogni cosa, questa proprietà ha delle “mancanze”: ovvero non si riesce a definire un’ ombra interna al testo, ma solo esterna.
Come ad esempio nella proprietà box-shadow, sarebbe stato utile e comodo poter definire un’ombra interna al testo attraverso la “clausola” inset.
Ma putroppo, dobbiamo arrangiarci diversamente, ma sempre con i CSS3, ovviamente.
Attraverso questa semplice classe in CSS3 (che potete modificare a vostro piacimento, sarà possibile inserire un’ombra interna ad un testo):
E poi usarla nel codice normalmente: <div class="inset_shadow_text">Flavio</div>:
Questo è un’ esempio:
Alla prossima!
Commenta anche tu!