Visualizzazione risultati 1 fino 7 di 7

Discussione: [CSS] Effetto "sfumato" link

  1. 17-12-2006, 03.06.03 #1
    Guest

    Predefinito [CSS] Effetto "sfumato" link

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

    Ah...per "sfumato" intendo una scritta che abbia colori differenti (in questo caso dall'arancio al giallo)
  2. 17-12-2006, 10.22.17 #2
    nextage
    nextage non è connesso Utente giovane
    Data registrazione
    03-05-2005
    Messaggi
    40

    Predefinito

    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)
  3. 17-12-2006, 12.13.26 #3
    Guest

    Wink Re: Effetto sfumato dell' underline

    Citazione Originalmente inviato da FreePhotoProject
    ...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. .
    Ultima modifica di consapevolezza : 17-12-2006 alle ore 12.20.36
  4. 17-12-2006, 14.19.51 #4
    Guest

    Predefinito

    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

    Altri consigli?
    Ultima modifica di FreePhotoProject : 17-12-2006 alle ore 19.23.14
  5. 17-12-2006, 19.28.10 #5
    Guest

    Wink Re: Differenza tra HTML e CSS

    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à . . EDIT: Non funziona su Firefox , dovrai vederlo su Explorer .
    Ultima modifica di consapevolezza : 17-12-2006 alle ore 19.30.20
  6. 17-12-2006, 19.41.24 #6
    Guest

    Predefinito

    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.
    Grazie di nuovo.
    Ultima modifica di FreePhotoProject : 18-12-2006 alle ore 02.31.54
  7. 18-12-2006, 12.24.45 #7
    L'avatar di SolitaryExplorer
    SolitaryExplorer
    SolitaryExplorer non è connesso Utente storico
    Invia un messaggio via MSN a SolitaryExplorer
    Data registrazione
    10-08-2005
    Residenza
    Veneto
    Messaggi
    1,949

    Predefinito

    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...)
    Non offro assistenza privata. / Se vuoi anche tu una userbar come queste, basta chiedere.

« Discussione precedente | Prossima discussione »

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •  

Regole del forum