ESP8266 BASIC
  • Home
  • Documentation
    • Editor Interface
    • Flashing Instructions
    • Language Reference
    • FAQ
    • Videos
    • Examples
      • ESP8266-projects.com
      • Wifi Station & AP Examples
      • GPIO & PWM & Servo Example
      • GUI Example
      • Hello World Example
      • Graphics Example
      • Blink example
      • I2C READING DS1321 REAL TIME CLOCK
      • Timer Example
      • MSG URL Usage
      • MSG URL (Advanced)
      • DS18B20 Wifi Thermostat
      • CSS Example
      • WIFI Scanner Example
      • Graphic Clock Example
      • Analog Input Graph
  • Flashing Instructions
  • Download
  • Forum
  • Store
  • Home
  • Documentation
    • Editor Interface
    • Flashing Instructions
    • Language Reference
    • FAQ
    • Videos
    • Examples
      • ESP8266-projects.com
      • Wifi Station & AP Examples
      • GPIO & PWM & Servo Example
      • GUI Example
      • Hello World Example
      • Graphics Example
      • Blink example
      • I2C READING DS1321 REAL TIME CLOCK
      • Timer Example
      • MSG URL Usage
      • MSG URL (Advanced)
      • DS18B20 Wifi Thermostat
      • CSS Example
      • WIFI Scanner Example
      • Graphic Clock Example
      • Analog Input Graph
  • Flashing Instructions
  • Download
  • Forum
  • Store

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. 
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

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;
}
Powered by Create your own unique website with customizable templates.
  • Home
  • Documentation
    • Editor Interface
    • Flashing Instructions
    • Language Reference
    • FAQ
    • Videos
    • Examples
      • ESP8266-projects.com
      • Wifi Station & AP Examples
      • GPIO & PWM & Servo Example
      • GUI Example
      • Hello World Example
      • Graphics Example
      • Blink example
      • I2C READING DS1321 REAL TIME CLOCK
      • Timer Example
      • MSG URL Usage
      • MSG URL (Advanced)
      • DS18B20 Wifi Thermostat
      • CSS Example
      • WIFI Scanner Example
      • Graphic Clock Example
      • Analog Input Graph
  • Flashing Instructions
  • Download
  • Forum
  • Store