[Webkit-unassigned] [Bug 20127] New: Add CSS gradient support for borders

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=20127

           Summary: Add CSS gradient support for borders
           Product: WebKit
           Version: 526+ (Nightly build)
          Platform: Macintosh
        OS/Version: Mac OS X 10.5
            Status: UNCONFIRMED
          Severity: Enhancement
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: john.engelhart at gmail.com


While working with the new CSS gradient support, I found that it would be
extremely useful to be able to specify a fill gradient for the borders colors.

This allows you to trivially create relief effects.

For example, a gradient that's white to black with a low alpha allows one to
create a good looking button relief effect.  Combined with border-radius, you
can create very good looking buttons.

I ended up creating the effect in a canvas by manually drawing what would
normally be the border, but it's obviously much better if you can just do it
natively with the border without having to resort to such hackery.

Conceptually, the border becomes a mask, and the gradient is used for the fill.
 This is slightly different than the more intuitive notion of stroking the
border.  By having the border be a mask, you can apply a consistent gradient
fill for all of them.  The trivial case where all the borders are the same
color is easy, I suspect that 'multi-color/gradient' borders would group
borders that share a common gradient specification, and fill those at the same
time in one pass.

I found it very useful to use border-radius along with a multi-stop fill.  For
a 'white highlight at top, dark highlight at bottom', it looked very good when
the top and bottom highlights could taper off over the size of the border
radius.  So, at the top, the white highlight transitioned to the side highlight
over the length of the border radius, and the side highlight just very slightly
darken over the length of the left and right border, and repeat the border
radius transition at the bottom.  When the border radius is specified with
something like '0.5em', along with the corresponding gradient stops, this
allows you to create resolution independent relief effects that scale very
cleanly with a uses chosen text size.  In safari, 'Make Text Bigger' and 'Make
Text Smaller' causes the effect to scale perfectly.

Oval buttons are essentially just a special case when the sides are only
effectively 0.5em high, and the entire edge is bent along the radius, no
straight segments.  Same thing, really.

Once I started playing with this, I kept thinking to myself "Now if I could
just have a procedural shader!"


-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.