A gradient mockup which can be used with buttons, sliders and tabs.

Author: 
emrahunal
Mockup highlights: - Radial gradients on button's base and glaze
- "Pill shaped" glaze
- Gradial glaze contour.
Screenshot: 
drawing.svg
Screenshot-drawing.svg - Inkscape.png
drawing.svg

Really nice. I will see if

Really nice.
I will see if it can be implemented easily within the current code

it looks gorgeous!

it looks gorgeous!

Not implemented, because I'm

Not implemented, because I'm not sure it would fit the overall usage... but this is the code ;)

static void
murrine_draw_glow (cairo_t *cr,
                   const MurrineRGB *fill,
                   int x, int y, int w, int h)
{
	cairo_pattern_t *pat;
	MurrineRGB       glow_c;
	int              glow_r = 200; /* draw a big cirle */

	murrine_shade (fill, 1.24, &glow_c);

	cairo_rectangle (cr, x, y, w, w);
	pat = cairo_pattern_create_radial (x+w/2, y-w-glow_r, w+glow_r,
	                                   x+w/2, y-w-glow_r, w+h+glow_r);
	cairo_pattern_add_color_stop_rgba (pat, 0.0, glow_c.r, glow_c.g, glow_c.b, 0.6);
	cairo_pattern_add_color_stop_rgba (pat, 1.0, glow_c.r, glow_c.g, glow_c.b, 0.0);
	cairo_set_source (cr, pat);
	cairo_fill (cr);
	cairo_pattern_destroy (pat);
}

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <b> <strong> <i> <em> <u> <br />

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions. Registered users are trusted and don't require this verification.
5 + 12 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.