Author 诗语

Borders

Borders make items in a page stand out visually. Borders are commonly used for buttons, containers, and anywhere where divisions of content need to be clear.
Control element borders with the settings inside Advanced -> Borders.
Color
Set the border color.
Width
Set the thickness of the border.
Style
The default border style is none. Thus, there is no border.
To make the border visible, set this setting to one of the following:

dotted – Specifies a dotted border
dashed – Specifies a dashed border
solid – Specifies a solid border

Unset all borders
To reset all border settings, click unset all borders. Styles for all borders are cleared.
Individual side editing
By default, you are editing all borders simultaneously.
If you want to edit just one side, choose it from the Currently Editing dropdown.

Border Radius
The effect of setting the border radius results in rounded corners. In fact, buttons with circular right and left sides are in fact rectangles with rounded borders. Their rounding radius can be large enough to make them appear circular.
Enter the radius in pixels to round the borders at all corners.

Edit Individual Radii
If you only want to round some of the corners, you can click Edit individual radii link under the Border Radius setting.

Border Styling Tips

If you have a light element on a dark background, use a border color that is slightly darker than the background
If you have a dark element on a light background, use a border color which is slightly darker than the element
To darken the edge of an element, use a semi-transparent black border and set Background Clip to padding-box at Advanced > Background.

Classes

Classes are used to apply the same styles to multiple elements. All styles set for the class will be applied to all elements that are assigned that class.
To add a class to an element, click Choose selector... or the ID of the currently active element, and then type the class name and click Add Class. Oxygen will automatically suggest classes that match your input.

To switch between editing styles for the ID and class, simply click ID or Class to open the class dropdown and then click the Selector that you'd like to edit.
To remove a class from an element, click trash icon next to the class name.
To delete all styles assigned to a class or ID, click the eraser icon next to the Selector name.
To copy styles from one Selector to another, click the copy icon next to the Selector Name you'd like to copy the styles from, then click the Selector you'd like to copy the styles to.
A list of all classes present on your site can be found at Manage -> Selectors.

Effects

Control opacity, transitions, shadows, filters and more with the settings inside Advanced -> Effects.
Animate on Scroll
Oxygen allows you to configure animations that are triggered on scroll using the Animate on Scroll library.
Each element can have its own animation settings defined. Any settings defined at the element level will override the default global animation settings, but only for that element. To enable animations on an element, select it and go to Advanced -> Effects -> Animate on Scroll in the Properties Pane, then check the "Enable Animation" box. Once that is selected, you'll be able to define animation settings for that specific element.

Animation Type - Determines the type of animation that will be used, such as flip, slide, or fade.
Animation Duration - Determines the number of milliseconds over which the animation takes place.
Anchor Placement - Defines which position of the element, in relation to the viewport, should trigger the animation.
Animation Easing - Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
Animation Trigger Offset - Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
Animation Delay - Determines the length of time between the animation being triggered and the animation beginning.
Anchor - Allows you to trigger the animation based on another element's position. Insert the element's ID in this field to trigger the animation when the target element's position reaches the designated Anchor Placement location.
Animate Only Once - By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing "Yes."

Opacity
Controls the transparency of the element. Specify a value between 0 and 1. A setting of 0 makes the element completely transparent. A setting of 1 makes the element completely opaque.
Mix Blend Mode
Determines how an element's content should blend with the content of the element's parent and the element's background.
Further reading and examples of blend mode effects: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.
Transition
Create gradual transitions between the values of CSS properties. When a CSS property value changes, instead of changing instantly, it will gradually transition to the new value.
Transition Duration
Time, in seconds, for the transition to take place.
Timing Function
The acceleration curve of the transition.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
CSS Property
Defaults to all. Otherwise, specify the name of the CSS property that will be transitioned.
Delay
How much time, in seconds, should pass before the transition is applied.
Box Shadow
Inset
Display the shadow inside the element, instead of outside the element.
Color
Set the color of the shadow.
Horizontal Offset
How far the shadow is moved horizontally.
Vertical Offset
How far the shadow is moved vertically.
Blur
How much blur to apply to the shadow.
Spread
How much to enlarge the shadow from its initial size, which is the size of the element.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Text Shadow
Color
Set the color of the shadow.
Horizontal Offset
Set the horizontal distance of the text shadow from the original text.
Vertical Offset
Set the vertical distance of the text shadow from the original text.
Blur
How much blur to apply to the shadow.
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
Filter

blur - Blurs the element by the given number of pixels.
brightness - Adjusts the brightness of the element using a percentage value.
contrast - Sharpens or dulls the contrast of varying colors within the element.
grayscale - Adjusts the grayscale of the element. Highest value is black and white.
hue-rotate - Changes the hue of the colors in the element. Values from 0 to 360°.
invert - Inverts the colors of the element. 0% for original, 100% for full inversion.
saturate - Adjusts the color saturation of the element.
sepia - Adjusts the sepia tones of the element.

Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Transform

skew - Tilts the element horizontally (Skew x) or vertically (Skew Y).
translate - Moves the element on the X, Y, or Z axis.
rotate - Rotates the element by the degrees specified.
rotateX - Rotates the element on the X axis by the degrees specified.
rotateY - Rotates the element on the Y axis by the degrees specified.
perspective - Affects 3D transforms of descendant elements, allowing them to have a consistent depth perspective.
rotate3d - Allows you to specify a point in 3D space to rotate the element around.
scale - Scales the element according to its original size. For example, 2 is 2 times the original size of the element, whereas 0.5 is half the original size of the element.

Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transform