Within this instructional session, you’ll gain knowledge on:
- Mixing
- Translucence
- 边界
- Shadowed boxes
- 2D & 3D conversions
- Changes
- Absorbers
- Backdrop sieves
- Pointer
- Occurrences
Insider hint: You can implement most of these influences during the hovering phase or any other phase in the settings menu. Delve deeper into configuring impacts on varying phases.
Mixing
Mixing methods in Webflow present a range of distinct approaches for an entity to blend with (or overlap) other underlying elements — all without the need for custom code. Webflow manages the mix-blend mode CSS feature for you, granting the ability to define how an entity’s content should mix with the content of its parent and the background of the entity. Mixing modes unveil a plethora of inventive possibilities to surpass mere transparency adjustments for elements.
There are 16 mixing modes. Modes that function similarly are grouped close together in the mixer dropdown. These mode groupings consist of:
- Typical mode (Ordinary)
- Dimming modes (Dim, Multiply, and Color scald)
- Brightening modes (Brighten, Screen, and Color dodge)
- Stark modes (Overlay, Soft light, and Hard light)
- Relative modes (Difference and Exclusion)
- Unified modes (Hue, Saturation, Color, and Luminosity)
To view samples of each mixing mode and delve further into their application, explore our mixing mode tutorial.
Translucence
To modify the see-through level for an entity and its offspring, alter the translucence within the impact settings. You can adjust the translucence by entering a value in the input area or by moving the translucence slider to your preferred setting.
Translucence values are defined in percentages. 100% denotes opaqueness, and 0 signifies complete transparency.
边界
Borders are intended to aid your website visitors in navigating through your design as they navigate through your interactive components with their keyboard. The border surrounding an entity makes it evident to your visitor which element they’re interacting with — their attention is focused on — one specific element. On pressing Tab again on their keyboard, the border appears around the next newly focused element.
Due to this, it’s crucial to add a border to the Centered (keyboard) 国家或 Centered state of your component.
You have control over the following attributes in the Border settings:
- 设计 —specifies the type of border (e.g., solid, dashed, or dotted) encompassing an element
- 宽度 — specifies the thickness of the border. This figure can adopt any CSS unit from the set available in the unit dropdown
- 利润 — specifies the space between a border and the edge or border of an element. This figure can adopt any CSS unit from the set available in the unit dropdown
- 颜色 — specifies the color of the border
Further insights into input values and units can be explored.
至关重要的: Although choosing “None” for the Border style may seem appealing if you wish to eradicate it and revert to default browser configurations, bear in mind that this action won’t clear any other established properties (e.g., width, margin, or color), and will lead to the complete disappearance of your border, resulting in inaccessibility and a diminished user experience.
Dive into our guide on borders.
Shadowed boxes
Shadowed boxes include adornment outside or within an element’s rectangular boundary. They can be employed to channel attention or depth to buttons, segments, div blocks, or any other element on your site.
You can apply a shadowed box or form multiple shadows to layer outside of an element by navigating to 设计面板 > 效果 > Shadowed boxes.
You can personalize the type, horizontal distance, vertical distance, blur, spread, and color of the shadow.
Stacking
You can include multiple layers for most impacts in the Design panel. For instance, you can append and layer multiple shadows to an element.
In the impact settings, you can toggle the visibility of each layer by opting for the “眼睛” icon and remove each layer by selecting the “垃圾” icon. If you wish to modify the sequence of each impact, merely select the layer you intend to reorder and drag it to your desired numbering.
You have authority over the following attributes in the shadowed box settings:
- 种类 — applies the shadow inside or outside of the element’s boundaries
- 水平的 —horizontal distance of the shadow
- 垂直的 —vertical distance of the shadow
- 模糊 — impacts the clarity of the shadow blur
- Spread —designates the extension of the shadow relative to the boundaries of the element it’s on
- 颜色 —alters the color and opacity of the shadow
Gain deeper insight into input values and units.
至关重要的: Animated blurs experience slowdown and are not recommended.
2D & 3D alterations
You can incorporate alterations from the 设计面板 > 影响 > 2D & 3D alterations to manipulate an element’s appearance and location across distinct phases, such as hovering.
Four categories of alterations exist:
- 转移
- 调整大小
- 围绕
- Lean
Tap the ellipsis adjacent to 2D & 3D alterations to reach the Alteration settings and fine-tune transformation origin, backface visibility, self-perspective, and offspring perspective.
Similar to stacking impacts, you can introduce multiple types of alterations without forfeiting any preceding settings. Click the “加” icon to append an additional transformation.
Further insights into alterations can be explored.
Changes
Modifications generate a smooth animation between diverse states of an element. A duration and easing type can be tailored to generate a distinct alteration. One common use of modifications is for hover states on elements to guarantee they don’t undergo abrupt shifts upon hover.
By default, modifications are set to none, indicating they’ll automatically apply to all states. A modification should be included for every property/style established across any state.
To concoct a modification, navigate to 设计面板 > 影响 > Changes, tap the “加” icon, and specify the following attributes:
- 类型 — the property type influenced by the modification
- 期间 — stipulates the duration of the modification in milliseconds (ms). You can tweak the preset duration (200ms) using the slider or by inputting the duration value in the input zone
- 缓和 —determines the pace or speed of the modification. You can insert a value or activate the easing editor to preview presets or devise unique easing impacts
筛子
Sieves apply an exclusive visual impact to an element. They can also trigger alterations on hover states. You can incorporate sieves on an image, background video, or any other element. Sieves alter the appearance of the entire element, encompassing its offspring.
To integrate a sieve, visit 设计面板 > 影响 > 筛子, tap the “加” icon, and opt for any of the sieve effects from the dropdown menu:
- Blurring —blurs the content of an element. An increased blur radius value will amplify the blur level. 0 will not produce an effect.
- Lightening—denotes the brightness level ranging from 0 to 200%. A value of 100% will revert the element to its initial brightness.
- 对比 —indicates the contrast level between 0 and 200%. A value of 100% will reset the contrast to its original state.
- Hue shift —adjusts the colors/hue of an image or element. The value is measured in degrees. A value of 0 or 360 restores the original hue. You can modify the hue by interacting with the dot on the directional dial, clicking anywhere on the dial to set the angle, using the arrows to rotate in 45-degree increments clockwise or counterclockwise, or entering the desired angle in the input field.
- Color saturation —determines the color intensity from 0% to 200%. A value of 100% will return it to the original saturation.
- 灰度 —converts all colors to grayscale. 0% presents the original image, while 100% makes it completely grayscale.
- 倒置 —reverses all colors in the element. A value of 0% displays the original image, and 100% fully inverts the colors.
- 棕褐色 —applies a vintage yellowish appearance to an image or element. 0% represents the original image, and 100% is entirely sepia-toned.
重要的: Avoid using animated blurs as they can significantly slow down performance.
Any filters you apply or adjust will be visible on the canvas. It’s possible to add multiple filters to a single element and toggle their visibility and priority in the filter settings.
Backdrop Filtering
By applying a backdrop filter to an element, you can implement filter effects (e.g., blur, color shifts, contrast) to transparent regions within the element’s boundary. Transparent areas allow content behind the element to be affected by the backdrop filter.
You can layer multiple backdrop filters on a single element, combining them to create various visual effects.
实用提示: Because the backdrop filter affects everything behind the element, you need to introduce transparency to the element, its parts, or its background to observe the effect.
There are 8 Backdrop filters, grouping similar behaviors together in the Backdrop filters list. These grouped filters include:
- Global (Blur)
- Color corrections (Brightness, Contrast, Hue shift, Saturation)
- Color enhancements (Grayscale, Invert, Sepia)
For demonstrations of each backdrop filter and detailed instructions on their application, refer to our guide on backdrop filters.
Mouse Pointer
Choosing an appropriate cursor is essential for guiding users on expected interactions while navigating a webpage. Mismatched cursor styles may lead to confusion or inaction.
The default cursor setting is ‘auto’, displaying the default cursor based on specific element types as defined by the browser’s settings. For instance, links trigger a pointer cursor when hovered over, and text displays a text cursor.
In most scenarios, sticking to the default setting is recommended to let the browser determine the appropriate cursor. However, you can override the default cursor by adjusting the cursor value in the 样式面板 > 效果 > Cursor.
You can preview the cursor behavior when hovering over your styled element in the preview mode.
Responsive Actions
Pointer events provide control over elements that respond to clicks and touches, especially useful for managing interactions on overlapping elements (e.g., background video with overlapping text and icons) or designs with interactive hover effects or tooltips.
The default pointer event value is ‘auto’, facilitating standard click and touch interactions. Switching the value to ‘none’ disables all click and touch interactions on the selected element in the 样式面板 > 效果 > 活动.
Explore more about pointer events.
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日