ReasonJun

CSS : cubic-bezier, background-clip, scrollLeft, innerWidth 본문

Frontend/CSS

CSS : cubic-bezier, background-clip, scrollLeft, innerWidth

ReasonJun 2023. 6. 14. 12:57
728x90

cubic-bezier

cubic-bezier is a function that allows you to create custom timing functions for CSS animations. This can be useful for creating more natural, lifelike animations.

https://cubic-bezier.com/#.17,.67,.83,.67

 

cubic-bezier.com

 

cubic-bezier.com

 

background-clip

background-clip is a property that specifies how the background of an element should be clipped. This can be used to create interesting visual effects, such as text with a gradient background.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

 

background-clip - CSS: Cascading Style Sheets | MDN

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

developer.mozilla.org

 

scrollLeft

scrollLeft is a property that specifies the number of pixels an element's content is scrolled horizontally. This can be used to manipulate scroll behavior with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

 

Element: scrollLeft property - Web APIs | MDN

The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.

developer.mozilla.org

 

innerWidth

innerWidth is a property that returns the width of the viewport, excluding scrollbars. This can be used to make responsive designs that adapt to the size of the user's screen.

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

 

Window: innerWidth property - Web APIs | MDN

The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

developer.mozilla.org

 

728x90

'Frontend > CSS' 카테고리의 다른 글

CSS / tailwindcss : rtl, ltr text-reverse problem  (0) 2023.08.06
Webkit in css  (0) 2023.06.14
CSS : min-content, object-fit, letter-spacing, inset, grid, grid-template-columns, box-shadow  (0) 2023.06.13
CSS : media  (0) 2023.06.06
CSS : Animation  (0) 2023.06.06
Comments