Foros del Web » Creando para Internet » Diseño web »

EFecto Texto incrustado

Estas en el tema de EFecto Texto incrustado en el foro de Diseño web en Foros del Web. Buenas amigos... este tema lo coloco aqui en web general porque no se en que otra seccion podria ir, y busque bastante y no lo ...
  #1 (permalink)  
Antiguo 13/10/2009, 11:09
 
Fecha de Ingreso: mayo-2008
Mensajes: 14
Antigüedad: 9 años, 6 meses
Puntos: 0
EFecto Texto incrustado

Buenas amigos... este tema lo coloco aqui en web general porque no se en que otra seccion podria ir, y busque bastante y no lo encontre asi q lo cree..
Me gustaria hacer en mi web este efecto de texto incrustado, lo se hacer pero con texto en formato imagen pero es mas pesado, no se si es alguna funcion de javascrip o algo por el estilo... pueden ver el efecto en los foros de taringa los titulos de los temas estan como inscrustados..

o en esta web.. que los utilizaron de una manera muy hermosa...

wpbandit.com/demo/edge/

Gracias de antemano.
  #2 (permalink)  
Antiguo 13/10/2009, 11:18
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: EFecto Texto incrustado

Por cierto, el efecto en Taringa es mediante CSS. Aplicando al texto:

Código CSS:
Ver original
  1. .box_txt, .box_txt_perfil_izq, .box_txt_perfil_der {text-shadow:0 1px 0 #CCCCCC;}

Y en Edge, otro tanto:

Código css:
Ver original
  1. #sidebar li.widget ul li a {
  2. border-bottom:1px solid #A2A2A2;
  3. color:#444444;
  4. text-shadow:1px 1px 0 #DDDDDD;
  5. }
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 13/10/2009, 11:23
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: EFecto Texto incrustado

Cita:
text-shadow:1px 1px 0 #DDDDDD;
Esto es crossbrowser?
  #4 (permalink)  
Antiguo 13/10/2009, 11:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 14
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: EFecto Texto incrustado

Wow que rapido excelente... ya lo probe... eso mismo me funciona tambien para el menu cierto?? para los li.
  #5 (permalink)  
Antiguo 13/10/2009, 11:38
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: EFecto Texto incrustado

Cita:
Iniciado por mayid Ver Mensaje
Esto es crossbrowser?
IE8 no lo soporta, sólo los navegadores basados en WebKit: CSS Text-Shadow in Safari, Opera, Firefox and more

__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #6 (permalink)  
Antiguo 13/10/2009, 11:47
 
Fecha de Ingreso: mayo-2008
Mensajes: 14
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: EFecto Texto incrustado

Bueno de por si los IE son una perdida de tiempo... cuando maqueto solo me interesa que se vea bien en los IE mas nunca me ha interesado que se vean los efectos tal cual en mozilla, oera, safari, etc.... los IE son unos dolores de cabeza.. especialmente el 6.. Bueno Gracias hermano.
  #7 (permalink)  
Antiguo 13/10/2009, 13:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: EFecto Texto incrustado

Cita:
Iniciado por mayid Ver Mensaje
Esto es crossbrowser?
Cuando ie sea un navegador lo será

Ahora en serio. Hay otra forma de simular esa incrustación que sí lo es:



Prueba y adapta este código a tus necesidades
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? | Jugando con css</title>
  4.  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; border: 0; padding: 0;}
  7. body {background: #D7A252;}
  8. #top_1 {
  9. color:#cdcdcd;
  10. font-family:"times New Roman";
  11. font-size:2em;
  12. letter-spacing:0.05em;
  13. margin:0 auto;
  14. position:relative;
  15. text-align:center;
  16. width:100%;
  17. }
  18. #top_2 {
  19. color:#444;
  20. left:-1px;
  21. position:absolute;
  22. text-align:center;
  23. top:-1px;
  24. width:100%;
  25. }
  26. </head>
  27.     <div id="top_1">
  28. ~~ Texto Simulando Relieve ~~
  29.         <div id="top_2">~~ Texto Simulando Relieve ~~
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 13/10/2009, 13:31
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: EFecto Texto incrustado

Cita:
Iniciado por kseso? Ver Mensaje
Hay otra forma de simular esa incrustación que sí lo es
Pero en tren de calificar como cross-browser la semántica se va a la ...
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #9 (permalink)  
Antiguo 13/10/2009, 13:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: EFecto Texto incrustado

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
Pero en tren de calificar como cross-browser la semántica se va a la ...
¡Ay, amigo Daniel!
Los que ta tenemos cierta edad aprendimos que no se puede tener todo junto en esta vida
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 20:59.