!ADVERTENCIA - En IE no funciona (o al menos a mi) pero vamos, ni lo se ni me importa, se supone que es una herramienta para diseñadores xD
http://www.mediafire.com/?y3b8ma83849hm8a <====DESCARGAR PAQUETE ENTERO AQUÍ
Hace siglos que no posteo, lol.
Bueno, eso, que hoy tenia un poco de tiempo y se me ocurrio hacer esto. Le pones los datos y te da el codigo css que tienes que meter en tu web para que se vea con el borde. Simple.
Aqui los codigos por si alguien solo quiere verlos. Por cierto, si los veis y me podeis dar alguna recomendacion, os lo agradeceria mucho ^^
index.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>texto y borde</title>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- Escrito por RPD(diego9j) para todo el que quiera usarlo, prohibido borrar esta linea !-->
<div id="contenedor">
<div id="titulo_texto">
Texto con borde
</div>
<div id="contenido_b">
<div id="contenido_m">
<a style="font-size:18px;" id="texto">Así quedaría tu texto</a>
</div>
</div>
<div id="botones_b">
<div id="botones_m">
<form id="formulario">
<table>
<tr>
<td colspan="3">
<b>Rellena los datos</b>
</td>
</tr>
<tr>
<td class="nombre">
Tamaño de la letra
</td>
<td class="input">
<input type="text" id="tamano" value="18px" />
</td>
</tr>
<tr>
<td class="nombre">
Color del borde
</td>
<td class="input">
<input type="text" id="color" value="#bbbbbb" />
</td>
</tr>
<tr>
<td class="nombre">
Ancho del borde (no poner el 'px' al final)
</td>
<td class="input">
<input type="text" id="ancho" value="2" />
</td>
</tr>
<tr>
<td class="nombre">
Espacio entre caracteres
</td>
<td class="input">
<input type="text" id="espacio" value="normal" />
</td>
</tr>
</table>
</form>
</div>
</div>
<button id="ir" onclick="todo()">Dale caña!</button>
<div id="css_b">
...
</div>
</div>
</body>
</html> index.js
Código:
<!-- Escrito por RPD(diego9j) para todo el que quiera usarlo, prohibido borrar esta linea !-->
function todo(){
var tamano = document.getElementById('tamano').value;
var color = document.getElementById('color').value;
var ancho = document.getElementById('ancho').value;
var espacio = document.getElementById('espacio').value;
var capa = document.getElementById('texto');
var output = document.getElementById('css_b');
capa.style.fontSize = tamano;
capa.style.letterSpacing = espacio;
var salida;
for(a=1;a<=ancho;a++){
if(a==1){
var salida = '-'+ancho+'px -'+a+'px '+color+',';
}else{
var salida = salida+'-'+ancho+'px -'+a+'px '+color+',';
}
var salida = salida+'-'+a+'px '+ancho+'px '+color+',';
var salida = salida+''+ancho+'px -'+a+'px '+color+',';
var salida = salida+'-'+a+'px -'+ancho+'px '+color+',';
}
for(a=0;a<=ancho;a++){
var salida = salida+'-'+ancho+'px '+a+'px '+color+',';
var salida = salida+''+a+'px '+ancho+'px '+color+',';
var salida = salida+''+ancho+'px '+a+'px '+color+',';
if(a==ancho){
var salida = salida+''+a+'px -'+ancho+'px '+color;
}else{
var salida = salida+''+a+'px -'+ancho+'px '+color+',';
}
}
capa.style.textShadow = salida;
output.innerHTML = '<b>letter-spacing: </b>'+espacio+';<br/><b>font-size: </b>'+tamano+';<br/><b>text-shadow: </b>'+salida+';';
}
index.css
Código:
@charset "utf-8";
/* Escrito por RPD(diego9j) para todo el que quiera usarlo, prohibido borrar esta linea */
@font-face {
font-family: myriad;
src: url('myriad.otf');
}
#contenedor{
width:700px;
margin:40px auto 0px auto;
}
#titulo_texto{
width:700px;
text-shadow:-3px -3px #CCC, -3px 3px #CCC, 3px -3px #CCC, -3px -3px #CCC, -3px -2px #CCC, -2px 3px #CCC, 3px -2px #CCC, -2px -3px #CCC, -3px -1px #CCC, -1px 3px #CCC, 3px -1px #CCC, -1px -3px #CCC, -3px 0px #CCC, 0px 3px #CCC, 3px 0px #CCC, 0px -3px #CCC, -3px 1px #CCC, 1px 3px #CCC, 3px 1px #CCC, 1px -3px #CCC, -3px 2px #CCC, 2px 3px #CCC, 3px 2px #CCC, 2px -3px #CCC, -3px 3px #CCC, 3px 3px #CCC, 3px 3px #CCC, 3px -3px #CCC;
color:#666666;
font-size:70px;
font-family: myriad;
text-align:center;
letter-spacing:10px;
}
#contenido_b{
width:670px;
background-color:#FFF;
border-style:solid;
border-width:15px;
border-color:#DDD;
border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
}
#botones_b{
width:670px;
background-color:#CCC;
border-style:solid;
border-width:0px 15px 15px 15px;
border-color:#DDD;
}
#css_b{
}
#contenido_m{
margin:20px;
text-align:center;
}
#botones_m{
margin:0px 10px;
}
#css_b{
font-family:"Courier New", Courier, monospace;
border-style:dashed;
border-width:0px 3px 3px 3px;
border-color:#999999;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px;
padding:20px;
}
.nombre, .input{
width:350px;
}
input{
width:100%;
border-style:solid;
}
button{
border-width:0px;
margin:0px;
padding:0px;
height:30px;
width:100%;
background-color:#999999;
cursor:pointer;
font-family: myriad;
font-size:18px;
line-height:30px;
color:#333333;
}