Re: RFC: ability to assign images to corners

On Thursday 21 February 2002 22:24, Bert Bos wrote:
|   Robert Koberg writes:
|   > From: "Bert Bos" <bert@w3.org>
|   > > Vadim Plessky writes:
|   > > > Besides, you should be able to change those borders (corners)
|   > dynamically,
|   > > > with mouse :hover or for :focus / :active state
|   > > > Traditional Windowing Environment is dieing, web becomes more and
|   > > > more important. We should implement in CSS (Visual
|   > > > Rendering/Behavior) best features of legacy windowing environments,
|   > > > like MS WIndows, X-Windowing System or MacOS.

It seems part of my proposal was lost in answers on the list.
Can I eloborate states of :active / :hover for borders, please?

In fact, I did a lot of themes, which are usually Window Decorations themes.
You can find some screenshots here (you don't need to install Linux to see 
them)
http://kde2.newmail.ru/kde_themes.html

WINDOW is just a rectangle, and as we speak about rectangular blocks here 
(display: block mostly, may be with some excpetion display: inline), all 
experience I gained during my  "theme developing" work, can be applied to 
subject.
Typically, you need 8 pixmaps for "normal" state, plus 8 pixmaps for "active" 
state 9whem for example, your window , or web page element, gets Active state.
But, it, snot always limited to this.
For example, it's quite common for IceWm window manager to have more than one 
pixmap for the Title bar (border-top element)
Therfor I can propose following:

{ border-top: list(leftTop.png,centerTop.png,rightTop.png) }
or more natural for CSS style
{ border-top: leftTop.png centerTop.png,rightTop.png }, where number of 
pixmaps is not limited.
And those pixmaps should be placed into Top part of border, in listed order.
 Now about scaling.tiling.
What about to add one property for this?
like:
  { border-top: Top.png tiled }

Before going into further discussion: I invite all people to look on my 
themes to understnad what you can actually get using those pixmaps.
WinXP is in fact has too basic User Interface to base further judgements on 
it :-) 

|
|   At the last meeting the CSS WG had, we looked at some books in Art
|   Deco style. You may have seen these very elaborate floral and other
|   patterns. They often consist of a flower or a leaf that is repeated
|   and the repeated pieces are designed such that they connect nicely
|   together.
|
|   A 1-pixel image would clearly not be enough for those.

Yes, it's not enough.
But you can use 'Scale' or 'Tile' properties even with one-pixel gif/png.

|
|   Also, we saw that many borders actually have 5 parts: the corners, a
|   center piece and two tiled parts (often the two tiles are each other's
|   mirror image):
|

As I mentioned, many IceWm themes, or SawFish themes, are much more complex 
than what you mention.
(check www.icewm.org or themes.org sites.)

|       @@////////////////(*)\\\\\\\\\\\\\\\\@@
|       //                                   \\
|       //                                   \\
|       //                                   \\
|       //                                   \\
|       ~~                                   ~~
|       \\                                   //
|       \\                                   //
|       \\                                   //
|       \\                                   //
|       @@\\\\\\\\\\\\\\\\(*)////////////////@@
|
|   Some edges consisted of a single image that was stretched as needed:
|
|        - - -- -- ---===###===--- -- -- - -
|
|
|        - - -- -- ---===###===--- -- -- - -
|
|   We also looked at some of the built-in border styles of (Japanese)
|   cell phones. They have wavy lines and other patterns in two or three
|   colors.
|
|   Color brings up another interesting complication: if the border is
|   polychrome, it is usually OK if it comes with it own colors, as a PNG
|   image, for example. But when the border is monochrome, you might want
|   the same pattern to be used with different foreground and background
|   colors, to match the element's text.

Than I guess you just can use SVG pictures, instead of PNG or GID, for those 
borders.
SVG will handle gracefully wavy lines, color/background inheritance, etc.

To extend further: in PostScript imaging model,  rectangle's (Bezier's 
border) is .. again closed area (polygon)
So, instead of deciding *how* border should be rendered, you can ask: wether 
I can use some pattern for the border? How comples this pattern should be?

|
|   Cropping is a problem, too, because then the tile connects correctly
|   to one corner piece, but not to the other corner.
|
|   We also have to consider borders in tables, which can use the same
|   styles, but have corners that connect to 1, 2, 3, or 4 edges.
|
|   Note that we already prepared somewhat for these borders, by adding a
|   property to the Background module to keep the background away from the
|   border: 'background-clip'
|   http://www.w3.org/TR/2002/WD-css3-background-20020219/#properties5
|
[...]
|
|   > > [1] http://www.w3.org/Style/CSS/current-work#borders
|   >
|   > doesn't mention corners other than rounded and I assume that is not
|   > image based.
|
|   It mentions tiled images. It doesn't explicitly mention corners, but
|   that was certainly implied.

Pls add "scaled" images, too.

|
|   Bert

-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/

Received on Friday, 22 February 2002 11:41:39 UTC