News:

LVCS.NET offers low cost domain registration services.

Main Menu

CSS wont' work! Damn stroke attribute

Started by sixthcrusifix, December 07, 2005, 09:10:09 PM

Previous topic - Next topic

sixthcrusifix

I have tried using:

filter:glow(color=000000;strength=4);

(maybe not that exactly but it was the right syntax, I got it off of a CSS website

And I've tried this:

stroke:000000;stroke-weight:0.3px;


And on Mozilla and IE niether of them work at all! I just want me damed text to have stroke so that I can see it next to my complicated background. (The reason is because a little bit of the text dissapears in a black spot)


Why aren't these working??? here's my style.css file if you need it:

Quote
<style type="text/CSS">
BODY {font-family:Century Gothic Bold;font-size:35px;font-weight:bold;color:ffffff;scrollbar-face-color:009800;background-image:url('BG_TEMP.jpg'); background-attachment:fixed;background-repeat:no-repeat;background-position:center;}
.ttl {color:af9090;font-size:25px;font-family:Century Gothic Bold;font-weight:bold;}
.area {background-color:cf5544;}
.title {color:00ff00;text-decoration:underline;font-size:30px;font-family:Century Gothic; }
.content {color:3333df;text-decoration:none;font-size:25px;}
A:link {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:dd3333}
A:hover {color:000000;text-decoration:underline;font-size:17px;font-family:Century Gothic Bold;background-color:ffff00}
A:active {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:000000}
A:visited {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:ff7878}
.COPYINFO {color:000000; text-align: center; font-size:12px;font-family:Century Gothic;stroke:#000000;stroke-width:1}
TABLE {border-color:af7500;}
TD {border-color:af7500}
.button {background-color:df9800;border-color:984511}

</style>
Visite me website at http://www.sixthcrusifix.com

webzone (archived)

filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?

sixthcrusifix

#2
Quote from: webzone on December 07, 2005, 09:36:03 PM
filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?

No, I want teh text to be outlines in a different color. like glow but solid, I thought that would be a basic funtion of CSS.


And even worse I just got this:

text-shadow:ffffff,3px,3px,3px;


from W3.org and it didn't work either! They should be kicked in the ass for giving me crap that doesn't work! What the hell!?
Visite me website at http://www.sixthcrusifix.com

webzone (archived)

Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?

sixthcrusifix

Quote from: webzone on December 07, 2005, 10:48:28 PM
Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?

a line around it, outline. but I can't find that either.

And damn them! Microsoft and Mozilla need to get off their ass in implement it! Shadow would be cool too.
Visite me website at http://www.sixthcrusifix.com

webzone (archived)

A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;

Ben

the problem with the "world wide web" is that coding standards don't make it world wide.

Yeah, is border what you're talking about, or are you looking for something differant?
--Ben
Ben@freepgs.com

sixthcrusifix

Quote from: webzone on December 07, 2005, 10:56:38 PM
A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;

no no no no no no no my loves, my dears my darlings. What I'm looking for is called a stroke in technical terms. Lemmie open photoshop and give you an image. I want to type in black text and get this:





That is black text with a red stroke (Stroke, border, outline -whatever you wanna call it)

Not trying to sound mean it's just that people keep misunderstanding me.

Thanks for reading you guys. :D
Visite me website at http://www.sixthcrusifix.com

Ben

#8
Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS: filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.
--Ben
Ben@freepgs.com

brainiac744

I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.

sixthcrusifix

Quote from: nq2h on December 08, 2005, 03:52:03 PM
Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS: filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.

-Yea it only works in IE and on my IE it didn't even work (I've got 6 . . . )


Quote from: brainiac744 on December 08, 2005, 05:38:56 PM
I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.


hey that would be awsome.
Visite me website at http://www.sixthcrusifix.com

brainiac744


<?php
//define some vars
    
if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset(
$_GET['text'])) $_GET['text'] = "Text";
    if(!isset(
$_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset(
$_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    
$size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

    
$xsize abs($size[0]) + abs($size[2] + 2);
    
$ysize abs($size[5]) + abs($size[1] + 2);

//create an image
    
$image imagecreate($xsize$ysize);
//set the background color
    
$blue imagecolorallocate($image00255);
//makes the background color transparent
    
imagecolortransparent($image$blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    
$font_color ImageColorAllocate($image$_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    
$font_color ImageColorAllocate($image255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    
$stroke_color ImageColorAllocate($image$_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    
$stroke_color ImageColorAllocate($image000);
}

// now draw out the outline (stroke) on the text
$stroke $_GET['stroke'];
for (
$ox = -$stroke$ox <= $stroke$ox++) {
for ($oy = -$stroke$oy <= $stroke$oy++) {
imagettftext($image$_GET['size'], 0abs($size[0])+$oxabs($size[5])+$oy, -$stroke_color$_GET['font'], $_GET['text']);
}
}

//print the text
    
imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), -$font_color$_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    
imagegif($image);
//free up memory
    
imagedestroy($image);
?>



Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.

sixthcrusifix

Quote from: brainiac744 on December 08, 2005, 10:29:27 PM

<?php
//define some vars
    
if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset(
$_GET['text'])) $_GET['text'] = "Text";
    if(!isset(
$_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset(
$_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    
$size imagettfbbox($_GET['size'], 0$_GET['font'], $_GET['text']);

    
$xsize abs($size[0]) + abs($size[2] + 2);
    
$ysize abs($size[5]) + abs($size[1] + 2);

//create an image
    
$image imagecreate($xsize$ysize);
//set the background color
    
$blue imagecolorallocate($image00255);
//makes the background color transparent
    
imagecolortransparent($image$blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    
$font_color ImageColorAllocate($image$_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    
$font_color ImageColorAllocate($image255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    
$stroke_color ImageColorAllocate($image$_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    
$stroke_color ImageColorAllocate($image000);
}

// now draw out the outline (stroke) on the text
$stroke $_GET['stroke'];
for (
$ox = -$stroke$ox <= $stroke$ox++) {
for ($oy = -$stroke$oy <= $stroke$oy++) {
imagettftext($image$_GET['size'], 0abs($size[0])+$oxabs($size[5])+$oy, -$stroke_color$_GET['font'], $_GET['text']);
}
}

//print the text
    
imagettftext($image$_GET['size'], 0abs($size[0]), abs($size[5]), -$font_color$_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    
imagegif($image);
//free up memory
    
imagedestroy($image);
?>



Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.

awsomeness! YAY! By the way, if you want a certain font for your website, is there a way you can upload the ttf to your website so that even people who don't have teh font installed can see it??? Otherwise I've just been having to make images for stuff to be in cool fonts. (It'd be easy if Internet Explorer, the most popular browser, had better PNG support) .

Why isn't there an Internet Explorer 7.0 with full PNG transparency support, tabbed browsing, The Latest CSS and personalized security? You can get plugins for some of it but microsoft is so big I feel like they owe it to me to give me a better browser. I wish everyone in the world would just switch to firefox!
Visite me website at http://www.sixthcrusifix.com

Ben

#13
But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.
--Ben
Ben@freepgs.com

sixthcrusifix

Quote from: nq2h on December 09, 2005, 02:00:27 AM
But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.

Vista? Sounds like some damned beach softdrink. is that the new OS? VERY gay sounding I hate it. But it will probably be better than XP and I'll have to upgrade because the new Adobe software will only be availale on it....

I hope somone breaks the window one of these days.
Visite me website at http://www.sixthcrusifix.com