Go Back

MH Tsai

7 CSS tricks you must learn

  1. 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%);
  2. gap: This property allows you to add space between grid or flexbox items without having to add extra margins or padding. Example: gap: 20px;
  3. 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);
  4. 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;
  5. 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;
  6. :is() and :where(): These new pseudo-classes allow you to simplify and streamline your CSS selectors. Example: :is(h1, h2, h3) { color: blue; }
  7. 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);

2024 ❤️ MH (Frank) Tsai