Gradient effect in Lotus Notes Client and Web applications

Creating Gradient effect in Lotus Notes client is very easy. You just have to go to create a table in the form/page. Then in the Table Properties > in the Table/Cell Background tab you select Cell color. Then you select the type of style and choose the colors for the gradient. And your table cells are ready with the gradient effect.

However, this gradient effect is not visible in web. Thus, you have to find some other way to color the cells with gradient effect.

I have found one way which I have used in my earlier web-based projects. I got that from the Microsoft website. Now, of course they don't use that feature any more, I guess. However, they have left a beautiful one-liner for us.

Here's the code:

Here the startColorStr and endColorStr describe themselves what they do. You have to just choose your color code in hex decimal code.

You can check the hex codes in any tool used for photograph editing. Or you can get the code from some of the websites which generate hex code for the color you choose. One such website is: http://www.2createawebsite.com/build/hex-colors.html

Now, about the gradientType; this value can be set to "0" or "1".

1 would give you a horizontal gradient i.e. the start color would be in the left and the end color would be in the right .

0 would give you a vertical gradient i.e. the start color would be at the top and end color would be at the bottom.

You can implement this code as HTML code in your form. Or, if you have drawn a table and you want apply the gradient effect then you can use this in the table properties. All you have to do is go to the Table Properties > Table Programming tab and in the Cell HTML Tags > Style field add the following code:

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='0')

Thus, when you preview your application in web the cells would show the gradient effect.

If there are any other way of using gradient effect in forms, then please do let me know.