This tutorial shows how to style a set of sliders to make an attractive user interface.

The stylesheet from the Blend4web ‘morphing’ code snippet is used to style two sliders.

The two sliders are from a previous moon orbit tutorial where they control the speed of the moon orbit and the earth spin.

Layouts are created in web pages using the CSS (Cascading Style Sheet) Box Model. Complex layouts are created by putting boxes within boxes.

Extra JavaScript is required to make container boxes. The boxes create a layout consisting of a set of rows, each row having a label and slider.

Extra styling information is added to the project’s CSS file. The styles control the layout and style of the sliders.

The tutorial looks at making changes to the style sheet to alter the position of the sliders and some of the colors used.

The files used in the tutorial can be downloaded from my website -
http://blender.freemovies.co.uk/slide...

Download blend4web from -
https://www.blend4web.com/en/