Sfumatura ed ombra esterna font

[Robertosevic]

Salve a tutti e buona Domenica.
Sto creando uno Slide nel quale inserire degli articoli in evidenza e vorrei un aiuto limitatamente al font dell'articolo da far apparire nel detto slide. Nello specifico vorrei riprodurre esattamente come in immagine lo style del font da inserire nello slide: http://i.imagebanana.com/img/920bupxx/titoloslide.png
L'ho creato con Photoshop e di seguito elenco le opzioni da me selezionate:
- Mappa Sfumatura settata su Sovrapponi con opacità al 50% e Sfumatura dal nero al bianco;
- Ombra Esterna settata su Moltiplica con opacità al 100% e Distance, Spread e Size settati rispettivamente a 1,0 e 3).
Vorrei pertanto riprodurre queste caratteristiche del font nello Slide con i giusti CSS:
Per quanto concerne l'ombra esterna dovrei utilizzare il text-shadow giusto? E cosa dovrei inserire?
Mentre per quanto riguarda la mappa sfumatura? Come posso implementarla?
Grazie mille in anticipo

[Nobody33]

Per l'ombra del testo:

p{
color:#000;
font-size:20px;
text-shadow:1px 1px 2px #F00; // x-asse , y-asse, blur, colore.
}

<div>

test test test</p></div>

La sfumatura del testo non si può fare per tutti i browser. Ci sarebbe un modo che, però, funziona solo per i webkit browser (chrome / safari).

Come fare vedi QUI

[Robertosevic]

Ciao, innanzitutto ti ringrazio per la risposta.
Ho provato il codice concernente l'ombra del testo ma il risultato è distante dalle caratteristiche che ho inserito su photoshop. Ad esempio l'ombra esterna è settata su Moltiplica con opacità al 100% ed i valori Distance, Spread e Size settati rispettivamente a 1,0 e 3. Il colore utilizzato è il nero.
Ho quindi sostituito i colori del codice che mi hai girato ma non ho ottenuto il risultato che speravo.
Questo è il risultato inserendo i codici css:

http://i.imagebanana.com/img/wjdtoty...idecoddato.png

Questo è il prodotto con Photoshop:

http://i.imagebanana.com/img/t9g9l7w...ephotoshop.png


Grazie mille in anticipo e grazie ancora per la disponibilità!

[slegolego]

magari mi sbaglio, ma la sfumatura del testo coi CSS3 credo sia possible solo sul browser webkit(chrome safari) e non e' quindi renderizzabile su IE utilizzando la proprieta' background clip.
http://trentwalton.com/2010/03/24/cs...und-clip-text/

[Robertosevic]

Grazie per la risposta.
Oltre all'ombra esterna ed alla sfumatura dovrei anche impostare l'anti-aliasing: con Photoshop ho scelto "crisp", come posso implementarlo nel css?

[slegolego]

non tutte le opzioni di effetti, antialiasing o layer fusion presenti in photoshop possono essere replicate con i css3.
Il rendering dei testi nei browser inoltre e' una cosa abbastanza complicata per il browser da renderizzare.
Ogni browser ha le sue specifiche pecche e punti di forza , per cui lo stesso testo renderizzato in safari, chrome o IE puo' risultare anche piuttosto differente, e non c'e' molto che si possa fare.

puoi pero cercare queste regole
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
e vedere se fanno al caso tuo, ma dubito che siano crossbrowser (ovvero che funzionino per tutti i browser, e forse per una volta, IE fa bene la sua parte)