Foros del Web » Creando para Internet » CSS »

Texto con sombra

Estas en el tema de Texto con sombra en el foro de CSS en Foros del Web. Como puedo hacer que un texto tenga sombra poniedolo en el estilo ??? Grax......
  #1 (permalink)  
Antiguo 19/06/2003, 09:21
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Texto con sombra

Como puedo hacer que un texto tenga sombra poniedolo en el estilo ???

Grax...
__________________
La Pana
  #2 (permalink)  
Antiguo 19/06/2003, 10:05
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
<div style="position: relative; color: #000000; font-style: italic; font-weight: bold; font-size: 22pt;">Texto
<div style="position: absolute; top: -1px; left: -1px; color: #336699;">Texto</div>
</div>
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #3 (permalink)  
Antiguo 19/06/2003, 10:21
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
se puede poner de alguna forma en la hoja de estilos ???
__________________
La Pana
  #4 (permalink)  
Antiguo 19/06/2003, 10:33
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Pues no hay más que trasladar lo mismo a la hoja de estilo y luego usar class.

<html>
<head>
<style type="text/css">
.sombra{
color: #000000;
font-style: italic;
font-weight: bold;
font-size: 22pt;
position: relative;
}
.texto{
color: #336699;
top: -1px;
left: -1px;
position: absolute;

}

</style>
</head>

<body>
<div class="sombra">Texto<div class="texto">Texto</div></div>
</body>
</html>

Realmente lo único importante para crear la sombra es lo que está en negrita .
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!

Última edición por Bravenap; 19/06/2003 a las 10:41
  #5 (permalink)  
Antiguo 19/06/2003, 10:38
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Lo malo es que la pagina esta centrada y no puedo usar layers ya que estos quedan fijo en un punto...

He encontrado los siguientes codigos:

text-shadow: black 3px 3px, yellow -3px -3px
text-shadow: black 3px 3px 2px, yellow -3px -3px

pero funcionan solo para css2...
no se aplicar el css2...

Como se hace ???
__________________
La Pana
  #6 (permalink)  
