Problema (a me) inspiegabile gradient

Printable View

08-06-2014, 22.48.50
pkspritesearch

Problema (a me) inspiegabile gradient

Ho trovat una guida interessante sul come impostare un gradient con css + PS.

Dato che la chiedete spessso, ecco la pagina:
http://pkspritesearch.altervista.org/pagine/try/sfum/

L?HTML è ridotto al minimo:

Codice HTML:

<h1> <span></span> CSS Gradient Text </h1>

Mentre il resto lo fa i css:

Codice:

h1 { font: bold 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; height: 31px; color: #464646; } h1 span { background: url(gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; }

Il punto è che se cambio l'immagine da gradient-white.png a qualsiasi altro file; be', adesso tocca a voi giudicare:
http://i.imgur.com/JDFmfYB.png

Insomma, sce una bella schifezza.
Però rimettendo a posto l'immagine, tutto si sistema :/

È tipo un brutto sogno :/

Come si potrebbe risolvere?
Grazie Sbkdhecvq
09-06-2014, 00.31.47
karl94

Ma che effetto vuoi ottenere?
09-06-2014, 00.38.29
pkspritesearch

Un gradient sul testo.
09-06-2014, 00.41.13
karl94

E che vuol dire? Non leggo la tua mente, me lo devi spiegare per bene ciò che hai in testa.
09-06-2014, 11.57.18
pkspritesearch

http://i.imgur.com/Y8Qgz8u.png

Cerco di ottenere questo risultato.
09-06-2014, 17.40.04
quellidelcucuzzolo

Per spiegare l'inspiegabile :=): , hai provato a dare un colore allo sfondo della pagina? (esempio)

Il comportamento è lo stesso, solo che l'immagine del tuo esempio online ha una trasparenza.

Prova a cercare tra i CSS3...
09-06-2014, 20.14.51
pkspritesearch

Citazione:

Originalmente inviato da quellidelcucuzzolo

Per spiegare l'inspiegabile :=): , hai provato a dare un colore allo sfondo della pagina? (esempio)

Il comportamento è lo stesso, solo che l'immagine del tuo esempio online ha una trasparenza.

Prova a cercare tra i CSS3...

Omg grazie D:

E allorah ...

https://i.chzbgr.com/maxW500/3433360128/hA061F303/
09-06-2014, 20.30.50
karl94

Comunque quell'effetto lo puoi ottenere in altri modi, ma ogni browser ha il suo. Su Gecko dovresti usare i filtri SVG, mentre con WebKit c'è una proprietà CSS (non standard) apposita.
09-06-2014, 21.07.47
pkspritesearch

Citazione:

Originalmente inviato da karl94

Comunque quell'effetto lo puoi ottenere in altri modi, ma ogni browser ha il suo. Su Gecko dovresti usare i filtri SVG, mentre con WebKit c'è una proprietà CSS (non standard) apposita.

Codice:

background: #866400; background: -moz-linear-gradient(top, #866400 0%, #ff4e28 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#866400), color-stop(100%,#ff4e28)); background: -webkit-linear-gradient(top, #866400 0%,#ff4e28 100%); background: -o-linear-gradient(top, #866400 0%,#ff4e28 100%); background: -ms-linear-gradient(top, #866400 0%,#ff4e28 100%); background: linear-gradient(to bottom, #866400 0%,#ff4e28 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#866400', endColorstr='#ff4e28',GradientType=0 );

Intendi così? Questo esce sotto al testo, non sopra come desiderato :/

Altro problema (non apro un secondo topic), con un p.

Nel foglio di stile sta assegnato solo ciò al p:

Codice:

p{color:#000000;}

Perchè intorno al p esce anche il padding?

http://i.imgur.com/a8TxQgK.png
11-06-2014, 11.00.53

Codice:

p{color:#000000; padding:0px 0px 0px 0px;}

Ciao!
11-06-2014, 13.07.42
NLSweb

dovresti usare CANVAS..

Codice:

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="60px Verdana"; var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); ctx.fillStyle=gradient; ctx.fillText("CIAO",10,90); </script> </body> </html>
11-06-2014, 15.32.46
pkspritesearch

Citazione:

Originalmente inviato da NLSweb

dovresti usare CANVAS..

Codice:

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="60px Verdana"; var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); ctx.fillStyle=gradient; ctx.fillText("CIAO",10,90); </script> </body> </html>

Cercavo di poter utilizzare direttamente il testo... Grazie lo stesso!

Citazione:

Originalmente inviato da altermetax

Codice:

p{color:#000000; padding:0px 0px 0px 0px;}

Ciao!

Con !important!
11-06-2014, 15.39.51
NLSweb

in che senso ... utilizzare direttamente il testo ... ?
13-06-2014, 16.28.36
pkspritesearch

Citazione:

Originalmente inviato da NLSweb

in che senso ... utilizzare direttamente il testo ... ?

Se selezioni un canvas e fai Ctrl + C non accade una mazza.

__________________

In risposta al messaggio sotto:
Il mio messaggio non voleva essere provocatorio.

Non è quello che cercavo, grazie.
13-06-2014, 16.51.19
NLSweb

allora.... prima di tutto non mi piace molto il tono della risposta...

comunque .. l'effetto che vedi e' un trick (cioe' un inganno ..una illusione ottica per cosi' dire)
in pratica viene sovrapposta una immagine png con alfa (quindi in semi trasparenza) sopra il testo in modo da dargli un effetto di "gradient"...

l'immagine e' chiaramente posizionata sopra il testo in posizione tale da creare l'effetto desiderato

esempio: creo una immagine con canale alfa di una sfumatura di colore che parte da 100 a 0 ; la salvo come png e la ridimensiono per l'uso prefissato . Quindi la sovrappongo al testo per creare l'effetto sfumato.

chi ha sviluppato questo trick ha inoltre trovato una soluzione elegante con jQuery per applicarlo usando la funzione prepend

da notare che il testo deve avere posizione relativa e l'immagine posizione assoluta per poter funzionare..

un ultima cosa .. per farlo funzionare anche con IE bisogna cambiare un pochino il codice:

Codice:

h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); }
13-06-2014, 17.32.34
NLSweb

pagina di esmpio:
http://nlsweb.altervista.org/esempiotestogradient.html
21-06-2014, 09.37.13
pkspritesearch

Citazione:

Originalmente inviato da NLSweb

pagina di esmpio:
http://nlsweb.altervista.org/esempiotestogradient.html

Grazie ma sarebbe troppo css da maneggiare e non c'ho voglia.

Hai una home incredibile.