CSS Example (3.0 branch only)
CSS is a browser technology that allows you to change the style of specific objects on the screen.
To use it you must first upload the CSS file to your device using the file manager page. I uploaded a file called "test.css" To use the CSS in your program you can now use the code and CSS shown below. The result is some sexy looking buttons, textboxes and dropdowns like shown in the picture. |
BASIC CODE:
css "test.css"
textbox test
dropdown test2 ,"1,2,3,4,5"
button "Click me", [branch]
wait
[branch]
print "You clicked me"
wait
textbox test
dropdown test2 ,"1,2,3,4,5"
button "Click me", [branch]
wait
[branch]
print "You clicked me"
wait
CSS CODE:
button, input[type="button"], input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#000000));
background: -webkit-linear-gradient(top, #0099ff, #000000);
background: -moz-linear-gradient(top, #0099ff, #000000);
background: -ms-linear-gradient(top, #0099ff, #000000);
background: -o-linear-gradient(top, #0099ff, #000000);
padding: 20px 40px;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 24px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
select {
font-size: 32px;
}
input {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}
border-top: 1px solid #96d1f8;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#000000));
background: -webkit-linear-gradient(top, #0099ff, #000000);
background: -moz-linear-gradient(top, #0099ff, #000000);
background: -ms-linear-gradient(top, #0099ff, #000000);
background: -o-linear-gradient(top, #0099ff, #000000);
padding: 20px 40px;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 24px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
select {
font-size: 32px;
}
input {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}