Using overlays for creating a glossy reflex

Many websites use a glossy look on some or all of their buttons.  This glossy like look is one effect you will not find on the Morfik 2 Ribbon.  You can, however, as you will see, reproduce this same look using a simple technique: applying an overlay.   In this case, a semi-transparent rectangle which is placed over the control to add this glass-like feel to it.

As an example, the following image is a small strip of buttons that is used as a top level menu for a small application.  The buttons in this image just have a simple gradient effect applied to them.

The next picture shows the very same buttons, with four rectangle controls which are semi-transparent applied over the four buttons.  The rectangles, where appropriate, have been configured to have rounded corners.

You can see this technique applied in the BookCollector sample that is bundled with Morfik AppsBuilder 2.0 (both FX and BX).

Overlaying rectangles over buttons, while yielding a good looking visual effect does present a small problem when the user tries o click on the button but actually clicks on the rectangle.  This same issue shows itself if you define different states for the buttons to have a rollover appearance change.

In order to get around this issue you can use the HandleEffect method in the events of the rectangle control to cause the respective button to visually and logically react to the appropriate state change.

The following code snippet shows the event handler for the MouseOver event of one of the rectangle controls.

Procedure MainForm.GlossyRect1MouseOver(Event: TDOMEvent);

Begin

    Button1.HandleEffect('mouseover');

End;