Foros del Web » Creando para Internet » CSS »

Como hacer esto con css

Estas en el tema de Como hacer esto con css en el foro de CSS en Foros del Web. Tengo la siguiente duda como hacer esto con css, me refiero al efecto en el undido del texto, gracias, por su valiosa ayuda Que sea ...
  #1 (permalink)  
Antiguo 28/12/2009, 12:16
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Como hacer esto con css

Tengo la siguiente duda como hacer esto con css, me refiero al efecto en el undido del texto, gracias, por su valiosa ayuda

Que sea compatible con ie 6.0,mozila y demas, e estado investigando pero veo que text-shadow no es compatible todavia con ie, con mozila si pero hay que utilizar el propio estandar de mozila, saludos y gracias
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
  #2 (permalink)  
Antiguo 28/12/2009, 13:42
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Como hacer esto con css

Pues lo único viable es utilizar imágenes o alguna técnica quizás con javascript
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 28/12/2009, 16:19
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Como hacer esto con css

Buscando un poco por la Web (exactamente Google) pues encontré un artículo de Desarrollo Web bastante bueno, lo podrías mirar en esta dirección.

Si lo leemos, sabremos que el atributo inset crea el relieve, leamos lo que dice del border inset:

Cita:
Iniciado por Desarrollo Web
Borde inset (relieve hacia dentro):
Crea un borde con una imitación de biselado, como si estuviera hundido. El efecto de este borde se ve mejor si el elemento que está bordeando tiene un color de fondo parecido al color de borde.
¿Lo que usted desea verdad? Para estar mas seguro mirese esta lista de ejemplos.

El codigo es bien sencillo, solo hay que agregarle inset a tu border, mira:

Código CSS:
Ver original
  1. .prueba {
  2. border: 10px inset ;
  3. }

¿Sencillo verdad?

Suerte

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #4 (permalink)  
Antiguo 28/12/2009, 16:39
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Como hacer esto con css

Hola:

Distriker, creo lo que necesita MarkAnt0n es la sombra de las letras no el borde del recuadro, pero igual me equivoco.

Saludos.


Última edición por jomaruro; 29/12/2009 a las 15:47
  #5 (permalink)  
Antiguo 28/12/2009, 17:16
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Como hacer esto con css

Pues si fuese eso, entonces ya me he quedado en blanco, aunque se podría buscar en Google. De todas formas, si eso, la forma mas sencilla pienso que es la de Hades.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #6 (permalink)  
Antiguo 08/01/2010, 14:19
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Respuesta: Como hacer esto con css

gracias comunidd por contstar, fue una largas vacacines estoy de vuelta, pues si lo que quiero es la sombra del texto sin utilizar los filtro de ie gracias por su ayuda
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
  #7 (permalink)  
Antiguo 08/01/2010, 15:07
Avatar de ChuckyScript  
Fecha de Ingreso: enero-2010
Ubicación: Zvoshita
Mensajes: 9
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Como hacer esto con css

Hola :)
Bueno en mi opinion, se me haria mas facil pasar el texto a un editor de imagenes como GIMP, y colocar sombra al texto :D Creo que es una solucion rapida y efectiva despues de todo, si no carga la imagen tenemos el atributo alt=""
Espero te sirva es una posible solucion, lo que muestras tiene pinta de imagen jeje bueno eso me parece
  #8 (permalink)  
Antiguo 08/01/2010, 15:15
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Como hacer esto con css

Prueba con esto:

CSS
Cita:
@charset "utf-8";
/* CSS Document */

.texto {
margin-top:-24px;
color:#FF6600;
font-size:20px;
font-family:Verdana;
}
.sombra {
margin-top:2px;
margin-left:2px;
color:#999999;
font-size:20px;
font-family:Verdana;
z-index:1;
}
HTML

Cita:
<DIV ALIGN="CENTER" CLASS="sombra">Prueba de texto sombreado</DIV>
<DIV ALIGN="CENTER" CLASS="texto">Prueba de texto sombreado</DIV>
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #9 (permalink)  
Antiguo 08/01/2010, 15:32
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Respuesta: Como hacer esto con css

gracias loncho_rojas, es una buena alternativa, gracias, al parecer no hay otra mas buena, estuve investigando, aprovechando, una duda, utilizar los filtros para ie 6.0, es ir en contra de las reglas de css de w3c¿?
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
  #10 (permalink)  
Antiguo 08/01/2010, 15:37
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Como hacer esto con css

Todo lo que tenga que ver con filtros (por lo general), intenta romper el funcionamiento normal de los navegadores.. es decir, que los navegadores estan preparados para recibir ciertos codigos e interpretarlos, y por lo general, los filtros de los que hablas crean "cierto engaño" (por llamarlo de alguna forma) para que el explorador lea BURRITOS en lugar de TACOS... por eso estoy en un 99,9% que los filtros infringen alguna regla de la 3W.

Ese 0,1% indica que no soy dueño de la razon, o tal vez no estamos hablando de lo mismo.

De todas formas, no se porque preocuparse por el IE 6.0... es como querer diseñar para NETSCAPE 1.0... creo que dentro de un tiempo quedara obsoleto.
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #11 (permalink)  
Antiguo 08/01/2010, 15:48
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Respuesta: Como hacer esto con css

gracias locho_rojas, si creo tambien que en poco tiempo quedara obsoleto, jajaja, lo unico para lo que sirve ie 6.0 es para bajar firefox, saludos
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
  #12 (permalink)  
Antiguo 08/01/2010, 16:11
Avatar de ChuckyScript  
Fecha de Ingreso: enero-2010
Ubicación: Zvoshita
Mensajes: 9
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Como hacer esto con css

Cita:
Iniciado por mark_ant0n Ver Mensaje
gracias locho_rojas, si creo tambien que en poco tiempo quedara obsoleto, jajaja, lo unico para lo que sirve ie 6.0 es para bajar firefox, saludos
Y para dañarte el dia jaja Eso mientras win xp siga vivo...
  #13 (permalink)  
Antiguo 08/01/2010, 16:14
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Como hacer esto con css

hize este codigo aver que tal te va

Código HTML:
Ver original
  1. <div style="width:200px;height:50px;background:#999999;position:relative"><br />
  2.     <div style="color:#ffffff;font-weight:bold;font-size:16px;position:absolute;left:19px;top:17px;">20 Videos Musicales 3</div>
  3.     <div style="color:#000000;font-weight:bold;font-size:16px;position:absolute;left:20px;top:15px;">20 Videos Musicales 3</div>
  4. </div>

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #14 (permalink)  
Antiguo 08/01/2010, 16:37
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Respuesta: Como hacer esto con css

gracias masterojitos, si solo modifique el top: a 16 para que sea menos la distancia, gracias y saludos
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
  #15 (permalink)  
Antiguo 08/01/2010, 16:41
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Respuesta: Como hacer esto con css

Cita:
Iniciado por ChuckyScript Ver Mensaje
Hola :)
Bueno en mi opinion, se me haria mas facil pasar el texto a un editor de imagenes como GIMP, y colocar sombra al texto :D Creo que es una solucion rapida y efectiva despues de todo, si no carga la imagen tenemos el atributo alt=""
Espero te sirva es una posible solucion, lo que muestras tiene pinta de imagen jeje bueno eso me parece
Lo que pasa es que el texto se genera dinamicamente algo como esto
Código PHP:
Ver original
  1. echo"<div class='titulo'>".$titulo."</div>";
gracias y saludos
__________________
"Diseño de software a la medida"

http://www.sadhoc.com
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 08:31.