Foros del Web » Creando para Internet » CSS »

Título en dos colores con css

Estas en el tema de Título en dos colores con css en el foro de CSS en Foros del Web. Hola a [email protected] Resulta que tengo éste titulo en mis páginas <h3>Titulo página</h3> y quiero que desde los css ponga a "Título" de un color ...
  #1 (permalink)  
Antiguo 27/09/2010, 11:58
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 15 años, 1 mes
Puntos: 1
Exclamación Título en dos colores con css

Hola a [email protected]

Resulta que tengo éste titulo en mis páginas

<h3>Titulo página</h3>

y quiero que desde los css ponga a "Título" de un color y a "página" de otro... algo como:

Titulo página

En el css sólo hago relación al h3

Código HTML:
div.module h3 {
     color: #f70a0a;
}
Alguien tiene idea de como hago para que desde los css ponga mi segunda palabra o las que sigan de otro color?

  #2 (permalink)  
Antiguo 27/09/2010, 12:50
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Título en dos colores con css

Cita:
Iniciado por Salome Ver Mensaje
Alguien tiene idea de como hago para que desde los css ponga mi segunda palabra o las que sigan de otro color?
Podés utilizar la etiqueta span en la segunda palabra

Código HTML:
Ver original
  1. <h3>Titulo <span>página</span></h3>

Y entonces declará el color necesario
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 27/09/2010, 12:53
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Salome

Muevo tu tema al foro de CSS desde Competencias CSS.

Saludos,
  #4 (permalink)  
Antiguo 27/09/2010, 13:02
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Título en dos colores con css

Hola Salome,

investiga sobre el uso y aplicación de clases css

CSS:

Código CSS:
Ver original
  1. .color1{color:#fb0000;}
  2. .color2{color:#eaeaea;}

y la estructura html quedari algo asi

Código HTML:
Ver original
  1. <h3 class="Color1">TITULO</h3>&nbsp;<h3 class="color2">PAGINA</h3>

Saludos DTB
  #5 (permalink)  
Antiguo 27/09/2010, 13:05
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 15 años, 1 mes
Puntos: 1
Exclamación Respuesta: Título en dos colores con css

Bueno, creo que me faltó claridad en el post...

Resulta que es un título que viene de base de datos, no tengo como dividirlo, o traerlo divido, tampoco quiero hacerlo desde el código, por esto pregunto si se puede desde el css, de alguna forma decirle que sólo la primer palabra sin que sea un span.

Ahora, no puedo poner un span desde el css pues una idea "loca"
  #6 (permalink)  
Antiguo 27/09/2010, 13:12
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Título en dos colores con css

Hola Salome (no se si lleva tilde o no así que ahí mejor lo dejo XD)...
con css que yo sepa no se puede ya que css solo significa Cascading Style Sheets...

pero lo que puedes hacer es encontrar el carácter con espacio vació dentro de tu cadena a devolver y así contar el numero de palabras , extraer palabras para luego concatenarlas y poder asignarles distintas clases a cada una...

Saludos DTB
  #7 (permalink)  
Antiguo 27/09/2010, 13:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Título en dos colores con css

otra alternativa seria usar un poco jquery si no puedes agregar desde el html el <span>
Código Javascript:
Ver original
  1. $(function(){
  2.    
  3. $("h2").html(function(i,text){
  4.     return text.replace(/\w+\s/, function(match){
  5.         return '<span class="otrocolor">' + match + '</span>';
  6.     });
  7. });
  8.    
  9. });

PD: si usaras jquery solo para hacer esto me parece una tonteria pero bueno de poder se puede ya que no hay un pseudo selector CSS para la primera palabra, (para la primera letra si)

Etiquetas: colores, dos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:26.