Forum Moderators: not2easy

Message Too Old, No Replies

multicolor words/phrases

how to do this without using font

         

wkitty42

2:44 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



how would one convert a colorized "logo" from using font to doing it strictly with css?

here's an example of the existing format...

<font color="#a020f0">Widget</font> <font color="#228b22">World</font> <font color="#ff0000">U</font><font color="ffffff">S</font><font color="#0000ff">A</font>

for some reason i'm thinking that it should be easier with css... easier as in wrapping it in one class... however, there are times when this is needed to be done in the middle of anchors, paragraphs and titles...

i know i'm missing something but can't see the forest for all the trees ;(

benihana

2:48 pm on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



i think youd have to give each a seperate class:

.widget {
color:#990000;
}

.world {
color:#440990;
}
etc

then wrap them in spans :

<span class="widget">widget</span><span class="world">World</span>

ytswy

3:24 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



No idea on browser support, but possibly you could use adjacent selectors to cut out some of the class names.

eg.

span.multicolour span:first-child {
color: red;
}

span.multicolour span + span {
color: blue;
}

span.multicolour span + span + span {
color: green;
}

then just
<span class="multicolour"><span>red</span> <span>blue</span> <span>green</span></span>

Works in my Mozilla, but I wouldn't like to bet on IE :)

DrDoc

4:23 pm on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why can't you just use an image?

wkitty42

5:12 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



can't use an image because the text may be various sizes and trying to use an image is just too "bulky" when trying to get spacing, kerning, and all that rot straight so that it appears to be text...

this particular phrase appears in H1's, H2's, H3's, paragraph text, and link anchors... it's become logo-esque and appears the same everywhere it is seen (on the site)...

wkitty42

5:24 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



ytswy,

that's an interesting way of doing it... are there also second-child and third-child options? i do use first-letter in one of my classes... is there also second-letter and third-letter? i could see something like this being very nice to work with...


span.multicolour:first-child {
color: #a020f0;
}
span.multicolour:second-child {
color: #228b22;
}
span.multicolour:third-child:first-letter {
color: red;
}
span.multicolour:third-child:second-letter {
color: white;
}
span.multicolour:third-child:third-letter {
color: blue;
}

then i could easily use
<span class="multicolour">widget world 123</span> and feel a lot more comfortable and safer doing it...

too bad we can't group and subgroup css styles within the parens but have to explicitly specify each of them...

[edit] correct use in sample /[edit]

[edited by: wkitty42 at 5:52 pm (utc) on Sep. 12, 2003]

mikejson

5:39 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



I would really look at using a image for this. There is 2 reasons that stick out in my mind

1. Simplicity, if you have 1 image and you make it large, with web resolution/color then it can be used at various scaled sizes(photoshop is a good tool for this).

2. Logo preservation(I think that's what the business people would classify this under). Basically you don't want to have your logo showing up in 100 different shapes and sizes. Take McDonalds for example. Look for the big 'M' anywhere, you will find that where ever you find it, the dimensions with be proportional to every other one you find. The word Mc Donalds will appear in the exact same location of every logo.

Now this may be stepping past the bounaries of a simple web site for a company, but because of the first reason, I would try to figure out a way to use images.

If this cannot be the case, then using classes built with descriptive names to what is inside them is what I would do

.red { color:red }

You get the idea.

AND bravo on not using the font tag. HTML4 standards do get used... :)

wkitty42

5:51 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



mikejson,

i know and understand what you are saying... however, an image won't wordwrap and its too very hard to get images and text to verticle align properly all the time... not to mention the various sizes needed all over the place and then there is the spacing between the image and the rest of the words as well as character spacing... should i also mention the various fonts... the phrase and coloring is the key... not necessarially the font used... and its not a logo per se'... not like a /graphical/ logo...

also with images, you have to worry about stairsteps at larger sizes as well as antialiasing and different backgrounds and such...

sure, i could use three images to handle the wordwrap concern but then i triplicate the above...

its just too much for such a simple thing that i've been using and doing for many years, now...

wkitty42

6:16 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



ytswy,

your example does work in moz and not in ie... too bad its as convoluted as the original font stuff... i'm at a loss, now, as to which way to go... keep the font stuff and fly the doctype as transitional or what... the added subtraction to all this is that is doesn't work across all browsers :( the font thing works perfectly in all browsers... too bad its been/being depricated :(:(

mikejson

6:37 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



? nothing we've said works across all browsers?

I understand your concern with the image thing.

so go with what my other suggestion is

.red { color:red;}
.blue{ color:blue;}
....
...

Then your html can just be <strong class=red>changed</strong> <strong class=blue>like</strong> that.

I use strong just cause, if I'm changing the color, I usually want it to stand out, so I bold...errr *strengthen* it's look. HAHA, that sounds so stupid.... anyway

That works fine, but were you looking for a way that didn't include all those tags?
<strong> is 4.01 if I recall correctly, and if the browser doesn't support CSS, then it won't change the way it shows up, just the color. I thought that's what CSS was for. You can control what it looks like, but if the browser doesn't support that specifically, it will still show up, without all the bells and whistles.

wkitty42

6:47 pm on Sep 12, 2003 (gmt 0)

10+ Year Member



mikejson,

yes, in a way, i'm looking for a way that is much better and easier to implement... having been a coder in several languages for some 20+ years, i know that i can get hardnosed and set the attribute i want on each and everything but that costs a lot in time (downloading and rendering) and size not to mention that its cumbersome and i always have to copy'n'paste a known good codeblock to ensure that i get it right every time...

no, they don't work across all browsers... IE doesn't do anything with the first css example given... with the wish example i posted, it does set everything to the first specified color...

font and image are the only two that work across all browsers... we have already laid out the problems with using image and it doesn't work in textonly browsers ;)

<sigh> oh well... someone's always gotta be breaking something :( might as well be the w3c and their standards and such...

mikejson

1:48 pm on Sep 15, 2003 (gmt 0)

10+ Year Member



with the image, all you need is an alternative text string(alt attribute). Then if the image doesn't show up for any reason, there will still be the alt text showing to guide your users. but we already discussed how this is not going to work... just wanted to point out, that isn't the reason why you are not using images

No offense to HTML users or anything, but I don't consider HTML "coding". It's just tags(this is for another thread/forum all together though HAHA).

Once you have this done the first time(hardnosed) it is only good practice to copy/paste this anyway. That's exactly what I would do. Why retype...

Anyway, good luck with it.

Oh I forgot, if you do it hardnosed(and using CSS), and the browser doesn't support it, then you will at least know it will show up, and not in the wrong color, just no color