Antiguo 19/06/2003, 10:45
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
¿Estás seguro de que te quedan fijos en un sitio?
La capa prinicipal está en posición relativa y no está especificada su posición. No tendría por qué quedar fija en ningún punto. La que sí está en posición absoluta es la capa que está dentro, por lo que su posición absoluta está referida a la otra capa, no a la página.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #7 (permalink)  
Antiguo 19/06/2003, 11:22
Avatar de regui  
Fecha de Ingreso: abril-2002
Mensajes: 287
Antigüedad: 15 años, 7 meses
Puntos: 0
Hola ztikmz, si es posible darle sombra a un texto mediante CSS, pon esto en el estilo al que quieras darle sombra.
filter: DropShadow(Color=#000000, OffX=1, OffY=1);
puedes cambarle el color y la posición de la sombra, eso si, siempre aparecerá a 45º.
Otra opción de sombra es:
filter: Shadow(Color=#000000, Direction=135);
pero más que sombra es una especie de movimiento, en el si puedes definir a donde va la sombra, pero no la longitud.
Prueba a ver cual te gusta más.

Se me olviadaba ponerte este:
filter: Blur(Add=yes, Direction=135, Strength=5);
este es parecido al segundo, en el si puedes definir la longitud de la sombra, pero el color es el que le asignes tu al texto.
A ver si alguno de ellos te sirve. Duerte
__________________
"En cuanto a mí, sólo sé que no sé nada"
Sócrates
  #8 (permalink)  
Antiguo 19/06/2003, 12:41
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
gracias a ambos...

quiero usar este codigo:

filter: DropShadow(Color=#000000, OffX=1, OffY=1);

pero como debo poner en la hoja de estilos ??

asi:

.sombra: {
DropShadow: Color=#000000 OffX=1, OffY=1
}
__________________
La Pana
  #9 (permalink)  
Antiguo 19/06/2003, 13:02
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola, ztikma.

Te dejo el enlace a una página donde se explica el filtro que te comenta regui, y algunos más. Te comento que, salvo que yo esté equivocado, solo funcionan en Internet Explorer (no se en que versiones) excepto el filtro Alpha que tiene un equivalente para Netscape.

http://www.csstile.8m.net/

Espero que te ayude. Saludos,
  #10 (permalink)  
Antiguo 19/06/2003, 13:26
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Ahora siiii

Muchas grax JavierB
__________________
La Pana
  #11 (permalink)  
Antiguo 19/06/2003, 14:37
Avatar de regui  
Fecha de Ingreso: abril-2002
Mensajes: 287
Antigüedad: 15 años, 7 meses
Puntos: 0
para ponerlo en el CSS, tienes que ponerlo tal que asi:
.sombra: {
filter: DropShadow(Color=#000000, OffX=1, OffY=1);
}

con el filter: incluido.
En cuanto a lo que dice JavierB, tiene razón solo funcionan para IE , pero es lá única manera de darle sombra a un texto por CSS.
__________________
"En cuanto a mí, sólo sé que no sé nada"
Sócrates
  #12 (permalink)  
Antiguo 20/06/2003, 02:19
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Hola a todos.
De verdad que estoy probando todo esto y a mí no me aparece ninguna sombra por ningún lado. Pero además con ninguna de las tres posibilidades.
Tengo IE 6.0 así que en principio debería funcionar ¿no?

Un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #13 (permalink)  
Antiguo 20/06/2003, 02:25
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
Código:
 _____________________
|                     |
| VAMONOS TODOS A CSS |
|_____________________|
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #14 (permalink)  
Antiguo 20/06/2003, 04:03
Avatar de regui  
Fecha de Ingreso: abril-2002
Mensajes: 287
Antigüedad: 15 años, 7 meses
Puntos: 0
Dices que no te funciona? es raro, yo también tengo IE 6.0 y no me da ningún problema. Prueba con este código a ver?

<html>
<head>
<title>Sombra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.sombra {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006600;
text-decoration: none;
filter: DropShadow(Color=#FF0000, OffX=3, OffY=3);
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="sombra">texto de prueba</td>
</tr>
</table>
</body>
</html>


De exho si no tengo mal entendido solo funciona a partir de IE 5.0
__________________
"En cuanto a mí, sólo sé que no sé nada"
Sócrates
  #15 (permalink)  
Antiguo 20/06/2003, 04:14
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Ahora sí. El caso es que yo lo ponía en la etiqueta DIV y así no rulaba:

<div class="sombra">texto</div>

Gracias.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #16 (permalink)  
Antiguo 20/06/2003, 04:25
Avatar de regui  
Fecha de Ingreso: abril-2002
Mensajes: 287
Antigüedad: 15 años, 7 meses
Puntos: 0
Es curioso que en la etiqueta DVI no funcione, si sabía que si le asignas la clase al body tampoco la coge, aunque si coge las propiedades de fuente tamaño etc... pero la sombra no. No tengo ni idea de porque es asi.
__________________
"En cuanto a mí, sólo sé que no sé nada"
Sócrates
  #17 (permalink)  
Antiguo 20/06/2003, 07:24
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola a todos.

Puede usarse también con un <div> añadiendo al estilo el atributo height:

.sombra {
filter: DropShadow(Color=red, OffX=2, OffY=2); height:1;
}

Espero que os/nos sirva. Saludos,
  #18 (permalink)  
Antiguo 20/06/2003, 07:38
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
¡Curioso, sí señor!
También con width.... si es que esto del internés es, en dos palabras, im-prezionante.

__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #19 (permalink)  
Antiguo 10/03/2005, 03:31
Avatar de Sette  
Fecha de Ingreso: febrero-2002
Mensajes: 1.746
Antigüedad: 15 años, 10 meses
Puntos: 3
y si solo quiero que se muestre cuando estoy encima del texto?
__________________
diseño y programación
http://www.manucastro.es
[email protected]
  #20 (permalink)  
Antiguo 10/03/2005, 04:32
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Para eso tendrías que poner un evento onMouseOver sobre la capa. Más o menos así:

Código:
<div class="" onMouseOver="this.className='sombra'" onMouseOut="this.className=''">texto</div>
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #21 (permalink)  
Antiguo 12/03/2005, 16:40
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

también se puede hacer con CSS, pero usando hover en enlaces. Por supuesto que si se anula el click con JS es lo mismo que un texto.

Letras con borde de otro color

El ejemplo usa las capas para poner un "borde". Para "sombra" es igual, pero más desplazado.

saludos

furoya
  #22 (permalink)  
Antiguo 12/03/2005, 16:48
Avatar de isra.kat.gr  
Fecha de Ingreso: diciembre-2004
Ubicación: Vigo, Pontevedra (españa)
Mensajes: 33
Antigüedad: 13 años
Puntos: 0
pero JavierB, los efectos del enlace q das no funcionan en FireFox!!
__________________
Hay 10 tipos de personas: las que saben binario y las que no.
  #23 (permalink)  
Antiguo 12/03/2005, 18:25
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 4 meses
Puntos: 1
No funciona en firefox porque no es estandar, es una tecnologia de Microsoft limitada a IE
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #24 (permalink)  
Antiguo 13/03/2005, 12:36
Avatar de isra.kat.gr  
Fecha de Ingreso: diciembre-2004
Ubicación: Vigo, Pontevedra (españa)
Mensajes: 33
Antigüedad: 13 años
Puntos: 0
ya suponia... grrr no quiero caer en el anti-microsoft q me caracteriza...
__________________
Hay 10 tipos de personas: las que saben binario y las que no.
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 16:01.