- From: Robert Koberg <rob@koberg.com>
- Date: Thu, 21 Feb 2002 11:56:31 -0800
- To: "Bert Bos" <bert@w3.org>, <www-style@w3.org>
Wow, cool!
I was defintely not thinking this advanced. But I would say that if you want
to use the flower pattern you described then YOU HAVE TO explicitly set the
width/height. But then someone can enlarge the screen text and blow out the
border. Sheesh...
OK, then why not abandon those cases and fall back to a siimple and very
acceptable model for v3? There already is an 'art' to creating tile images
for borders. This would strengthen it and make the rendering much simpler.
Currently you have to do something like this:
<TABLE WIDTH="177" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="10">
</TD>
<TD WIDTH="167"><BR>
<TABLE BGCOLOR="white" CELLPADDING="0" CELLSPACING="0" BORDER="0"
WIDTH="167">
<TR BGCOLOR="#CCCCCC">
<TD COLSPAN="3"><IMG HEIGHT="22" WIDTH="167"
SRC="/images/tln_lnav_head_live.gif">
</TD>
</TR>
<TR>
<TD BACKGROUND="/images/tln_box_tile-left1.gif" WIDTH="6">
<IMG WIDTH="6"
SRC="/images/1x1Transparent.gif">
</TD>
<TD WIDTH="155">
<TABLE WIDTH="155" CELLSPACING="0" CELLPADDING="3" BORDER="0">
<TR>
<TD CLASS="tlnliveheader" ALIGN="center" BGCOLOR="#b0c4eb"
COLSPAN="2">
VISITING COLLEGES
</TD>
</TR>
<TR>
<TD ALIGN="right"><IMG SRC="/images/TLNLiveLogo.gif">
</TD>
<TD CLASS="tlngraphiclabel" VALIGN="bottom">
<BR>It's time to think about your Spring
College Tour!<BR>
</TD>
</TR>
<TR>
<TD CLASS="tlnblurb" ALIGN="left" COLSPAN="2">
What should you look for and ask
about?<BR>
</TD>
</TR>
<TR>
<TD CLASS="tlninstructions" ALIGN="left" BGCOLOR="#e7edf9"
COLSPAN="2">
It's all Live!<BR>Tuesday, February
26<BR><BR>9:00 PM EST/6:00 PM PST
</TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN="2">
<A HREF="/TLNLive.htm">
<IMG BORDER="0"
SRC="/images/tln_but_check-off.gif" ID="tlnlive">
</A>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="6" BACKGROUND="/images/tln_box_tile-right1.gif">
<IMG WIDTH="6"
SRC="/images/1x1Transparent.gif">
</TD>
</TR>
<TR>
<TD VALIGN="bottom" HEIGHT="6" WIDTH="6">
<IMG HEIGHT="6" WIDTH="6"
SRC="/images/tln_box_corner-left1.gif">
</TD>
<TD VALIGN="bottom" HEIGHT="6" WIDTH="155">
<IMG ALIGN="BOTTOM" HEIGHT="6" WIDTH="155"
SRC="/images/tln_box_tile-bottom1.gif">
</TD>
<TD VALIGN="bottom" ALIGN="left" HEIGHT="6" WIDTH="6">
<IMG HEIGHT="6" WIDTH="6"
SRC="/images/tln_box_corner-right1.gif">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
----- Original Message -----
From: "Bert Bos" <bert@w3.org>
To: <www-style@w3.org>
Sent: Thursday, February 21, 2002 11:24 AM
Subject: Re: RFC: ability to assign images to corners
> Robert Koberg writes:
> > Hi,
> > ----- Original Message -----
> > From: "Bert Bos" <bert@w3.org>
> > > Vadim Plessky writes:
> > > > On Wednesday 20 February 2002 20:14, Robert Koberg wrote:
> > > > | I would like to have a box on the page that uses 4 uniques
corners.
> > I
> > > > | would also like the borders to be assignd unique images that can
tile
> > so it
> > > > | can be any height or width.
> > > > |
> > > > | *-----*
> > > > | | |
> > > > | | |
> > > > | *-----*
> > > > |
> > > > | best,
> > > > | -Rob
> > > >
> > > > I second back this proposal.
> > > > 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.
> > >
> > > The CSS WG also likes it and in fact decided a few months back to try
> > > to write a draft[1] about it. However, from *liking* it to actually
> > > coming up with a consistent and implementable specification is quite a
> > > long way. Corner pieces are relatively OK, but the edges may contain a
> > > fractional number of tiles, what do you do then? Scale the tile? Scale
> > > the element's content? Crop the tile? All of those?
> >
> > I don't know how these things are handled internally but why can't have
the
> > same behavior as tiling backgrounds in TDs (crop)? Or perhaps there is a
> > limitaion placed (don't really like this idea, but it still works for my
> > cases), that is: if tiling a width border then you must have an image
that
> > is one pixel in width; if tiling a height it has to be 1 pixel in
height. No
> > fractions this way.
>
> 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.
>
> 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):
>
> @@////////////////(*)\\\\\\\\\\\\\\\\@@
> // \\
> // \\
> // \\
> // \\
> ~~ ~~
> \\ //
> \\ //
> \\ //
> \\ //
> @@\\\\\\\\\\\\\\\\(*)////////////////@@
>
> 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.
>
> 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
>
> >
> > > And how do you
> > > keep the CSS rules simple to write? There are already quite a number
> > > of border properties, we'd like to avoid that we get two dozen more...
> >
> >
> > div.coolBox {
> >
> > top-right-corner: top_rt_corner.gif;
> > bottom-right-corner: btm_rt_corner.gif;
> > bottom-left-corner: btm_lft_corner.gif;
> > top-left-corner: top_lft_corner.gif;
> >
> > top-border-tile: top_brdr.gif;
> > right-border-tile: rt_brdr.gif;
> > bottom-border-tile: btm_brdr.gif;
> > left-border-tile: lft_brdr.gif;
> >
> > }
> >
> > >
> > > Of course, the best way you can help is to send concrete proposals.
> >
> > why not discuss it with us on this list?
>
> Absolutely, please go ahead. The working groups has no better
> properties to propose :-) So far we only decided that we are going to
> write a draft, someday.
>
> >
> > >
> > > [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.
>
>
> Bert
> --
> Bert Bos ( W 3 C ) http://www.w3.org/
> http://www.w3.org/people/bos/ W3C/INRIA
> bert@w3.org 2004 Rt des Lucioles / BP 93
> +33 (0)4 92 38 76 92 06902 Sophia Antipolis Cedex, France
Received on Thursday, 21 February 2002 14:59:00 UTC