Course Content
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
Scaling Elements
scale()
allows us to increase or decrease the element size. Also, we can resize an element only vertically using the scaleY()
property or only horizontally using the scaleX()
property.
The values for the scale
functions must be unitless. By default, the value is 1
, which means make no changes.
scale()
function can get two values. The first (X-value
) is the number representing the horizontal resize. The second (Y-value
) is the number representing the vertical resize. If we set one value, the browser applies the same for horizontal and vertical scales;scaleX
andscaleY
functions get one value and change an element horizontally and vertically, respectively.
Let's have some practice and add scaling for the following elements:
index.html
index.css
Everything was clear?
Thanks for your feedback!
Section 5. Chapter 2