++ + \ No newline at end of file diff --git a/src/Perspex.HtmlRenderer/Adapters/BrushAdapter.cs b/src/Perspex.HtmlRenderer/Adapters/BrushAdapter.cs new file mode 100644 index 0000000000..4c8b06345e --- /dev/null +++ b/src/Perspex.HtmlRenderer/Adapters/BrushAdapter.cs @@ -0,0 +1,47 @@ +// "Therefore those skilled at the unorthodox +// are infinite as heaven and earth, +// inexhaustible as the great rivers. +// When they come to an end, +// they begin again, +// like the days and months; +// they die and are reborn, +// like the four seasons." +// +// - Sun Tsu, +// "The Art of War" + +using Perspex.Media; +using TheArtOfDev.HtmlRenderer.Adapters; + +namespace TheArtOfDev.HtmlRenderer.Perspex.Adapters +{ + ///+ There are some additional 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 ineritted- +
corner-se-radius: (length)Indicates the radius of the south-east corner. + Not ineritted- +
corner-sw-radius: (length)Indicates the radius of the south-west corner. + Not ineritted- +
corner-nw-radius: (length)Indicates the radius of the north-west corner. + Not ineritted- +
corner-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: 18px } +.c5 { corner-radius: 10px; border: outset #bb0 2px; }+