Re: Request: Background and Borders - Multiple borders

On Tue, Jan 12, 2010 at 9:52 PM, Mark <markg85@gmail.com> wrote:
> Hi,
>
> Right now i try to make quite advanced things in css that where till ~
> 1 year ago only possible with images.
> But i encountered some issues that right now can only be solved by
> stacking multiple div elements on top or by using images.
>
> The issues i found:
> - I can only specify one border while i need more then one
> - I need to be able to set a border that will be and remain
> transparent and will not get overdrawn if for example a shadow on that
> same property is added. Sure it can get overdrawn if there is another
> element moving over it.
>
> What i try to make is this:
> http://mageprojects.com/purecss/
>
> The option with 1, 2 and 3 is possible right now but that's only for that bar.
> The most ideal option here would be if there is an option that allows
> me to set a shadow and multiple (rounded in my case!) gradients.
> That might be a bit to user specific so this is probably never going
> to be accepted.
>
> Another thing that i do need is the ability to add multiple borders on
> a single element. If you look at that link again in the bigger box you
> see a 1px border followed by a 2px white border followed by a soft
> shadow. If i want to make this in css only I can only make it with
> stacking 2 divs and playing with positions (look in the source of that
> link).
>
> Another thing that would be handy is if it could be possible to set a
> border as transparent and that it will NOT be overdrawn by properties
> added to that element like a shadow or background image.
>
> What do you think?
>
> Thanx,
> Mark
>

Completely forgot to add this.
When/if the multiple border options is going to be added i would like
to propose the following structure.

Right now there are a dozen border options like border-radius. Those
will need to change to allow multiple borders but i think it would be
best to go with border names. So for border-radius you would get this:

border-radius: <name>, <radius>

But since that will break every site that uses border radius it might
be best to, if no name is provided, apply the setting (radius in this
case) to all border properties for the element.
And with border names:

border: <name>, ...

This way it remains backwards compatible.

As for the forced transparant border that won't get overdrawn by for
example a box-shadow it might be handy to use the !important option
like so:
border: 1px solid transparent !important;

What are your thoughts on this?

Received on Tuesday, 12 January 2010 22:36:30 UTC