Effects

Let the good times roll! Under Effects you can change the opacity of elements, add shadows and make things pop with animations.

Tip: Oftentimes animations are used when hovering over an element (like a button). To add an effect when people hover over an item, switch to the Hover state and add the effect to the element in this view.

Opacity

Click the dropdown menu to choose a percentage or change the slider to set the correct number. With 100% opacity, the element is fully shown and 0% makes it disappear (as the element is transparent).

Shadow

Shadow works like a charm when you want to add depth to elements. You can pick from a shadow outside or inside the element.

If you go for Inside shadow, you can only pick the option base. This adds a light shadow border inside.

For Outside shadow, you can pick from a range of extra small to two times extra large shadows.

Click the trash can icon to delete the shadow effect.

Animation

You can make elements move with a variety of animation effects:

  • None no movement

  • Spin turning around in a circle

  • Ping increases and then pops like a balloon

  • Pulse fades in and out

  • Bounce bounces up and down like an excited dog

Blend modes

Blend modes indicate how two layers blend with each other, and there are different types of effects you can choose from.

Before we dive into all modes, let’s clear up some “QUE?!” terms:

Base color: Original color in an image.

Blend color: Color applied with the editing tool.

Luminosity: Glow or brightness.

Saturation: Intensity of a color. The higher, the more rich and vivid it is.

Hue: Pure colors, those that can be seen on the color wheel (primary and secondary).

Available blend modes

  • Normal: Default blend mode

  • Darken: Compares the base and blend colors and keeps the darkest of the two

  • Multiply: Always results in a darker color. Depending on the luminosity values of the blend layer, it may produce different darkening levels

  • Color burn: Darkens the colors and increases the contrast of the base colors (darker than multiply)

  • Lighten: Compares the base and blend colors and keeps the lightest of the two

  • Screen: Always results in a brighter color. Depending on the luminosity values of the blend layer, it may produce different brightening levels

  • Color dodge: Brightens the colors and decreases the contrast of the base colors (brighter than screen)

  • Overlay: Combination of multiply and screen, with the base layer shining through

  • Soft light: Very similar to overlay, but softer and subtler

  • Hard light: Combination of multiply and screen, using the brightness values to make its calculations

  • Difference: Uses the difference of the base and blend pixels as the resulting blend

  • Exclusion: Similar to difference but with a lower contrast level

  • Hue: Preserves the luminosity and saturation of the base pixels while adopting the hue of the blend pixels

  • Saturation: Preserves the luminosity and saturation of the base layer while adopting the saturation of the blend layer

  • Color: Preserves the luminosity of the base layer while adopting the hue and saturation of the blend layer

  • Luminosity: Preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer

Exciting, right? But there's more…
Read more

Get your no-code fix

Join our monthly email with no-code insights and Ycode updates.
.
2019 - 2022 © Ycode. All rights reserved.
Terms & Policies