CSS ideas, not sure it can be done...

Jazajay

Jazajay

Active Member
...without images. I really don't want to use images to do this but I'm not sure it is possible without. :(

Here's what I want to do if need be I'll post a pic if I can't explain it well enough.

I want a horizontal unordered list with a red background on the a tag and a dark grey top border 7px in height. Now this I have done and on hover it to change to a orange background with the border to have a 1px dark grey top, 5px middle of dark orange and 1px bottom of dark grey. :)

Now I can do 98% of that, the bit I'm not sure about is the border top on hover in the 3 different colours/combinations.

Mmm....CSS gradients maybe????

Any other suggestions on how to accomplish this as I can't think?

Cheers peeps. :)
 
border-top-colours

Looks like it should do it, in Firefox at least, will let you know if I can get it sorted. :)
 
In Firefox at least:
This solves it.
-moz-border-top-colors:#333 #8B141D #8B141D #8B141D #8B141D #8B141D #333;border-top:7px solid

Nice. :cool:

Any Solutions for Webkit and Opera?
 
Jazajay said:
In Firefox at least:
This solves it.
-moz-border-top-colors:#333 #8B141D #8B141D #8B141D #8B141D #8B141D #333;border-top:7px solid

Nice. :cool:

Any Solutions for Webkit and Opera?
Click to expand...

What would that CSS exactly look like when you want to do that for a 200px line? :p
 
@Levi
No It only works for Firefox at the mo, but does look good in Firefox. :)
If you place the border property first then you can define any colour for the other browsers to pick up which is good to compensate for the ones that don't currently support it.

@Kevin
Well you should feel sorry for me dude my design has a 800px border top gradient next, I was going to do it via an image but now I can change the colour for each line, get in. Granted getting the gradient just right might take some time. :lol:
 
CSS gradients and colour-stops.

Ugly as **** though Jaz, you go about everything in the wrong way. Sad to see, really :(
 
Why don't you want to use an image for this? it would be like 1k in size, 1 request and be the simplest solution to the problem.
 
@Harry
What you still haven't blacklisted me, WHAT DO I HAVE TO DO? I mean I'm trying really hard here but you keep promising and you don't follow through, sad really. :lol:
But as normal thanks for being off topic and irrelevant to the actual issue.
Ugly as **** though Jaz, you go about everything in the wrong way. Sad to see, really :sad:
Click to expand...
I didn't ask for a design critque on a design you cant see, yeah wow get in, but the colour examples where just that examples to get the idea of the issue. :rolleyes:

Also why is it sad that I don't follow the lowest common dominator, code to the person who knows the least in some fictional team environment, thus add bloat when I can do it far, far better and code for machines with no extra time needed? For some reason you have an issue about that and I would love to know why, now that is odd TBH. :D

But I would love for you to be able to explain how I can code the border like that with that CSS as I am under the impression the only viable way to do this with CSS is the solution I gave above, please correct me if I am wrong? :)

@Sunburn
True but when I turn images off only 3 images disappear and the rest of the design, including the top border in Firefox, stays the same so all good for everyone with no extra work either way, in fact creating images would be slightly more work, time wise, to do the same thing, and more CSS if you do it advanced coding wise, so in my eyes this is ever so slightly better. :)

Plus it means my cooding knowledge gets better which is all ways good.

But cheers for all constructive answers, mucho appreciative.

Jaz
 
I wasn't on about design, that code is ugly as f*ck.
To do this in CSS I'd use an image. Your belief that everything should be done for machines is totally ridiculous. Using an image is by far and away the most sensible way to do this.
You're writing really 'advanced' code which, despite however 'clever' the reasoning behind it is, is still just sh*t code. The lunacy behind coding such an arse about tit CSS declaration over using an image is just plain astounding.

Also, the thing about 'it still working with images off' is totally missing the point. If people want to disable images then why would you spoof it?! If they don't want images they sure as sh*t won't want to see 'Jaz's code which makes image-like things still appear even though you just disabled images'.
 
@Harry
O then my appologise I miss read where you where coming from.
O dear lord the ugly code thing again. :lol:

Thats a actual CSS declaration I don't care if it looks ugly. :lol:
You seriously make me laugh man, at least I can all ways count on you for comedy value, ugly code when using a CSS rule. :lol:

You're writing really 'advanced' code which, despite however 'clever' the reasoning behind it is
Click to expand...
Mmm...haivng it look like crap code or it be advanced mmm.....yeah finally convinced me lets forget the advanced bit and make the code look pretty. :lol:

Dude you have a lot to learn I mean that in a nice way, but maybe Harrys nice looking code way of doing it is not the right way or the most efficient or even the best way of doing it, shock horror I know. :)

If people want to disable images then why would you spoof it?!
Click to expand...
Err....maybe they are still on a DSL connection and thus I'm giving them the same as everyone else. End of the day does it really matter that much, I find it quicker to do it like this and it looks the same so really whats the issue?????? :confused:
 
DoubleFacePalm.jpg
 
You must log in or register to reply here.
Back
Top