Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Website Design Forum:' started by Jazajay, Oct 23, 2010.

  1. 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. :)
  2. Jazajay

    Jazajay Active Member


    Looks like it should do it, in Firefox at least, will let you know if I can get it sorted. :)
  3. Jazajay

    Jazajay Active Member

    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?
  4. Levi

    Levi Moderator Staff Member

    well opera would be -o and webkit -webkit although according to this page firefox is the only supporting browser
  5. Kevin

    Kevin Senior Member

    What would that CSS exactly look like when you want to do that for a 200px line? :p
  6. Jazajay

    Jazajay Active Member

    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.

    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:
  7. Harry

    Harry Senior Member

    CSS gradients and colour-stops.

    Ugly as **** though Jaz, you go about everything in the wrong way. Sad to see, really :(
  8. Sunburn

    Sunburn Active Member

    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.
  9. Harry

    Harry Senior Member

    You'd struggle to get it that big even if you saved it as a .bmp too haha.
  10. Sunburn

    Sunburn Active Member

    @ harry hehe i guestimated :) but your right, my bad! 44bytes @ max quality :)
  11. Sunburn

    Sunburn Active Member

    what Harry said :) ....

    (eh wtf i posted this in another thread! . shazbot)
  12. Jazajay

    Jazajay Active Member

    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.
    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? :)

    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.

  13. Harry

    Harry Senior Member

    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'.
  14. Jazajay

    Jazajay Active Member

    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:

    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. :)

    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:
  15. Harry

    Harry Senior Member

  16. Sunburn

    Sunburn Active Member

    Harry I think you look like Picard... ill take Riker :)

    @ jay : no offense :)
  17. Jazajay

    Jazajay Active Member

    Ha, ha like it. :D

    Offence taken, I want Riker. :lol:
  18. Levi

    Levi Moderator Staff Member

    I'm calling dibs on data then :p
  19. Jazajay

    Jazajay Active Member

    And you can so tell this isn't a dev thread by these few posts alone. :D

Share This Page