Problema (a me) inspiegabile gradient

**pkspritesearch** · 08-06-2014, 22.48.50

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:

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

È tipo un brutto sogno :/

Come si potrebbe risolvere?
Grazie Sbkdhecvq

**karl94** · 09-06-2014, 00.31.47

Ma che effetto vuoi ottenere?

**pkspritesearch** · 09-06-2014, 00.38.29

Un gradient sul testo.

**karl94** · 09-06-2014, 00.41.13

E che vuol dire? Non leggo la tua mente, me lo devi spiegare per bene ciò che hai in testa.

**pkspritesearch** · 09-06-2014, 11.57.18

Cerco di ottenere questo risultato.

**quellidelcucuzzolo** · 09-06-2014, 17.40.04

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...

**pkspritesearch** · 09-06-2014, 20.14.51

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 ...

**karl94** · 09-06-2014, 20.30.50

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.

**pkspritesearch** · 09-06-2014, 21.07.47

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?

11-06-2014, 11.00.53

Codice:

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

Ciao!

**NLSweb** · 11-06-2014, 13.07.42

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>

**pkspritesearch** · 11-06-2014, 15.32.46

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!

Originalmente inviato da altermetax

Codice:

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

Ciao!

Con !important!

**NLSweb** · 11-06-2014, 15.39.51

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

**pkspritesearch** · 13-06-2014, 16.28.36

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.

**NLSweb** · 13-06-2014, 16.51.19

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');
}

**NLSweb** · 13-06-2014, 17.32.34

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

**pkspritesearch** · 21-06-2014, 09.37.13

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.

Discussione: Problema (a me) inspiegabile gradient

LinkBack

Strumenti discussione

Display

Problema (a me) inspiegabile gradient

Regole di scrittura