colorazione testo

**merovese** · 28-01-2016, 20:32

Ciao a tutti chiedo scusa per la domanda, credo che per la maggior parte di voi sia cosa di routine ma per me è un problema insormontabile.
Allora ho un testo html:

<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>La Nostra Storia</h1>
<h2>bla bla bla bla bla bla bla 1,2,3,4,5,6, bla bla bla bla.<h2>
</div>
</div>
</div>
poi ho un css dal quale vi estrapolo la parte che interessa il testo
h1 {
font-size: 3.8em;
line-height: 1em;
font-weight: 700;
color: #B8860B;
}

h2 {
font-size: 2em;
line-height: 1em;
font-weight: 400;
color: #B8860B;
text-align: justify;
}

.text-gold {color: #B8860B}

allora, io vorrei che il testo bla bla bla bla, fosse di un colore e più precisamente il #B8860B ma che i numeri, siano di un colore diverso, sia dal testo e sia l'uno con l'altro, pur mantenendo formattazione e misura. ho provato creando un h3 ed assegnandolo solo al numeri 1, ma il risultato è che il numero cambia colore ma cambia misura e formattazione e non capisco il motivo dato che non faccio altro che copiare l'h2 e cambiare nome e colore.

c'è qualcuno che può illuminarmi?
grazie mille

**ResianTaxidrive** · 28-01-2016, 21:34

Gli h2 e gli h3 devono essere usati nel modo corretto, non così come vuoi fare tu. Metti invece ogni numero in un span diverso a cui assegnerai una diversa classe con una regola per controllare il colore.

**merovese** · 28-01-2016, 21:36

Originariamente inviata da ResianTaxidrive

Gli h2 e gli h3 devono essere usati nel modo corretto, non così come vuoi fare tu. Metti invece ogni numero in un span diverso a cui assegnerai una diversa classe con una regola per controllare il colore.

Grazie, potresti gentilmente farmi un esempio? Grazie ancora

**carlomarangoni** · 29-01-2016, 01:26

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>

<body>
<h1 style="color:#B8860B;">
La Nostra Storia
</h1>
<h2 style="color:#B8860B;">
bla bla bla bla bla bla bla
<span style="color:red;">
 1,2,3,4,5,6,
</span>
 bla bla bla bla.
</h2>
</body>
</html>

**merovese** · 29-01-2016, 11:29

grazie mi sono impegnato ed ho usato gli span ancora prima di leggere il tuo messaggio, grazie mille!
ora però mi si è creato un altro problema, secondo te è possibile dare ad un testo il doppio colore in orizzontale anziché dividendo la scritta in due parti? ad esempio in vece che colorare bla di un colore e bla di un altro, è possibile colorare la parte alta di blabla di un colore e la parte bassa di un altro?

**merovese** · 29-01-2016, 11:40

ho trovato qualcosa con il gradient ma non so se riesco ad usarla con lo span
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}

h1.method1 {
background: -webkit-linear-gradient(top, #FF00FF, #FFD800);
background: linear-gradient(top, #878787, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

**merovese** · 29-01-2016, 12:29

infatti con span non funziona...

**merovese** · 29-01-2016, 12:50

Ciao a tutti dopo varie ricerche sul web sono riuscito ad ottenere la formattazione del testo con alcune parole scritte in diversi colori, solo che alcune di queste mi occorrono di 2 colori quindi ho puntato sul gradient

ma nel mio caso non riesco ad inserirlo, vi posto il mio codice

css:

body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 00;
font-size: 1em;
color: #ffffff;
background-color:#000000;
}
h1 {
font-size: 3.8em;
line-height: 1em;
font-weight: 700;
color: #B8860B;
}

h2 {
font-size: 2em;
line-height: 1em;
font-weight: 400;
color: #B8860B;
text-align: justify;
}

.text-gold {color: #B8860B}
.text-blue {color: #0000FF}
.text-orange {color: #FF9900}
.text-red {color: #FF0000}
.text-yellow {color: #FFFF00}
.text-yellow2 {color: #FFD800}
.text-lightblue {color: #99CBFF}
.text-magenta {color: #FF00FF}
.text-withe {color: #FFFFFF}

html

<div class="col-sm-12">
<h1>La Nostra Storia</h1>
<h2>blablablablablabla (<span class="text-blue">ciao1</span>, <span class="text-orange">ciao2</span>, <span class="text-red">ciao3</span>, <span class="text-yellow">ciao4</span>, <span class="text-lightblue">ciao5</span>,<span class="text-yellow2">ciao6</span>).
blablablablablabla</h2>
</div>
</div>
</div>

come si po' vedere il testo è h2 e alle parole CIAO ho assegnato altri colori tramite le span class, ma la storia si complica quando alle parole ciao5 e ciao6 devo assegnare un doppio colore, ad esempio giallo e rosso per ciao5 e bianco e blu per ciao6, gli esempi che ho trovato sul web applicano il gradient al testo h1, ma se io effettuo tale modifica sul mio testo la formattazione va a farsi benedire.
Qualche idea? aiuto? grazie!

Moderazione: Stesso argomento stessa discussione. Per il momento ho unito le due discussioni ma in futuro evita di aprire discussioni multiple.
Inoltre per postare del codice sul forum è opportuno usare gli appositi tag di formattazione. Vedere il regolamento. Grazie!

**davide.arduini** · 29-01-2016, 13:18

Il gradient però ti fà una sfumatura

http://www.w3schools.com/css/css3_gradients.asp

**merovese** · 29-01-2016, 13:20

perché c'è anche il modo di colorare una stessa scritta di 2 colori in maniera netta?

Discussione: colorazione testo

Strumenti discussione

Ricerca discussione

Visualizza

colorazione testo

Css gradient su testo

Permessi di invio