Foros del Web » Creando para Internet » CSS »

Letras con borde de otro color

Estas en el tema de Letras con borde de otro color en el foro de CSS en Foros del Web. hola! cómo puedo hacer que una serie de palabras de un color (naranja, x ej) tengan un borde negro? lo he intentado como sigue... pero ...
  #1 (permalink)  
Antiguo 23/02/2005, 07:04
 
Fecha de Ingreso: enero-2005
Mensajes: 34
Antigüedad: 12 años, 10 meses
Puntos: 1
Letras con borde de otro color

hola!

cómo puedo hacer que una serie de palabras de un color (naranja, x ej) tengan un borde negro?

lo he intentado como sigue... pero no funciona

en el archivo css tengo...
#capaCabecera span{
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
font-variant: normal;
color: #FF9900;
filter: Glow(Color=#333333, Strength=3);
}

el resto de opciones las formatea bien, pero el filtro no lo reconoce o está mal puesto. Lo he probado con el Mozilla Firefox 1.0 y el IExplorer 6.0 SP1. En ninguno de los 2 funciona.

alguna sugerencia?
  #2 (permalink)  
Antiguo 23/02/2005, 08:16
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
no se si sea un filtro de microsoft, pero por lo menos te puedo decir que ese filter: no es parte de css, por lo que no te va a funcionar en todos los navegadores.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 24/02/2005, 05:56
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 12 años, 10 meses
Puntos: 1
Efectivamente lo de los filtros no me suena a mi que sea estandar. En cualquier caso ¿a que tipo de borde te refieres? no sera un simple border: 1px solid #000000?

Un saludo

Zerjillo
  #4 (permalink)  
Antiguo 24/02/2005, 09:59
 
Fecha de Ingreso: diciembre-2004
Ubicación: Malaga
Mensajes: 115
Antigüedad: 13 años
Puntos: 0
Te envio una direccion donde te explican como usar distintos filtros en las hojas de estilo css.
http://www.csstile.8m.net/
__________________
Directorio de Fotografía
  #5 (permalink)  
Antiguo 24/02/2005, 17:06
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
utilizacion de filtros en css

.

tienes que añadirle un height, aunque sea cero .

#capaCabecera span{
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
font-variant: normal;
color: #FF9900;
filter: Glow(Color=#333333, Strength=3);
height:0;}

.
  #6 (permalink)  
Antiguo 28/02/2005, 10:13
 
Fecha de Ingreso: enero-2005
Mensajes: 34
Antigüedad: 12 años, 10 meses
Puntos: 1
hola a todos...

lo que deseo hacer es un borde de las letras NO una caja de borde. Por eso había probado con el filtro.

Pero no consigo que funcione, ni con el IExplorer. Por otro ladohe intentado lo que me han dicho. Por otra parte quiero hacerlo estándar... y el uso de los filtros no lo es. Entonces, ¿esto no se puede hacer con los estilos CSS siguiendo las recomendaciones del W3C?

un saludo y gracias por sus respuestas
  #7 (permalink)  
Antiguo 28/02/2005, 10:29
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 13 años, 1 mes
Puntos: 0
La unica opcion que se me ocurre... es poner el mismo texto en background, dos pixeles mas grande, y con menos separacion de texto... eso crearia un efecto de border, pero no existe la propiedad border para font, eso tenelo claro!

En este site hay algo.. apenas similar, pero creo que te puede servir de base.

http://www.stunicholls.myby.co.uk/menus/menuten.html

Exitos!

Y sino... libreria GD en PHP, pero no creo que te interese llegar a eso...
  #8 (permalink)  
Antiguo 28/02/2005, 11:38
 
Fecha de Ingreso: diciembre-2004
Ubicación: Malaga
Mensajes: 115
Antigüedad: 13 años
Puntos: 0
El filtro Glow te permite definir un borde alrededor de las letras con el color que quieras. Mira este ejemplo, tal vez te valga.
http://www.csstile.8m.net/glowex.htm
__________________
Directorio de Fotografía
  #9 (permalink)  
Antiguo 28/02/2005, 13:03
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

hola de nuevo .

Ya te comente antes que para que funcione debes ponerle un heigth ,sino no funcionara ,no me preguntes porque . Ademas creo que solo funciona con IE .

.
  #10 (permalink)  
