LICENSE AGREEMENT ( the parties hereby agree as follows ):
- The Software (the App) is licensed for the sole use of the Licensee and shall be used only for the purposes set forth in this Agreement.
- The Licensee is granted a non-exclusive, non-transferable, and non-assignable right to use the Software solely for its intended purpose. No ownership rights in the Software or its documentation are transferred to the Licensee. Title to, and ownership of, the Software, documentation, and all associated proprietary rights, including but not limited to patents, copyrights, authors’ rights, trademarks, trade names, graphic designs, design elements, workflows, algorithms, data structures, organizational features, know-how, and trade secrets, shall remain with the Licensor at all times.
- The Licensee shall not reverse engineer, decompile, disassemble, modify, adapt, translate, or create derivative works of the Software, nor attempt to derive its source code or underlying ideas, algorithms, structure, or design.
- The Software may only be used on equipment owned or controlled by the Licensee. The Licensee shall protect the Software using security measures at least as stringent as those used to protect its own confidential and proprietary information.
- The Licensee acknowledges that the Software, including any customizations, updates, or corrections, is the property of the Licensor. The Licensee further acknowledges that the Software constitutes the Licensor’s trade secret, is valuable and confidential, and must be protected from unauthorized use or disclosure. All rights, including all modifications, enhancements, and derivative works, shall belong exclusively to the Licensor.
- The Licensor shall not be liable for any damages arising from the Licensee’s use of the Software. The Licensee agrees to indemnify and hold harmless the Licensor against any loss, liability, or damage related to such use.
- The Software is provided as is, without warranties of any kind, whether express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, or non-infringement. The Licensor does not warrant that the Software will be error-free or uninterrupted.
- If the Licensee requests additional services, the Licensor shall notify the Licensee that such services are outside the scope of this Agreement and provide a separate quotation for approval.
- The Licensor warrants that it will not intentionally install any virus, malware, or disabling code, nor take any action that would interfere with the Licensee’s lawful and uninterrupted use of the Software.
- The Licensor reserves the right to update or modify this License Agreement at any time, with or without prior notice. Help:
Units
There are two types of length units: absolute and relative.
- Absolute lengths:
Absolute length units are fixed, and their values appear exactly as specified:
px: pixels
pt: points
- Relative lengths:
Relative length units define a size relative to another property:
vw: relative to 1% of the viewport width (browser window size)
vh: relative to 1% of the viewport height (browser window size)
%: relative to the parent element (defines width/height as a percentage of the containing block)
Note: none and auto are not units; they are keywords evaluated by the browser.
Animation
- duration:
Specifies how long one animation cycle takes to complete.
- delay:
Specifies how long to wait before starting the animation. Negative values cause the animation to start partway through its cycle, as if it had already been running for that amount of time.
- iteration-count:
Defines how many times an animation should be played.
number: a finite number of repetitions
infinite: the animation repeats forever
- direction:
Specifies whether the animation plays forward, backward, or alternates:
normal: forward direction
reverse: backward direction
alternate: forward first, then backward
alternate-reverse: backward first, then forward
- timing-function:
Defines the speed curve of the animation over time.
cubic-bezier(x1, y1, x2, y2): custom timing functions where values typically range from 0 to 1:
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
- steps():
Defines a stepped timing function. The first parameter sets the number of steps (must be a positive integer greater than 0). The second parameter can be start or end and determines when the step change occurs within each interval.
- animation-play-state:
Specifies whether the animation is running or paused.
- hue-rotate:
Defines the degree of color rotation in the HSL color space filter.
- Note:
Holding down the Set or Clear button for more than one second activates automatic mode (Set: left-to-right selection, Clear: right-to-left selection).
- Copy clean code.
- Convert code to an image.
- Box dimensions must be specified in pixels.
- Supports text and box styling (no animations), custom font selection, and image uploads (URLs are not supported).
- The top and bottom margins of adjacent elements may collapse into a single margin equal to the larger of the two. This behavior does not occur with left and right margins; it only applies to top and bottom margins.
- To center an element horizontally, set its left and right margins to auto. The element will occupy its specified width, and the remaining horizontal space will be evenly distributed between the left and right margins.
position : : :
- Elements are positioned using the top, right, bottom, and left properties. However, these properties only work when the position property is set to a value other than static. Their behavior depends on the selected position value.
- The top, right, bottom, and left properties have no effect on statically positioned elements. Such elements follow the normal document flow and are not offset from their default position.
- Setting the top, right, bottom, or left properties on a relatively positioned element offsets it from its normal position. However, the space originally occupied by the element is preserved, so the layout of surrounding content remains unchanged.
- An element with position: fixed is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled. The top, right, bottom, and left properties determine its position. A fixed-positioned element is removed from the normal document flow and does not leave a gap where it would normally appear.
- An element with position: absolute is positioned relative to its nearest positioned ancestor. If no positioned ancestor exists, it is positioned relative to the initial containing block (typically the document or viewport, depending on the context). Absolutely positioned elements are removed from the normal document flow and may overlap other elements.
- An element with position: sticky is positioned based on the user's scroll position. It behaves like a relatively positioned element until it reaches a specified offset, after which it "sticks" in place like a fixed-positioned element. For position: sticky to work, you must specify at least one of the top, right, bottom, or left properties.
overflow :
- The overflow property only applies to block-level elements with a specified height.
z-index :
- The z-index property applies only to positioned elements (elements with position: relative, absolute, fixed, or sticky).
- If no background is specified, the default is no background.
duration :delay :iteration-count :
direction :timing :
play-state :
direction (angle) :background-size : background :color1 :color2 :color3 :color4 :color5 :color6 :color7 : background : background-position : background-size :hue-rotate : TO background :hue-rotate : TO background-position : TO background-size :
duration :delay :iteration-count :
direction :timing :
play-state :
vertical-align : TO vertical-align :
duration :delay :iteration-count :
direction :timing :
play-state :
- The outline is drawn outside the border of an element and may overlap with other content. Additionally, the outline is not included in the element's dimensions, so its width and height do not affect the overall size of the element.
duration :delay :iteration-count :
direction :timing :
play-state :
duration :delay :iteration-count :
direction :timing :
play-state :
blur : TO blur :
duration :delay :iteration-count :
direction :timing :
play-state :
transparent : TO transparent :
duration :delay :iteration-count :
direction :timing :
play-state :
mask-position : mask-size : TO mask-size :
duration :delay :iteration-count :
direction :timing :
play-state :
spacing : TO spacing :
duration :delay :iteration-count :
direction :timing :
play-state :
height : TO height :
font-size (px) :color :background :
duration :delay :iteration-count :
direction :timing :
play-state :
text-align : TO text-align :
duration :delay :iteration-count :
direction :timing :
play-state :
thickness : TO thickness :
duration :delay :iteration-count :
direction :timing :
play-state :
size : TO size :
- Select font : for offline content.
- Suggested formats : otf, ttf, woff, and woff2.
- Import font : for online content.
- You only need to select or import a new font the first time. After that, you do not need to repeat the process; just remember the correct font name.
- Before using a font, obtain permission from the font owner.
duration :delay :iteration-count :
direction :timing :
play-state :
TO TO
duration :delay :iteration-count :
direction :timing :
play-state :
duration :delay :iteration-count :
direction :timing :
play-state :
color :hue-rotate : TO color :hue-rotate :
- The rainbow color effect may interfere with any property that has a color or background.
duration :delay :iteration-count :
direction :timing :
play-state :
gradient : direction (angle) :background-size : color :color1 :color2 :color3 :color4 :color5 :color6 :color7 : background-position : background-size : TO background-position : TO background-size :
- Using blending to create cutout/knockout text.
duration :delay :iteration-count :
direction :timing :
play-state :
blending :color :hue-rotate :blending : TO color :hue-rotate :
- The rainbow highlight effect may affect the appearance of elements with a color or background property.
- Using blending to create cutout/knockout text.
duration :delay :iteration-count :
direction :timing :
play-state :
- Select image : for offline content.
- Suggested formats : gif, jpeg, jpg, png, and webp.
- Image URL : for online content.
- Before using an image, obtain permission from the image owner.
or
- Select audio : for offline content.
- Suggested formats : mp3, ogg, webm, and wav.
- Audio URL : for online content.
- Before using audio, obtain permission from the audio owner.
or border-radius :
- Select video : for offline content.
- Suggested formats : mp4, ogv, and webm.
- Video URL : for online content.
- Before using a video, obtain permission from the video owner.
active page :insert page (after number page) :delete page :
display :
duration :delay :iteration-count :
direction :timing :
play-state :
- The top and bottom margins of adjacent elements may collapse into a single margin equal to the larger of the two. This behavior does not occur with left and right margins; it only applies to top and bottom margins.
- To center an element horizontally, set its left and right margins to auto. The element will occupy its specified width, and the remaining horizontal space will be evenly distributed between the left and right margins.
- Elements are positioned using the top, right, bottom, and left properties. However, these properties only work when the position property is set to a value other than static. Their behavior depends on the selected position value.
- The top, right, bottom, and left properties have no effect on statically positioned elements. Such elements follow the normal document flow and are not offset from their default position.
- Setting the top, right, bottom, or left properties on a relatively positioned element offsets it from its normal position. However, the space originally occupied by the element is preserved, so the layout of surrounding content remains unchanged.
- An element with position: fixed is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled. The top, right, bottom, and left properties determine its position. A fixed-positioned element is removed from the normal document flow and does not leave a gap where it would normally appear.
- An element with position: absolute is positioned relative to its nearest positioned ancestor. If no positioned ancestor exists, it is positioned relative to the initial containing block (typically the document or viewport, depending on the context). Absolutely positioned elements are removed from the normal document flow and may overlap other elements.
- An element with position: sticky is positioned based on the user's scroll position. It behaves like a relatively positioned element until it reaches a specified offset, after which it "sticks" in place like a fixed-positioned element. For position: sticky to work, you must specify at least one of the top, right, bottom, or left properties.
position : : :
- The overflow property only applies to block-level elements with a specified height.
overflow :
- The z-index property works only on positioned elements (elements with position: relative, position: absolute, position: fixed, or position: sticky).
z-index :
- If the background property is not specified, the element has no background by default.
duration :delay :iteration-count :
direction :timing :
play-state :
direction (angle) :background-size : background :color1 :color2 :color3 :color4 :color5 :color6 :color7 : background : background-position : background-size :hue-rotate : TO background :hue-rotate : TO background-position : TO background-size :
duration :delay :iteration-count :
direction :timing :
play-state :
vertical-align : TO vertical-align :
duration :delay :iteration-count :
direction :timing :
play-state :
- The outline is drawn outside the border of an element and may overlap with other content. Additionally, the outline is not included in the element's dimensions, so its width and height do not affect the overall size of the element.
duration :delay :iteration-count :
direction :timing :
play-state :