Showing posts with label Effects. Show all posts
Showing posts with label Effects. Show all posts

Morfik 2.0 needs a "clean" theme

0 comments Posted by Mauricio Longo at 2:36 PM

Having experimented with several of the built in themes in Morfik 2.0 I came to the conclusion that it should have a theme with more of a "clean" look. I really like the some of the themes that are bundled, including the one called "Default" which, not surprisingly, is the default one, but I really like to build web applications which have more of a clean look to them.

I prefer to work with white backgrounds, light and bright colors and add some visual effects (sparingly) for effect. I get this feeling that when you use too much of the visual effects at the same time, they loose a bit of their appeal, as they kind of "interfere" with each other.

Most of the themes that are bundled are just a bit too "rich" on visual effects to be to my liking and I really think that a "plainer", "cleaner" theme should be added to the built-in theme collection.

Of course, you can create your own theme with its own set of visual effects, colors, fonts, etc. I have done exactly this, twice already, but I'm not yet up to the same level of polish as the bundled themes display.

 

Labels: , , ,

Using overlays for creating a glossy reflex

0 comments Posted by Mauricio Longo at 5:10 PM

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; 

 

Labels: , ,

Creating a glow using a custom shadow

0 comments Posted by Mauricio Longo at 6:17 PM

Among the most noticeable new features of Morfik AppsBuilder 2.0 are the visual effects.  These effects allow us to create great looking websites and applications with much greater ease than with any previously available design tool. These effects allow us to work at the control level, instead of working with a lot of small loose images.


Since Morfik 2.0 is such a new tool, most of us are still learning what we can accomplish with individual effects and with their combination.  Recently, while experimenting with the use of custom shadow configurations on a button, I stumbled upon an interesting glow-like effect.  You can see the difference between two versions of a button in the picture bellow:
 
As you can see in the above images the shadow can make a huge difference on how the button looks, without looking remotely like an actual shadow.  The following picture shows the custom configuration for this button's shadow.



As this experience demonstrates there might be some nice effects hiding under the most obvious ones.  I recommend that you do your own experiments with Morfik AppsBuilder 2.0 and check out what you can accomplish.

 

Labels: , ,

Older Posts Home

Subscribe to: Posts (Atom)