testo blu con traccia nera intorno

[trippacchiello]

Qualcuno mi sa dire come posso clonare un testo blu qualsiasi in css con la traccia esterna nera?

[trippacchiello]

nessuno sa darmi aiuto?

[Mich_]

Personalmente non capisco i seguenti termini ed espressioni nel tuo messaggio:
- clonare (devi spiegare cosa significa nel contesto)
- testo blu qualsiasi (che significato ha il "qualsiasi"?)
- in css (il CSS e` un linguaggio di presentazione, che ha senso solo se riferito ad una marcatura)
- con la traccia esterna nera (cosa e` una traccia nera di un testo?)

Prova a spiegarti meglio, magari allega un piccolo grafico che spiega cosa vuoi ottenere.

[trippacchiello]

ecco, in effetti quel clonare non e' che c'azzeccava
cmq voglio fare con i css un testo tipo quello che allego in figura

In pratica partendo da questo css come posso mettere una traccia esterna?

.blu { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:LINK { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:VISITED { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:HOVER { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: underline; color: #678CA9}

[Gufo]

Originariamente inviato da trippacchiello
ecco, in effetti quel clonare non e' che c'azzeccava
cmq voglio fare con i css un testo tipo quello che allego in figura

In pratica partendo da questo css come posso mettere una traccia esterna?

.blu { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:LINK { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:VISITED { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #678CA9} 
.blu a:HOVER { font-family: Verdana; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: underline; color: #678CA9}

Secondo me lo puoi fare solo con una immagine e non con i css, poi può essere che qualc'uno ne sappia più di me e ti dia una soluzione diversa

[Gufo]

Esempio:

[Mich_]

Originariamente inviato da trippacchiello
ecco, in effetti quel clonare non e' che c'azzeccava
cmq voglio fare con i css un testo tipo quello che allego in figura

Provo ad interpretare:
Vuoi usare un font "contornato", in cui il contorno e` nero e il riempimento blu.
E` una cosa che si puo` fare ad esempio in PowerPoint (per citare un sw di mamma M$).

I CSS non possono prendere un font gia` presente e trasformarlo in contornato.
Eventualmente tramite CSS puoi utilizzare un font di tale tipo gia` pronto (se ci fosse).
Putroppo tali font non sono presenti di default nei browser, e quindi non puoi utilizzarli.

Alcuni browser riconoscono l'attributo CSS3
@font
con cui si carica un font da un server.
Prova a verificare se:
- puoi utlizzare una tale tecnica
- trovi un font opportuno

Devi pero` tener conto che non tutti i browser "ubbidiranno", per cui devi prevedere il comportamento da tenere in tal caso (la tecnica si chiama progressive enhancement)

[faxlain]

Io ho risolto il problema inserendo nei css che descrivono le caratteristiche del testo (nel mio caso il titolo dell'home page) questo:

color: #99ff00;
text-shadow: -1px -1px #006666, 1px 1px #006666

Il risultato è un testo verde acido (colore esadecimale #99ff00) con una "traccia" verde scuro attorno (colore esadecimale #006666).

Se poi si vuole aggiungere, oltre la "traccia", anche un'ombra sfumata al testo basta sostituire i css precedenti con questi:

color: #99ff00;
text-shadow: -0.1em 0 0.1em #006666, -1px -1px #006666, 1px 1px #006666


La soluzione è compatibile con tutti i maggiori browser escluso, ovviamente, IE ...

[mahamatt]

Infatti, text-shadow è la soluzione migliore (nonché l'unica ) per questo tipo di esigenza!

Ricorda solo di aggiungere istruzioni aggiuntive con i vari prefissi per gatantire compatibilità con le versioni precedenti dei maggiori browser (ovviamente IE escluso):

text-shadow: -1px -1px #006666, 1px 1px #006666
-moz-text-shadow: -1px -1px #006666, 1px 1px #006666
-webkit-text-shadow: -1px -1px #006666, 1px 1px #006666

[faxlain]

Grazie! hai ragione...