There are some non-standard features that you may already discovered about the renderer core engine.
Graphic features
I have always wanted the W3C to add this features to the CSS spec (And so far, not there yet :)
- Gradients on backgrounds
- Rounded corners
And I think many many web designers would agree. Is it so hard or what?.
Background Gradients
It is a simple two color linear gradient, achieved by the adding of two CSS properties:
Some examples
background-gradient: (#Color)
Second color of the gradient background, the first one is given bybackground-color
. Not inherited.background-gradient-angle: (number)
Angle (in degrees, clockwise) of the gradient. Not inherited. Initial value:90
.
. . . . 0 degrees 45 degrees 90 degrees 135 degrees 180 degrees Rounded corners
As you may already know, CSS is based on a Box Model, where every box has it's own set of properties. Since we are talking abound boxes, why not to make them with rounded corners, almost every website you visit nowadays makes use of rounded corners, where a not very nice trick with images and tables must be used.
In this renderer, the rounded corners are achieved by adding this CSS properties:
Some examples
corner-ne-radius: (length)
Indicates the radius of the north-east corner. Not inerittedcorner-se-radius: (length)
Indicates the radius of the south-east corner. Not inerittedcorner-sw-radius: (length)
Indicates the radius of the south-west corner. Not inerittedcorner-nw-radius: (length)
Indicates the radius of the north-west corner. Not inerittedcorner-radius: (length){1,4}
Shorthand for the other corner properties. Not ineritted
c1 c2 c3 c4 c5 .c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; } .c1 { corner-radius:0px } .c2 { corner-radius:10px } .c3 { corner-radius:0px 10px 10px 0px } .c4 { corner-radius:25px } .c5 { corner-radius:10px; border:outset #bb0 2px; }