Зміст курсу
Advanced CSS Techniques
Advanced CSS Techniques
1. Getting Started with Advanced CSS
2. Mastering CSS Positioning
Understanding CSS PositioningRelative Positioning ExplainedChallenge: Apply Relative PositioningAbsolute Positioning in CSSChallenge: Implement Absolute PositioningFixed Positioning for Sticky UI ElementsChallenge: Work with Fixed PositioningSticky Positioning for Dynamic LayoutsChallenge: Master Sticky PositioningManaging the Stacking Order of ElementsChallenge: Control Z-Index and Overlapping ElementHandling Content Overflow in CSS
5. Transforming Elements with CSS
7. CSS Preprocessors and Sass
Combining Transitions
We can combine all transition-related properties into one line.
transition: <property> <time> <time_function> <delay>;
Let's imagine we need to add a transition property to the element. We expect:
- the change of the
background-color
property; - the time duration is
1.2s
; - the time function must be
ease-in-out
; - the delay is
250ms
.
Long form
transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;
Shorthand form
transition: background-color 1200ms ease-in-out 250ms;
Note
There isn't any difference in syntax for the browser. We can select any option we like more.
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 6