[CSS] Effetto "sfumato" link

:roll: ...premetto che non conosco molto il CSS...
vorrei ottenere un effetto sfumato dell' underline che si crea sotto al testo quando è un link.
In html sono riuscito a farlo ma in CSS non capisco come fare...
Sono riuscito a fare "sfumata" la parte del testo definendo 4 classi con colori differenti ed utilizzandole lettera per lettera.
Però per il link...posso utlizzare una sola classe giusto?
Definita cosi...

Codice:

---

.arancioscu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:13px;
        color:#fd8e27
}
.arancioscu a:link {color: #fd8e27}
.arancioscu a:hover {color: #fd8e27}
.arancioscu a:visited {color: #fd8e27}

---

e poi nella pagina...

Codice:

---

<a class="arancioscu" href="http:// ...

---

Mi aiutate? :roll: Grazie :wink:

Ah...per "sfumato" intendo una scritta che abbia colori differenti (in questo caso dall'arancio al giallo)

Tramite semplice css (per quanto ne so io) non si puo fare.
Io avevo in giro un codice Javascript che cambiava colore per ogni lettera e che nel caso potresti usare qui (non fa altro che aggiungere per ogni carattere un tag font e calcola lui i colori da usare)

Questo è il codice

Codice:

---

<SCRIPT language=JavaScript>
<!-- Hide the script from old browsers --

function MakeArray(n){
  this.length=n;
  for(var i=1; i<=n; i++) this[i]=i-1;
  return this
}

hex=new MakeArray(16);
hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D"; hex[15]="E"; hex[16]="F";

function ToHex(x){              // Changes a int to hex (in the range 0 to 255)
  var high=x/16;
  var s=high+"";              //1
  s=s.substring(0,2);          //2 the combination of these are the same as the trunc function
  high=parseInt(s,10);        //3
  var left=hex[high+1];        // left part of the hex-value
  var low=x-high*16;          // calculate the rest of the values
  s=low+"";                    //1
  s=s.substring(0,2);          //2 the combination of these are the same as the trunc function
  low=parseInt(s,10);          //3
  var right=hex[low+1];        // right part of the hex-value
  var string=left+""+right;    // add the high and low together
  return string;
}

function rainbow(text){
  text=text.substring(3,text.length-4);        // gets rid of the HTML-comment-tags
  color_d1=255;                                // any value in 'begin' 0 to 255
  mul=color_d1/text.length;
  for(i=0;i < text.length;i++){
      color_d1=255*Math.sin(i/(text.length/3)); // some other things you can try >> "=255-mul*i" to fade out, "=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))"
      color_h1=ToHex(color_d1);
      color_d2=mul*i;
      color_h2=ToHex(color_d2);
      document.write("<FONT COLOR='#FF"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');
  }
}

// --End Hiding Here -->
</SCRIPT>

---

Questo va messo dove devi mettere la funzione

Codice:

---

<SCRIPT>
<!--
  {rainbow("--> ECCO IL TESTO CHE APPARE IN RAINBOW E BUON DIVERTIMENTO !!! <!--");}
//--></SCRIPT>

---

Non mi sembra che ci sia codice che non funzioni se usi Firefox al posto di IE (nel caso basta un test e si vede subito)

Citazione:

---

Originalmente inviato da FreePhotoProject

:roll: ...premetto che non conosco molto il CSS...
vorrei ottenere un effetto sfumato dell' underline che si crea sotto al testo quando è un link (...).

---

Siccome non ho capito perfettamente quello che hai detto, ho creato una Pagina con alcuni esempi utilizzando lo sfondo ( colore ) del tuo sito . . Forse volevi qualcosa del genere ? Il Codice per questo effetto particolare ( arancione - giallo - underline ) è il seguente - prima il CSS poi javaScript infine il link testuale ( non è permesso utilizzare B , I , Font all'interno del tag "a href" ).

Codice:

---

<STYLE><!--
      a.fade:link      { TEXT-DECORATION: none; color: #fd8e27 }
      a.fade:hover  { TEXT-DECORATION: underline }
      a.fade:visited  { TEXT-DECORATION: none; color: #fd8e27 }

            p {  font-family: Modern, Courier New; font-size:33px  }
//--></STYLE>

<SCRIPT language=JavaScript><!--

/*************
**** <config>
**/

fadeColor = "#eeee00";  // color to fade to

stepIn = 20; // delay when fading in
stepOut = 30; // delay when fading out

/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = false; 

/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;

/**
**** </config>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

fadeColor = dehexize(fadeColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
        var colorArr = new makearray(3);
        for (i=1; i<7; i++){
                for (j=0; j<16; j++){
                        if (Color.charAt(i) == hexa[j]){
                                if (i%2 !=0)
                                        colorArr[Math.floor((i-1)/2)]=eval(j)*16;
                                else
                                        colorArr[Math.floor((i-1)/2)]+=eval(j);
                        }
                }
        }
        return colorArr;
}

function domouseover() {
        if(document.all){
                var srcElement = event.srcElement;
                if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
                                if (!srcElement.startColor) {
                                        srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
                                        srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
                                }
                                fade(srcElement.startColor,fadeColor,srcElement.uniqueID,stepIn);                               
                }
        }
}

function domouseout() {
        if (document.all){
                var srcElement = event.srcElement;
                if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
                                fade(fadeColor,srcElement.startColor,srcElement.uniqueID,stepIn);
                }
        }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
      return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e,element,step) {
        var sr = s[0]; var sg = s[1]; var sb = s[2];
        var er = e[0]; var eg = e[1]; var eb = e[2];
       
        if (fadeId[0] != null && fade[0] != element) {
                var orig = eval(fadeId[0]);
                setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
                var i = 1;
                while(i < fadeId.length) {
                        clearTimeout(fadeId[i]);
                        i++;
                }
        }
               
        for(var i = 0; i <= step; i++) {
                fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
                        step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
                        ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
        }
        fadeId[0] = element;
}

/*****************************************\
||      Fade Script Version 3.0        ||
||  http://anarchos.xs.mw/fade.phtml    ||
||            (c) April 2001            ||
|| _____________________________________ ||
|| Created by:                          ||
|| Anarchos    > anarchos.xs.mw          ||
|| _____________________________________ ||
|| auto-startColor by Mike West          ||
|| mike@westman.org                      ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix        ||
|| http://www.princefari.com            ||
|| _____________________________________ ||
|| Color conversion from decimal to      ||
|| hex (dehexize function) by:          ||
|| Litejet > litejet@hotmail.com        ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by:    ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| _____________________________________ ||
|| domouseover/out based on scripts by  ||
|| The Shadow  > www.icon.co.za/~andrewk ||
||                                        ||
\*****************************************/
//--></SCRIPT>

</head><body bgColor="#aaaaaa">

<p><a class="fade" target="_top" href="URL">TESTO</a></p>

---

Come puoi notare , è possibile far convivere più combinazioni di colori nella stessa pagina Web . . Se non era questo che volevi, ma un semplice passaggio tra due colori ( senza il "fade" ), allora il CSS è semplicissimo:

Codice:

---

<STYLE><!--
        p.arancioscu {

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size:13px;

                color:#fd8e27

        }
        a.arancioscu:link { color: #fd8e27; TEXT-DECORATION: none }

        a.arancioscu:hover { color: #ddcc00; TEXT-DECORATION: underline }

        a.arancioscu:visited { color: #fd8e27; TEXT-DECORATION: none }

//--></STYLE>

</head><body bgColor="#aaaaaa">

<p class="arancioscu">

<a class="arancioscu" target="_top" href="URL">TESTO</a> </p>

---

EDIT: L'effetto "fade" NON funziona su Firefox , per cui è inutile andare a vedere la pagina con gli esempi con quel browser . . purtroppo molti Script del mio sito, il Firefox non li riconosce e non li esegue, in questo caso ci vuole proprio il vecchio caro Int. Explorer. . :roll:

Intanto grazie ad entrambi...lo script di nextage devo ancora provarlo (sono tornato ora dal lavoro)...dopo vi faccio sapere ;)

@Consapevolezza:
ho provato il link che hai postato...ma non è quello che voglio ottenere. Non volevo spammare...però se guardi l'homepage del mio sito...quello che vorrei ottenere è l'effetto che vedi sulle scritte "Enter/Entra/Entrez"...dove l'underline del link segue il cambio del colore della scritta...è possibile con il css?

Grazie di nuovo

EDIT:
Nextage, ho provato lo script...funziona bene, varia anche il colore dell'underline...ma non è l'effetto che volevo ottenere :crycry:

Altri consigli? :roll:

Si , è possibile con il CSS . In questa Pagina ho spiegato la differenza , ovvero come si scrive in uno o in altro modo . Per farla breve , ripeto qui il codice essenziale :

( Il vantaggio di questo sistema è che per evidenziare una parola basta scrivere <span> . </span> , non c'è bisogno di descrivere il font ogni volta .. e la formattazione dell'insieme risulta automatica . Non ho capito però, se vuoi ottenere un link completamente statico - rainbow - come nella tua Home , oppure dinamico - di tipo hover normale - più semplice , o "fade" - più complessa ? )

Codice:

---

<STYLE><!--

body {        background: #656c4a; font-family: Verdana;
        font-size:13px; color: #eeffbb  }

h3  {        font-family: Verdana; font-size:24pt; font-weight: normal  }

span {  color: "febf75"  }

 a.:link      { TEXT-DECORATION: underline; color: #fd7b06 }
 a.:hover    { TEXT-DECORATION: underline; color: #fd7b06 }
 a.:visited  { TEXT-DECORATION: underline; color: #fd7b06 }

 a.1:link      { TEXT-DECORATION: underline; color: #fd7b06 }
 a.1:hover  { TEXT-DECORATION: underline; color: #fd7b06 }
 a.1:visited  { TEXT-DECORATION: underline; color: #fd7b06 }

 a.2:link      { TEXT-DECORATION: underline; color: #ff9411 }
 a.2:hover  { TEXT-DECORATION: underline; color: #ff9411 }
 a.2:visited  { TEXT-DECORATION: underline; color: #ff9411 }

 a.3:link      { TEXT-DECORATION: underline; color: #ffa940 }
 a.3:hover  { TEXT-DECORATION: underline; color: #ffa940 }
 a.3:visited  { TEXT-DECORATION: underline; color: #ffa940 }

 a.4:link      { TEXT-DECORATION: underline; color: #ffbb64 }
 a.4:hover  { TEXT-DECORATION: underline; color: #ffbb64 }
 a.4:visited  { TEXT-DECORATION: underline; color: #ffbb64 }

 a.5:link      { TEXT-DECORATION: underline; color: #eeffbb }
 a.5:hover  { TEXT-DECORATION: underline; color: #eeffbb }
 a.5:visited  { TEXT-DECORATION: underline; color: #eeffbb }

//--></STYLE>

<h3> <a class="1" href="URL">.</a><a class="2" href="URL">.</a>
<a class="3" href="URL">:</a><a class="4" href="URL">:</a>
<a class="5" href="URL">Entra</a><a class="4" href="URL">:</a>
<a class="3" href="URL">:</a><a class="2" href="URL">.</a>
<a class="1" href="URL">.</a></h3>

<p>Testo normale, <span>testo evidenziato,</span> <a href="URL">
testo link normale</a>.</p>

<p> <a class="1" href="URL">.</a><a class="2" href="URL">.</a>
<a class="3" href="URL">:</a><a class="4" href="URL">:</a>
<a class="5" href="URL">testo link speciale</a><a class="4" href="URL">:</a>
<a class="3" href="URL">:</a><a class="2" href="URL">.</a>
<a class="1" href="URL">.</a></p>

---

Aggiungo che prima di provare il codice, dovrai scriverlo tutto di seguito senza spazi vuoti e senza interruzioni di righa (prendilo dal mio sito, che qui è venuto frammentato ), altrimenti sarà molto diverso da come è in realtà . . :roll: EDIT: Non funziona su Firefox , dovrai vederlo su Explorer . :roll:

GENIALE!!!!!!!!!
CSS + javaScript è bellissimo!

Ho caricato la pagina con firefox...il primo esempio (solo html) si vede bene...il secondo (solo css) no è mono-colore...il terzo (CSS+jS) non fa il "fade" però i colori sono giusti...vado col terzo!
Più tardi lo provo sul sito.

Grazie davvero!

EDIT:
ho dovuto macchinare un po'......però lo script funziona benissimo!
La cosa che volevo fare era realizzabile anche solo con il css, ed era proprio il secondo esempio che hai fatto...ma mi sono innamorato del cambio di colore sfumato. :tongue
Grazie di nuovo.

Codice:

---

<style type="text/css">
body {background-color:#333333}
a.link {color: #CCFF00}
a.link:hover {color:#CC0000}
a.link:visited {color:#CCFF00}
a.link .duepunti {color:#009933}
a.link:hover .duepunti {color:#FF9900}
a.link:visited .duepunti {color:#009933}
a.link .punto {color:#336600}
a.link:hover .punto {color:#FFFF00}
a.link:visited .punto {color:#336600}
</style>

---

Codice HTML:

---

<p><a class="link" href="http://www.xxx.org"><span class="punto">..</span><span class="duepunti">::</span> collegamento di prova <span class="duepunti">::</span><span class="punto">..</span></a></p>

---

Per quanto riguarda l'interpretazione del CSS, il tutto è relativo ai browser.
L'underline colorato viene interpretato a discrezione del browser e non conosco hack (trucchi) per forzarlo via CSS.

ot/ Scusami... Ma mi ero addormentato! (Vale può confermare...) :mrgreen: