General Controls

Float:
Options = right, left, none
Default = none
Float right will cause that element to be as far right as possible, and Float left will place the element as fat left as possible.

Content Overflow:
Options = Hidden, Visible, Scroll Bar
Default = Hidden
Content Overflow controls what happens when text, images, video, or other content go longer or wider than the element they are placed in. Visible will allow the content to be seen even if it’s longer or wider than the element. Hidden will cut it off at the edges of the element. Scroll Bar will automatically put a scroll bar inside of that element to allow scrolling to view the overflowing content.

Px or %:
Options = Pixels, Percents
Default = Percents
the following options (width, height, etc…) will either be sized in pixels or percent. Choosing pixels will cause that element to be sized with pixels, where as percentages will allow the element to be more fluid and responsive.

Width and Height:
Options = 0-1000
Default = blank
These are sort of self explanatory, if you chose pixels above, the width and height will be sized by pixels, if you chose percentages, it will use percentages. Leaving these fields blank will cause the element to only be displayed when there is content inside of it.

min/max-Width and min/max-Height:
Options = 0-2000
Default = blank
(advanced – okay to leave blank) Min-Width (minimum width), controls the absolute smallest width an element can have. Max-Width (maximum width), controls the absolute widest an element can be. Same concept for height. This can be useful in a situation where you’re not sure how large or small content will display on different devices, but you know that you don’t want it to be smaller or larger than a certain amount. You can use minimum and maximum width and height to make sure that your content looks good regardless of what device it’s on.

Background Color

Red, Green, Blue:
Options = 0-255
Default = 100
Each slider controls the amount of that color. The higher the number, the more of that color there will be. The colors mix to create any color you want.

Transparency and Opacity:
Options = on, off, 0-9
Default = off, 0
Checking the transparency check box will allow you to use the opacity slider to make the element see-through. Leaving the check box unchecked will keep the element completely solid, and the opacity slider wont change anything.

Borders

type:
Options = none, solid, dotted, dashed, double, inset, outset, groove, ridge
Default = none
Choose between any of the types of borders available, or choose none for no border. Use the ‘Borders’ section to control all four borders, or set each one individually (top, bottom, left, right).
NOTE: Some of the border types take the color you’ve chosen and use lighter and darker colors for different sides. So if you have black selected, and you choose inset for instance, it will look the same as a solid border. However if you lighten the color you will see the difference.

width:
Options = 0-50
Default = 0
Controls the width of the border in pixels. You can also control the width independently for each border (top, bottom, right, left).

color:
Options = Color Picker
Default = Black
Use RapidWeaver’s color picker to choose any color you want. You can also control the color independently for each border (top, bottom, right, left).

Round Corners

Pixels/Percentages:
Options = px/%
Default = %
You can choose to round the corners with percentages or pixels. Percentages will round the corners based on the width/height of the element. Pixels will give the same rounding effect regardless of size.

Top-Right, Top-Left, Bottom-Right, Bottom-Left:
Options = 0-100
Default = 0
You can control the rounding for each corner individually, and it will either round with pixels or percentages depending on which you have selected.

Rotation

X, Y, and Z axis:
Options = -180 degrees – 180 degrees
Default = 0 degrees
The x, y, and z, axis rotations are pretty straightforward, you can see in the preview which way each one rotates. The X axis goes from left-right. The Y axis goes up-down, and the Z axis goes forward-backward.

Perspective:
Options = 200-2000
Default = 1500
Using a lower value will give it more perspective, and a higher value will give it less perspective. You can also think of it as a lower value makes it seem closer, and a higher value makes it seem further away. If you’re familiar with photography, a higher value is like using a telephoto lens, where as a lower value is like using a wide angle lens.

Shadow

Horizontal, Vertical:
Options = -50px – 50px
Default = 0, 14
The horizontal slider will move the shadow left-right, and the vertical slider will move the shadow up-down.

Blur:
Options = 0px – 50px
Default = 18px
Leaving blur at 0 will give a hard edge, and setting it at a higher value will blur the edges of the shadow.

Size:
Options = -50px – 50px
Default = -14px
At 0px, the shadow will be the same size as the element. At a higher value, it will be larger than the element, and at a lower value it will be smaller than the element.

Opacity:
Options = 0-9
Default = 9
Opacity makes the shadow more or less see-through. At 0 the shadow will be completely invisible, but at 9 the shadow will be almost completely solid.

Hover Controls

On/Off:
Options = on, off
Default = on
You can turn on and off hover events. If Hover is turned on, all of the hover controls will be applied when the user hovers over that element.

All of the hover controls are exactly the same as the normal controls.

Animation

Seconds/Milliseconds:
Options = 0-10, 100-999
Default = 0, 300
This will control how long it takes for the hover controls to transition. Milliseconds are 1/1000th of a second, so 500 Milliseconds is 1/2 Second.

Easing:
Options = none, Ease In, Ease Out, Ease In and Out, Snap In-Ease Out, Ease In-Snap Out, Bounce, Bounce In-Fast Out, Fast In-Bounce Out
Default = none
An Easing function is something that controls the timeline of the transition. So if you have an element on the page that transitions from 100px to 200px, and your easing is set to bounce, first it will go less than 100, then up to 200, past 200 a bit, and back down to 200. Here’s an example page to see the result of each individual easing option.