About custom style (CSS3)

29 views
Skip to first unread message

wahono sri

unread,
Mar 26, 2013, 5:16:24 PM3/26/13
to li...@googlegroups.com
I don't found any property to set background in UI designer. I want to set background with gradient for some widget (not by theme), my code is :
....
....
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane53")
                .setDock("width")
                .setHeight(100)
                .setPosition("relative")
                .setCustomClass({".linb-panel-panel":".css-gradient-a"})
            );
            
....
....
        events : {"onReady":"_com_onready"},
        _com_onready : function (com,threadid){
            linb.CSS.addStyleSheet(".css-gradient-a{background: -webkit-gradient(radial, 430 50, 0, 430 50, 506, from(red), to(#000));background-image: -moz-radial-gradient(430px 50px 45deg, circle cover, red 0%, black 100%);}", '__class_added');
        }

....

But I don't get gradient in panel, what's wrong in my code?

Thanks

wahono sri

unread,
Mar 26, 2013, 5:29:12 PM3/26/13
to li...@googlegroups.com
Did you plan to add CSS3 visual editor in UI Builder?

Jack Lee

unread,
Mar 26, 2013, 9:42:07 PM3/26/13
to li...@googlegroups.com
Look at the attached picture please. And the code will like:

           
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(260)
                .setTop(100)
                .setWidth(100)
                .setHeight(100)
                .setCustomClass({"KEY":"css-gradient-a"})
            );
a.PNG

Jack Lee

unread,
Mar 26, 2013, 9:46:46 PM3/26/13
to li...@googlegroups.com

And you should go to http://www.linb.net/Examples/, try those examples in "Appearances" block, and look at their source code.


On Wednesday, March 27, 2013 5:16:24 AM UTC+8, wahono sri wrote:

wahono sri

unread,
Mar 27, 2013, 6:02:20 PM3/27/13
to li...@googlegroups.com
I have try some examples, but I don't get sample how to create gradient. Please you show me!

I try create gradient from this site http://www.colorzilla.com/gradient-editor/

Thanks

Jack Lee

unread,
Mar 27, 2013, 10:14:51 PM3/27/13
to li...@googlegroups.com
Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};

            
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(250)
                .setTop(100)
                .setWidth(100)
                .setHeight(120)
                .setHtml("Pane2</br>b</br>c</br>d</br>e</br>f</br>g</br>h")

                .setCustomClass({"KEY":"css-gradient-a"})
            );
            
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane10")
                .setLeft(230)
                .setTop(70)
                .setWidth(100)
                .setHeight(120)
                .setHtml("Pane1</br>b</br>c</br>d</br>e</br>f</br>g</br>h")

                .setCustomClass({"KEY":"css-gradient-a"})
            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        },

        events : {"onReady":"_com_onready"},
        _com_onready : function (com,threadid){
// CSS code from http://www.colorzilla.com/gradient-editor/
            linb.CSS.addStyleSheet(
                ".css-gradient-a{" +
"background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ " +
"background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */" +
"background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */" +
"background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */" +
"background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */" +
"background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */" +
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */" +
                "}","customcss1");
        }
    }
});

wahono sri

unread,
Mar 28, 2013, 2:26:45 PM3/28/13
to li...@googlegroups.com
Wow, it's work as I hope. I don't doubt about jsLINB again, because apparently it support CSS3 and HTML5 technology.

BTW, in the future release, if you add new widget or just new property for all widget to set backgroung visually, it's very powerfull to develope GUI app beatifully.
Background can be selected color, gradient, etc. :)

Thanks
Reply all
Reply to author
Forward
0 new messages