[CSS/HTML]Text with a border?

[.:LastBreath:.]

Is it possible to make text have borders around them in css or html? For example I have black color text, and the border or outline is blue for the text. Hope I make sense. Thanks.

 

[Joser]

You mean like a border for the text box?

Or a border like an outline on the text?

 

[.:LastBreath:.]

Border outline on the text.

 

[aGhostt]

You have the css property text-stroke , however this only works in Safari 3 for now.

Tho, think a little harder and understand what a stroke is.
You need multiple text layers with some offsets. However, if you are smart, you should write a jquery for that.

 

[.:LastBreath:.]

Ahh Wanna Help Me make something like that?

 

[.:LastBreath:.]

Bump Helps.

 

[onemorejosh]

wtf? Keep it simple

<html><head><title>yay</title></head><body>

<span style="border: 1px solid black">Test</span>

</body></html>


("Test" is in a black border)

 

[aGhostt]

Euhm, @onemorejosh - he meant a stroke, like this:

http://indesignsecrets.com/wp-content/uploads/2008/10/textstroke1.png

This is a way I'd do it:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>
    <title>Stroked text</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="js.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<p id="text">My text goes here</p>
	<script type="text/javascript" charset="utf-8">
		makeStroke('#text', '#FF00FF');
	</script>
</body>
</html>

style.css:

p {
	position: relative;
	font-size: 29px;
}

span.rawtext { position:absolute; top:0px; left:0px;}
span.stroke1 { position:absolute; top:-1px; left:-1px;}
span.stroke2 { position:absolute; top:1px; left:1px;}
span.stroke3 { position:absolute; top:-1px; left:1px;}
span.stroke4 { position:absolute; top:1px; left:-1px;}
span.stroke5 { position:absolute; top:2px; left:0px;}
span.stroke6 { position:absolute; top:-2px; left:0px;}
span.stroke7 { position:absolute; top:0px; left:2px;}
span.stroke8 { position:absolute; top:0px; left:-2px;}

js:

function makeStroke(obj, color){
	var a = $(obj).html();
	$(obj).html('');
	for (i=1; i<=8; i++){
		$('<span class="stroke'+i+'">'+a+'</span>').appendTo($(obj));
		$('span.stroke'+i).css('color',color)
	}
	$('<span class="rawtext">'+ a + '</span>').appendTo($(obj));
}

This is using a fix border size, however, if you get this code, you can easily make it a variable, and apply the css style in the jquery instead of making it fixed.

 

[.:LastBreath:.]

Thanks but this wont work for some reason.

 

[foxx]

maybe because you don't have jquery

 

[SaintsIan]

Correct me if I am wrong, but for Google Chrome or Safari, you can achieve this through CSS3:

-webkit-text-stroke

For other browsers, you may have to use JavaScript to achieve this. If it's not important, I would just create an image for this instead. Won't make much difference considering the work done required on the JavaScript side.

 

[aGhostt]

maybe because you don't have jquery

Sorry I forgot. Place this in the header:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>