Esiste un metodo CSS pulito per rendere ogni lettera in una parola di un colore diverso?

StackOverflow https://stackoverflow.com/questions/155584

  •  03-07-2019
  •  | 
  •  

Domanda

Ho bisogno di un modo per consentire a ciascuna lettera di una parola di ruotare attraverso 3 colori diversi. Conosco alcuni modi non così chiari per farlo con asp.NET, ma mi chiedo se potrebbe esserci una soluzione CSS / JavaScript più pulita che sia più amichevole per i motori di ricerca.

Il progettista sta includendo un file come questo per ogni pagina. Preferirei non dover generare manualmente un'immagine per ogni pagina in quanto ciò rende difficile per gli editor di siti non tecnici aggiungere pagine e cambiare i nomi delle pagine.

È stato utile?

Soluzione

Ecco alcuni JavaScript. 

<script type="text/javascript">
   var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
</script>

Altri suggerimenti

Sul lato server puoi farlo abbastanza facilmente senza fastidiosi motori di ricerca AFAIK. 

// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
   print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
   c = c + 1; if (c > 3) c = 1;
}

Se vuoi davvero un semplice codice HTML inline morto, scrivi Javascript sul lato client per recuperare il messaggio da un determinato P o DIV o qualsiasi cosa in base al suo ID, dividerlo, ricodificarlo come sopra e sostituire i P o DIV attributo "innerHTML".

Non c'è assolutamente alcuna soluzione che utilizza solo CSS, poiché i selettori CSS non ti danno accesso a singole lettere (tranne : prima lettera ).

  

Preferirei non dover generare manualmente un'immagine per ogni pagina

Quindi genera l'immagine automaticamente.

Non specifichi quale tecnologia lato server stai utilizzando, ma una buona tecnologia ti consentirà di manipolare le immagini (o almeno chiamare un'utilità di immagine esterna)

Quindi gli utenti non tecnici dovrebbero semplicemente fare qualcosa del genere: 

<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>

E lo script redblueyellow.cfm userebbe quindi un programma.png esistente o genererebbe una nuova immagine con più colori come desiderato.

Posso fornire CFML di esempio o pseudo-codice per farlo, se lo desideri?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top