W3C home > Mailing lists > Public > www-style@w3.org > August 2004

Re: recommendations to css3 draft ...

From: Bjoern Hoehrmann <derhoermi@gmx.net>
Date: Thu, 12 Aug 2004 18:21:11 +0200
To: Robin Berjon <robin.berjon@expway.fr>
Cc: www-style@w3.org
Message-ID: <41228d87.1633745692@smtp.bjoern.hoehrmann.de>

* Robin Berjon wrote:
>Bjoern Hoehrmann wrote:
>> * Chris Lilley wrote:
>>>Then, an SVG image can be used to create a gradient as a background.
>>>Replicating SVG functionality into CSS3 would be a bad direction.
>> 
>> Maybe it is just me, but I dislike the idea to create about six SVG
>> documents for a site like <http://www.blogger.com/start>
>
>It's probably just you because the fact is you can put as many gradients 
>as you like into a single SVG document :)

Yes, you could do something like

  <?xml version="1.0"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  
    <view id = 'v1' viewBox = '0   0 100 100' />
    <view id = 'v2' viewBox = '0 100 100 100' />
    <view id = 'v3' viewBox = '0 200 100 100' />
    <view id = 'v4' viewBox = '0 300 100 100' />
    <view id = 'v5' viewBox = '0 400 100 100' />
    <view id = 'v6' viewBox = '0 500 100 100' />
  
    <defs>
      <linearGradient id="g1">
        <stop offset="0%" stop-color="black" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <linearGradient id="g2">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <linearGradient id="g3">
        <stop offset="0%" stop-color="green" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <linearGradient id="g4">
        <stop offset="0%" stop-color="lime" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <linearGradient id="g5">
        <stop offset="0%" stop-color="blue" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <linearGradient id="g6">
        <stop offset="0%" stop-color="orange" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
  
    <rect y =   '0' height = '100' width = '100' fill="url('#g1')" />
    <rect y = '100' height = '100' width = '100' fill="url('#g2')" />
    <rect y = '200' height = '100' width = '100' fill="url('#g3')" />
    <rect y = '300' height = '100' width = '100' fill="url('#g4')" />
    <rect y = '400' height = '100' width = '100' fill="url('#g5')" />
    <rect y = '500' height = '100' width = '100' fill="url('#g6')" />
  
  </svg>

and then reference e.g.

  url("gradients.svg#v1")

or even leave the view elements off and reference them via e.g.

  url("gradients.svg#svgView(viewBox(0,500,100,100))")

Can you come up with a better solution that does not require to
change SVG?

>A few lines? You sure? Just for linear gradients, you need:
>
>  - two points to specify where it starts and where it ends, which adds
>    up to four items.
>  - as many rgba stops as there are colours, and for each their offsets
>  - what happens at gradient edges, does it pad, reflect, or repeat?
>
>So what would it look like? Perhaps:

Not really, the gradient would fill the entire shape for which the
start/end coordinates are already known, and the spread method is
also not needed, you could say "pad" implicitly, that would cover
most cases I can think of. So the syntax for the above could be as
in http://lists.w3.org/Archives/Public/www-style/2004May/0184.html

  @linear-gradient g1 { @stop-at 0% black;  @stop-at 100% white; }
  @linear-gradient g2 { @stop-at 0% red;    @stop-at 100% white; }
  @linear-gradient g3 { @stop-at 0% green;  @stop-at 100% white; }
  @linear-gradient g4 { @stop-at 0% lime;   @stop-at 100% white; }
  @linear-gradient g5 { @stop-at 0% blue;   @stop-at 100% white; }
  @linear-gradient g6 { @stop-at 0% orange; @stop-at 100% white; }

That's just a few lines, yes. Of course, if you want to do hyper
sophistacted gradients, this would not suffice, but then, you can
still use background images as people use them today.

>CSS is a styling language, not a graphics language. It's also not a 
>generic syntax for everything and the dog's breakfast.

That's a perfect fit then, gradients are style, don't you think? There
are many things one can do using background images, rounded corners,
shadow effects, gradients, opaque backgrounds, textured borders, or SVG
images directly included in some way like font effects yet that does not
mean SVG - or any other technology - is an answer to all questions.
Received on Thursday, 12 August 2004 16:21:53 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:32 GMT