-
.Text-Shadow
Utile e interessante funzione del CSS3 è "Text-Shadow" che ci consente di dare al testo un'ombra.
Per la scritta sopra ho utilizzato il seguente codice:HTML<div style="text-shadow:5px 2px 4px #3E6F86; text-align: center; color: #000"><b>Text-Shadow</b></div>
Escludendo le parti che già conosciamo ci troviamo con il seguente codiceCODICEtext-shadow: 5px 2px 4px #3E6F86;
Analisi del codice:
Come potete vedere il codice è composto da 3 misure in pixel che svolgono 3 funzioni diverse:
La prima serve ad impostare la distanza dell'ombra rispetto il testo verso destra o sinistra (a sinistra aggiungendo - ).
La seconda serve ad impostare la distanza dell'ombra rispetto al testo verso il basso o l'alto (verso l'alto aggiungendo un - ).
La terza ci consente di impostare la sfocatura dell'ombra
E dal colore che possiamo impostare a nostro piacere.
Alcuni esempi:text-shadow: 3px 1px #FF0000text-shadow: 3px 1px 2px #FF0000text-shadow: 3px 1px 2px #FF0000, 6px 3px 1px #3E6F86
Come potete vedere nel terzo caso è possibile impostare più ombre sullo stesso aggiungendo una , dopo il colore!
Compatibilità
Links Utili
Testo bordato usando il text-shadow
Edited by .|Ye|. - 20/6/2013, 13:30
. -
.
Utilissimo! Io adoro l'effetto incassato: Prova Prova <3. -
.
anche a me piace molto, sinceramente non mi piace molto l'effetto che si ottiene impostando la terza misura, il migliore è quello incassato! . -
.|Ye|.+4 .
User deleted
Piccolo trucchetto per avere il testo bordato Prova testo
HTML<p style="text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">[color=orange]Prova testo[/color]</p>
usando il colore in rgba anzichè hex si può modificare l'opacità del bordo ancheProva testo
opacità: 70%HTML<p style="text-shadow: -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7), -1px 1px 0 rgba(0,0,0,0.7), 1px 1px 0 rgba(0,0,0,0.7);">[color=orange]Prova testo[/color]</p>. -
.
Forte, lo userò di sicuro nei prossimi lavori, grazie Ye ^^ . -
.Text-Shadow
Utile e interessante funzione del CSS3 è "Text-Shadow" che ci consente di dare al testo un'ombra.
Per la scritta sopra ho utilizzato il seguente codice:HTML<div style="text-shadow:5px 2px 4px #3E6F86; text-align: center; color: #000"><b>Text-Shadow</b></div>
Escludendo le parti che già conosciamo ci troviamo con il seguente codiceCODICEtext-shadow: 5px 2px 4px #3E6F86;
Analisi del codice:
Come potete vedere il codice è composto da 3 misure in pixel che svolgono 3 funzioni diverse:
La prima serve ad impostare la distanza dell'ombra rispetto il testo verso destra o sinistra (a sinistra aggiungendo - ).
La seconda serve ad impostare la distanza dell'ombra rispetto al testo verso il basso o l'alto (verso l'alto aggiungendo un - ).
La terza ci consente di impostare la sfocatura dell'ombra
E dal colore che possiamo impostare a nostro piacere.
Alcuni esempi:text-shadow: 3px 1px #FF0000text-shadow: 3px 1px 2px #FF0000text-shadow: 3px 1px 2px #FF0000, 6px 3px 1px #3E6F86
Come potete vedere nel terzo caso è possibile impostare più ombre sullo stesso aggiungendo una , dopo il colore!
Compatibilità
Links Utili
Testo bordato usando il text-shadow
Una domanda, come faccio ad usare questo script all interno di un testo? perche se lo uso la parola anche levando il codice "align center" mi va al bordo successivo.
metto una prova di un testo per farvi capire meglio.CITAZIONE".....era il Chi ovvero l' Energia Vitale Combattiva, che è parte integrante di ogni essere vivente. Man mano che questa forza cresceva mutava, divenendo più intensa e assumendo una colorazione propria che la distingueva dalle altre. Tuttavia, solo in pochi ottenevano l' Energia X e ancor meno riuscivano ad ottenere l' EnergiaBianca, mentre chi otteneva l' Energia Verde, era considerato un' autentica leggenda.
Di seguito sono riportate le diverse energie sviluppate dall' uomo e le relative capacità....."
La parola "Bianca" mi va accapo, come faccio a tenerla collegata al discorso??CODICETuttavia, solo in pochi ottenevano l' Energia [color=red]<b>X</b>[/color] e ancor meno riuscivano ad ottenere l' Energia <div style="text-shadow:5px 2px 4px #000000; color:#FFFFFF"><b>Bianca</b></div>, mentre chi otteneva...
Grazie.. -
.
Invece di usare div style, usa lo span.
Tuttavia, solo in pochi ottenevano l' Energia X e ancor meno riuscivano ad ottenere l' Energia Bianca, mentre chi otteneva...CODICETuttavia, solo in pochi ottenevano l' Energia [color=red]<b>X</b>[/color] e ancor meno riuscivano ad ottenere l' Energia <span style="text-shadow:5px 2px 4px #000000; color:#FFFFFF"><b>Bianca</b></span>, mentre chi otteneva.... -
.
Grazie!!!!! *__* .
Text-Shadow[ CSS ] Spiegazione e trucchi sul testo incassato. |
Web
