W3C home > Mailing lists > Public > www-style@w3.org > January 2010

Re: Request: Background and Borders - Multiple borders

From: Mark <markg85@gmail.com>
Date: Tue, 12 Jan 2010 23:46:36 +0100
Message-ID: <6e24a8e81001121446p31a16caei15508d06f20202ea@mail.gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>
Cc: www-style@w3.org
On Tue, Jan 12, 2010 at 11:36 PM, fantasai
<fantasai.lists@inkedblade.net> wrote:
> On 01/12/2010 12:52 PM, Mark 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.
>
>
> I'm not totally clear on what you're trying to do, but I'm pretty
> sure that the features in CSS3 Backgrounds and Borders would be
> sufficient. Consider especially
>  1. Multiple backgrounds
>  2. background-size
>  3. background-origin and background-clip
>  4. Border images
>
> Spec link: http://www.w3.org/TR/css3-background/
>
>> 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?
>
> Border images should be able to help with that, especially with the new
> set of capabilities added in the last year. I'm not really convinced
> your use case is general enough to justify a new multiple-borders
> feature to CSS.
>
> ~fantasai
>

I know it's all possible with multiple backgrounds and border images
but the idea was to make that image you see on the link entirely in
css. Right now it's all possible with CSS but requires hacks (like
stacking divs). So my intention is to get 2 new/adjusted properties in
the borers module so that those hacks are no longer needed.

Multiple borders can be convenient on other places as well. Like for
example when you have a dividing line between your header and content
sections. Those lines usually exist of 2 (or even 3) 1 pixel lines
each in a different color and are used a lot. For an example look
here: http://www.pixel2life.com/ at the bottom just above the big text
"Topsites". You also often see those things in menu's.

So i'm not the only one that will benefit from it ;)

Regards,
Mark
Received on Tuesday, 12 January 2010 22:47:09 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT