Using Custom CSS: Animations and Effects Action and Advanced Styles

dominKnow | ONE provides numerous different actions that can enable you to animate and transform objects through interactivity, but sometimes you need to do something quite unique.  Enter Animate -> Custom CSS action.

Using the Custom CSS action under the set of Animation actions enables you to apply specific CSS to the target element.

For example If you wanted to have the color, opacity, or background color change when something was clicked you could add this action and then apply any of the following CSS.

opacity: 0.1; 
background-color: yellow; 
color: red;

NOTES:
Line 1 sets the opacity of the object to .1
Line 2 sets the background color to yellow
Line 3 sets the color e.g., text to red

You can start to do some even more creative things with some of the many CSS possibilities. However, keep in mind that generally speaking you are applying these CSS properties to the element itself and not to the container of the element. So, for example, applying borders isn't something that works with this action as a border is applied to the container of an element. 

You can leverage CSS tags like, height, width, and padding though to adjust positioning and spacing dynamically.

Another area where you can apply some unique styles is the Advanced Styles: Custom CSS option for images. To access this option:

1. Select the image then selectthe three-dot menu element control icon (Kabob menu)
2. Select the Options from the menu to open the Options tab above the stage.
3. Select Properties to open the Image Properties panel to the right of the Stage.
4. On the Element Details tab is the Advanced Styles option where you can add Custom CSS.

Like the Animations -> Custom CSS you can apply a number of different CSS effects.

Unlike an action these CSS changes are applied immediately to the use of this image on this page. To be clear if you reuse this image on other pages or even on the same page the CSS effects will only be applied to the specific instance where you added the effect.

Some of the options you might try are similar to built-in functions already available within dominKnow | ONE, but the fine control CSS can offer might be the ticket for some precision changes you need.

Here are some options you might wish to try. Keep in mind when adding CSS it may have unintended consequences for which you'll need to make accommodations!

float: left;
-webkit-box-reflect: right 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
border-radius: 75%;
box-shadow: 0 0 5px 5px rgba(0, 140, 186, 0.5);
border: 10px solid #ddd;
padding: 5px;

Notes: Similar functionality for some of these are native in dominKnow | ONE
Line 1: Floats image to left 
Line 2: Creates a right side reflect of the image and adds a gradient to the reflection
Line 3: Gives a border around the image with soft corners
Line 4: Creates a shadow box around the border 
Line 5: specifies width type and color of the border
Line 6: Adds some padding around the image

Don't forget when changing page level items like this, you can leave your single page preview window open and then just click refresh to see the update!

In many cases using the built in dominKnow | ONE triggers and actions will meet the needs of most users, but sometimes when you need something a bit more unique Custom CSS can assist.

DISCLAIMER: The dominKnow support team does NOT provide programming/coding support for the creation of CSS and JavaScript elements when creating your dominKnow | ONE content.