M
MH Tsai
7 CSS tricks you must learn
- clip-path: This property allows you to create complex shapes by clipping an element to a polygon, circle, or other shape. Example:
clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%); - gap: This property allows you to add space between grid or flexbox items without having to add extra margins or padding. Example:
gap: 20px; - backdrop-filter: This property adds a blur or other effect to the background of an element, creating a layered effect. Example:
backdrop-filter: blur(10px); - scroll-snap: This feature allows you to control the scrolling behavior of an element, snapping it to specific points or sections. Example:
scroll-snap-type: y mandatory; - aspect-ratio: This property allows you to set the aspect ratio of an element, making it easier to create responsive designs. Example:
aspect-ratio: 16 / 9; - :is() and :where(): These new pseudo-classes allow you to simplify and streamline your CSS selectors. Example:
:is(h1, h2, h3) { color: blue; } - min(), max(), and clamp(): These new CSS functions allow you to create more flexible and dynamic layouts, especially for typography. Example:
font-size: min(2vw, 24px);