If you've made styling changes in the past, you probably noticed the 'Effects' panel. Through this section, you can add or edit special styling effects to your design - by using some more advanced CSS options.
In this guide, we'll shortly walk you through each one of the effects and it's effect on your elements.
The first step of adding a styling effect is to click it's 'settings' icon.
The box-shadow property lets you add or edit your object's shadows (one or more).
You can add as many shadows as you wish by clicking the add shadow button.
You can easily set how you want your shadow to look, through these different shadow options:
- Type: which shadow you'd like, inner or outside shadow
- Color of the shadow
- Horizontal and Vertical lengths (in pixels)
- How far you'd like it to spread
- How blurry you'd like the shadow to be
The filters property allows you to add or edit different filter effects to the object: blur, brightness, contrast, grayscale, hue rotation, invert, opacity, saturation, & sepia.
In order to add a filter styling effect, simply click 'Add Filter' (accessible through Filters - Settings), enter the filter settings panel, and select which filter to use and its values.
It's possible to add more than one filter effect at a time.
Transform is an effect that lets an element change shape, size, and position.
In RapidUI you can translate, rotate, scale, and skew your elements. When you enter the Transform's settings, you can then adjust the angles of the rotation.
Transforms include Rotating, translating, scaling and skewing.
The Text Shadows property allows adding or editing of text shadows.
When adding a text shadow, you can easily define its different properties:
- Shadow color
- Shadow's distance from the text, Vertically and Horizontally (in pixels)
The transitions panel allows you to set a transition effect (from one value to another) over a certain period of time - which enables smooth transitions with nicer looking websites.
In order for a transition to be put into effect, you need to define an animation first (hover, focus, etc.).
Next, head back to the Styling panel, click 'Add Transition' (through Transitions setting), and pick the transition which matches the animation you made.
If you've created several animations, or your animation doesn't match the transition categories available, simply select 'ALL' from the property menu.
You can then define the transition's duration in seconds, change the easing type, and set a delay.