Foros del Web » Creando para Internet » CSS »

Efecto fondo de texto

Estas en el tema de Efecto fondo de texto en el foro de CSS en Foros del Web. Hola Al colocarle fondo al texto con css del tipo "background-color: #000000;" Esete queda de la siguiente manera: Pero me gustaria saber si hay alguna ...
  #1 (permalink)  
Antiguo 18/02/2011, 17:41
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Efecto fondo de texto

Hola

Al colocarle fondo al texto con css del tipo "background-color: #000000;" Esete queda de la siguiente manera:



Pero me gustaria saber si hay alguna forma de hacer que el fondo se adapte al texto de esta manera:

__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 18/02/2011, 18:47
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Efecto fondo de texto

Alguna ayuda por favor!!!!!!!!!!!!!
__________________
Fondos de pantalla
Juegos Gratis
  #3 (permalink)  
Antiguo 18/02/2011, 19:59
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Efecto fondo de texto

Puedes usar una clase CSS:
.fondoNegro{
background:#000;
color:#fff;
}

y usar la etiqueta span:
<p>
<span class="fondoNegro">Probando<br/>efecto<br/>css en texto</span>
</p>

Para eliminar líneas blancas entre renglones puedes jugar con la propiedad line-height.
  #4 (permalink)  
Antiguo 18/02/2011, 21:49
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Efecto fondo de texto

Gracias por tu respuesta sanxuan

El problema es que no puedo dividir las palabras porque son nombres y estos cambian no es siempre el mismo texto.
__________________
Fondos de pantalla
Juegos Gratis
  #5 (permalink)  
Antiguo 19/02/2011, 07:38
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Efecto fondo de texto

Coloqué los saltos de línea con <br/> para simular el texto que indicaste.
Funcionará igual si el párrafo tiene un ancho fijo. En esta ocasión te incluyo el estilo en las etiquetas por abreviar.

<p style="width:85px">
<span style="background:#000; color:#fff">Probando efecto css en texto </span>
</p>
  #6 (permalink)  
Antiguo 19/02/2011, 08:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Efecto fondo de texto

Para poder encontrar una vía, debe entender primero el porqué sucede lo que sucede.
Los párrafos /<p>/ son etiquetas de bloque. Ya sabe lo que eso implica. Ocuparán toda la línea horizontal.
Por lo tanto, aunque las letras no lleguen hasta el final, sí lo hace el párrafo y sus propiedades.

Recordado lo anterior, creo que ya verá por donde ha de buscar.
Hay dos propiedades que puede alterar. Una me he encontrado que en crome falla. La segunda, un poquito menos obvia, es funcional hasta en los ie (el 7 y 8 emulados).
Si no llega a la solucción o encuentra algún escollo, comente y sigo ampliando pistas.
  #7 (permalink)  
Antiguo 19/02/2011, 10:07
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Efecto fondo de texto

Saludos;

Gracias por tu respuesta Kseso?

Dejo mi codigo para que puedan ver y entender lo que quiero. En donde {image_name} seria el texto que quiero que aparezca de la siguiente manera:



Código HTML:
<style type="text/css">
*  {
border-width:	none;
margin:	0;
padding:	0;
}

.over  {
overflow:	hidden;
position:	relative;
width:	304px;
}

.over span.tooltip  {
display:	none;
}

.over:hover span.tooltip  {
background-color:	#000000;
background-position:	;
color:	#FFFFFF;
display:	block;
font-family:	Helvetica;
font-size:	14pt;
font-weight:	bold;
float:	left;
left:	0;
margin-left:	8px;
margin-right:	8px;
margin-top:	8px;
position:	absolute;
text-align:	justify;
top:	0;
width:	150;
z-index:	10;
text-transform: uppercase;
}

body, html  {
height:	100%;
width:	100%;
}
</style>
</head>
<body>
<div class="over">{thumbnail}
<span class="tooltip">{image_name}</span></div>
</body> 
Aqui mi sitio http://www.picalls.com/picalls

Saludos!!
__________________
Fondos de pantalla
Juegos Gratis

Última edición por alvaro0022; 19/02/2011 a las 10:14
  #8 (permalink)  
Antiguo 22/02/2011, 02:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Efecto fondo de texto

Sr. Álvaro, de verdad, no puede ir soltando información relevante por cuentagotas.
De todas formas, la respuesta se la ofrecí en #6:
convierta ese elemento en uno de línea, no de bloque.

Y mis disculpas por el retraso en la respuesta, se me despistó este hilo.

Edito:
Olvídese de todo, por favor, y antes de seguir, valide su sus páginas en una sóla página:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.picalls.com%2 Fpicalls%2F

No lo puedo creer, a no ser que no haya mirado ni una sola vez el código html generado, la de veces que abre y cierra el html, el head y el body.
Si le hago caso al firebug, 21
Comience por una buena limpieza a fondo del código y aproveche a olvidarse de la maquetación en tablas.

Última edición por kseso?; 22/02/2011 a las 03:09

Etiquetas: fondo
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 18:30.