Antiguo 04/03/2005, 14:21
(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 :

no es solamente con height, programeitor, también es con width position:absolute writing-mode:tb-lr ...; y sí, es propietario de IE. A partir de 5.5 se puede escribir

Código HTML:
 {filter: progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=5); }
La opción de n2h está muy buena. La estuve probando y no estoy seguro, pero creo que ésto debe funcionar en todos los navegadores

Código HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> TEXTO CON BORDE.</title>
<style type="text/css">

body{font:normal normal 100%/200% "times new roman",serif}

#contenedor {position:relative; height:3em; background:#f00}

#conBorde {position:absolute; top:0px; margin:5px;}

font{font-family:"serif"; font-size:2em; font-weight:900;}

#conBorde font .txt {display:inline; position:relative; top:0; left:0;}

#conBorde font .arr {display:inline; -moz-user-select:none; position:absolute; top:-1px; left:-1px; color:#0f0;}

#conBorde font .aba {display:inline; -moz-user-select:none; position:absolute; top:1px; left:1px; color:#0f0;}

</style>
</head>

<body>

<h2>Texto con borde sin filtro glow.</h2>

<div id="contenedor">
<div id="conBorde">
<font>
<span class="arr">QWERTYUIOP</span>
<span class="aba">QWERTYUIOP</span> 
<span class="txt">QWERTYUIOP</span>
QWERTYUIOP
</font>
</div>
</div>

</body>
</html> 
saludos

furoya

Última edición por furoya; 05/06/2007 a las 13:47 Razón: actualizarlo a Firefox
  #11 (permalink)  
