EFecto Texto incrustado

chekspir · #1 (**permalink**) 13/10/2009, 10:09

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.

Daniel Ulczyk · #2 (**permalink**) 13/10/2009, 10:18

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

Código CSS:

Ver original.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#sidebar li.widget ul li a {
border-bottom:1px solid #A2A2A2;
color:#444444;
text-shadow:1px 1px 0 #DDDDDD;
}

mayid · #3 (**permalink**) 13/10/2009, 10:23

Cita:

text-shadow:1px 1px 0 #DDDDDD;

Esto es crossbrowser?

chekspir · #4 (**permalink**) 13/10/2009, 10:24

Wow que rapido excelente... ya lo probe... eso mismo me funciona tambien para el menu cierto?? para los li.

Daniel Ulczyk · #5 (**permalink**) 13/10/2009, 10:38

Cita:

Iniciado por mayid

Esto es crossbrowser?

IE8 no lo soporta, sólo los navegadores basados en WebKit: CSS Text-Shadow in Safari, Opera, Firefox and more

chekspir · #6 (**permalink**) 13/10/2009, 10:47

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.

kseso? · #7 (**permalink**) 13/10/2009, 12:09

Cita:

Iniciado por mayid

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? | Jugando con css</title>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {background: #D7A252;}
#top_1 {
color:#cdcdcd;
font-family:"times New Roman";
font-size:2em;
letter-spacing:0.05em;
margin:0 auto;
position:relative;
text-align:center;
width:100%;
}
#top_2 {
color:#444;
left:-1px;
position:absolute;
text-align:center;
top:-1px;
width:100%;
}
</style>
</head>
<body>
    <div id="top_1">
~~ Texto Simulando Relieve ~~
        <div id="top_2">~~ Texto Simulando Relieve ~~
        </div>
    </div>
</body>
</html>

Un saludo

Daniel Ulczyk · #8 (**permalink**) 13/10/2009, 12:31

Cita:

Iniciado por kseso?

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 ...

kseso? · #9 (**permalink**) 13/10/2009, 12:37

Cita:

Iniciado por Daniel Ulczyk

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