Antiguo 13/03/2005, 09:13
(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 de nuevo :

Estuve trabajando en algunos detalles (p.e. el salto de línea) para mejorar el código anterior. Aún tengo problemas por resolver, como el line-height o el uso de em. Este último se arreglaría fácil: como el navegador mide basicamente en pixeles, convertimos todo a px y nos evitamos cualquier desfasaje. Pero el zoom de texto de IE no los modifica, y si la palabra destacada con borde está en medio de un texto largo, no debemos limitar al usuario a un tamaño fijo de caracteres.

Por alguna razón, al usar pt en el body el zoom tampoco funciona, así que 'resolví' el asuno con "%". en IE, el porcentaje se toma evidentemente de los valores por omisión; pero en otros ¿por ciento de qué sería?, ¿es válido?, ¿o es mejor dejarlo sin nada?, entonces ¿em de qué sería?.

Les dejo mis dudas existenciales junto con el código mejorado

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> TEXTO CON BORDE.</title>
<style type="text/css">
body{font-size:100%; font-family:"times new roman", serif;}

#contenedor {position:relative;}

#texto {position:absolute;  height:3em; color:#000; background:#f00; padding:5px; font-weight:900; font-size:2em;}

#texto font {position:relative; top:0; left:0; z-index:0; font-weight:900;  font-size:1em;}

#texto .ante {font-size:0;}

#texto font .arrIzq {display:inline; position:absolute; top:-1px; left:-1px; z-index:-1; color:#0f0; }

#texto font .abaDer {display:inline; position:absolute; top:+1px; left:+1px; z-index:-1; color:#0f0; }

</style>
</head>

<body>
<h2>Texto con borde sin filtro glow.</h2>

<div id="contenedor">
<div id="texto">

1234
<font>QWERTYUIOP<span class="arrIzq">QWERTYUIOP</span>
<span class="abaDer">QWERTYUIOP</span></font> <br />
<span class="ante"> </span>
<font>ASDFGHJKL<span class="arrIzq">ASDFGHJKL</span>
<span class="abaDer">ASDFGHJKL</span></font>
ZXCV

</div>
</div>


</body>
</html>
Tenía hecho otro que usaba 4 capas para rodear el texto, lo que permite "aumentar el grosor del borde" en más de 1px; pero lo perdí en un cambio de máquina. No es tan grave porque no era más que otra versión usando el mismo criterio de las anteriores.
Otra forma de hacerlo está en

Texto con sombra

esta vez para crear un efecto de sombra.

saludos

furoya
  #12 (permalink)  
Antiguo 24/10/2010, 12:06
 
Fecha de Ingreso: septiembre-2008
Mensajes: 242
Antigüedad: 9 años, 3 meses
Puntos: 3
Respuesta: Letras con borde de otro color

Perdon por revivir un tema tan viejo pero andaba buscando algo asi y me tope con este post de foros del web, el cual soy miembro. quiero decirles que lo encontre bueno y me encamine muy rapido con esto, queda un tanto feo el que exponen uds, lo que le agrege fueron 2 capas mas con las cordenadas faltantes para que se vea totalmente bordeado:

Código:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> TEXTO CON BORDE.</title>
<style type="text/css">
body{font:normal normal 100%/200% "times new roman",serif}
#contenedor {position:relative; height:3em; background:#f00}
#conBorde {position:absolute; top:0px; margin:5px;}
font{font-family:"serif"; font-size:2em; font-weight:900;}
#conBorde font .txt {display:inline; position:relative; top:0; left:0;}
#conBorde font .arr {display:inline; -moz-user-select:none; position:absolute; top:1px; left:1px; color:#0f0; }
#conBorde font .aba {display:inline; -moz-user-select:none; position:absolute; top:1px; left:-1px; color:#0f0; }
#conBorde font .arr2 {display:inline; -moz-user-select:none; position:absolute; top:-1px; left:1px; color:#0f0; }
#conBorde font .aba2 {display:inline; -moz-user-select:none; position:absolute; top:-1px; left:-1px; color:#0f0; }
</style>
</head>
<body>

<h2>Texto con borde sin filtro glow.</h2>

<div id="contenedor">
<div id="conBorde">
<font>
<span class="arr"><b>QWERTYUIOP</b></span>
<span class="aba"><b>QWERTYUIOP</b></span> 
<span class="arr2"><b>QWERTYUIOP</b></span>
<span class="aba2"><b>QWERTYUIOP</b></span> 
<span class="txt">QWERTYUIOP</span>
QWERTYUIOP
</font>
</div>
</div>

</body>
</html>
  #13 (permalink)  
Antiguo 28/10/2010, 16:04
(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
Respuesta: Letras con borde de otro color

Estas cosas las inventábamos porque el CSS no era tan compatible como ahora ... (je!).

El único navegador que ponía un borde de texto era Internet Explorer. Pero ya hay una propuesta de CSS para estandarizar el efecto

Código:
<style type="text/css"> 
div { position: relative; height: 40px; }
.bordeTexto { position: absolute; font-size:40px; 
font-weight:bold; -webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; -webkit-text-stroke-width: 2px; 
filter:glow(color=red, strength=5); 
}
</style>
<div><span class="bordeTexto">Foros del Web.</span></div>



<p><span style="text-shadow: 0 0 1ex red; 
font: bold 40px arial, helvetica sans-serif;">
Foros del Web.
</p>

Como de momento no es totalmente compatible, el engendro que pusimos todavía vale


Es verdad eso de que, tal como está planteado, las 2 capas simulando un borde no se ven muy bien. Especialmente si queremos hacerlo "más grueso".
El problema está en que para usar CSS, 4 capas es demasiado. Con ese criterio podemos meter 40 capas, y seguro se va a ver mucho mejor. Entonces descubrimos que nos conviene hacerlo con JS; más que nada porque lo aprovechamos para animaciones de mayor o menor complejidad, según las ganas que tengamos de trabajar.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>DAME FUEGO.</title>
<script type="text/javascript">
var gruesoBorde = 4;
var bravo = gruesoBorde * 2;
var charly = (2*3.141592/360);
var contenido, anima, tiempo;

function arde() {
contenido = document.getElementById("texto").innerHTML;

for(n=0; n<360; n+=9){
var verde = (Math.floor(Math.random() * 240) + 16).toString(16);
x=Math.floor((bravo)*Math.cos(charly*n)) + bravo;
y=Math.floor((bravo)*Math.sin(charly*n));
document.getElementById("texto").innerHTML += 
'<div class="semitrans" style="color:#ff'+verde+'00; left:'
+(gruesoBorde+x)+'px; top:'+(gruesoBorde+y)+'px">'
+contenido+'</div>';
}
document.getElementById("texto").innerHTML += 
'<div onmouseover="arde2()" onmouseout="clearTimeout(tiempo)" '
+'onclick="alert(\'FUEGO\')" style="color:black; position:absolute; left:'
+(gruesoBorde * 2.5)+'px; top:'+(gruesoBorde * 1.8)+'px">'
+contenido+'</div>';

}

function arde2(){
var fuego = document.getElementById("texto");
for (f=0; f<40; f++){
var verde = (Math.floor(Math.random() * 240) + 16).toString(16);

fuego.getElementsByTagName("div")[f].style.color = "#ff" +verde+ "00";
}

tiempo = setTimeout("arde2()", 200)
}

onload = arde;
</script>

<style type="text/css">
body {background: silver; }
#texto { font: 900 30px arial, helvetica, sans-serif; 
color: black; position:relative; background-color: black; 
height: 1.5em; cursor: pointer; width: 9em; }
.semitrans {position:absolute; filter: alpha(opacity=35); 
opacity: .35;}
</style>
</head>
<body>
<h2>Texto ardiendo.</h2>


<div id="texto">
FOROS del WEB</div>
Puntero en el texto para animar.

</body>
</html>

Para ampliar detalles deberíamos ir al Foro de Javascript, aunque a mí no me parece mal que hayas resucitado este viejo tema. Si hubieses puesto una güevada, un código "brillante" que no funciona, o repetido lo que ya se dijo y/o se superó, entonces habría que banearte.

Pero es cierto. Taan, taan bien no se veía.

Efecto borroso nublado o desenfocado (sin filter:blur() )

Última edición por furoya; 12/11/2010 a las 14:11 Razón: mejoré el ejemplo.
  #14 (permalink)  
Antiguo 12/11/2010, 14:13
(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
Respuesta: Letras con borde de otro color

No sé si valía la pena volver por esto, pero no quiero que el día de mañana alguien me reclame por 'insistir en que lean los mensajes antes de responder', diciendo que yo mismo no lo hago.
En realidad sí vi que AlvaroX había descubierto justamente ese detalle que mencioné en el post anterior : con 4 —o más— capas se hace un borde mejor que con 2, pero como perdí el código, ya no lo puse; no me pareció que tomarme el trabajo de hacerlo de nuevo valiese la pena.

A él sí le correspondía hacer algún comentario al respecto. Bueno, en verdad no era su obligación, pero cuando escribí el mensaje lo mismo metí alguna alusión, y después me arrepentí y la borré. El asunto no es serio, ni grave, ni importante. Y yo quedaba como el mismo viejo amargo, resentido y malaonda de siempre. Tampoco valía la pena.

Como dije al principio, encima dudo si la vale este descargo, por eso aprovecho la visita para mejorar el ejemplo anterior, que no era muy eficiente y se parecía al de

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() ) #10

que como verán nunca optimicé.

Ahora por el mismo precio, entrego un segundo ejemplo —muy raro— que solamente funciona en la familia Mozilla

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>CARACTERES CON BORDE DE CARACTERES.</title>
<script type="text/javascript">
function letras(){
var caras = "";
var texto = "F d W"
var alfa = document.getElementById("bordeado");

while (caras.length < 180){
caras = caras + "☻";
}
 
var ancho = alfa.width;
var alto = alfa.height;
var efecto = alfa.getContext('2d');
efecto.fillStyle = '#000000';
efecto.fillRect(0, 0, ancho, alto);
efecto.save();
efecto.translate(10, alto*0.9);
efecto.mozTextStyle = '900 270px arial, helvetica, sans-serif';
efecto.mozPathText(texto);
efecto.fillStyle = '#999999';
efecto.fill();
efecto.fillStyle = '#ffff00';
efecto.mozTextStyle = '24px "arial unicode ms", "lucida sans unicode", "ms mincho", sans-serif';
efecto.mozTextAlongPath(caras, false);
efecto.restore();
}

onload = letras;
</script>

<style>
body {background: #666666; text-align: center; }
h2 {text-align: left; }
</style>
</head><body>
<h2>Borde con texto. (Para Mozilla)</h2>

<canvas id="bordeado" width="760" height="250"></canvas>

</body></html>
Crea un borde hecho con caracteres, y convierte todo a imagen (si le hacen un click con el botón secundario del ratón la pueden copiar o guardar).
Sé que no elegí el mejor caracter. Como el canvas lo rota para seguir el contorno de las letras, a veces la carita se ve deformada por el desplazamiento de pixeles, y termina guiñando un ojo o haciendo una mueca de fastidio. Insisto en que el efecto es una curiosidad, no creo que ningún diseñador lo use para nada. pero si le encuentran utilidad, me avisan.
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 04:37.