6 CSS tips and tricks you don’t want to miss out on in 2021:

6 CSS tips and tricks you don’t want to miss out on in 2021:

1) :where() pseduo-class function

The :where() CSS pseudo-class function accepts a selection list as an argument and picks any element that one of the selectors in the list can select.

where.JPG

2) Conic gradients

The conic-gradient() CSS method generates a gradient with colour transitions spun around a centre point (rather than radiating from the center). Pie charts and colour wheels are two examples of conic gradients.

color1.jpg

color2.jpg

3) Scroll Snap

When the scroll is finished, scroll snapping allows you to define and restrict the boundaries of the scroll viewport to specific locations or items.

snap.jpg

4) Setting aspect ratio

The aspect ratio is a proportional relationship between the width and height of a piece of artwork (commonly expressed as width:height).

  • 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

  • 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%

aspect.jpg

5) Scss variables

Consider variables to be a place where you can save data that you want to reuse across your CSS. Colors, font stacks, and any CSS value you believe you'll want to repeat can all be saved. The $ sign is used in CSS to make something a variable.

saas1.jpg

6) Scss Mixins

A mixin is a collection of CSS declarations that you may reuse across your site. To make your mixin more flexible, you may also pass in values.

saas2.jpg

Thanks for visiting. Appreciate your feedback. Keep learning. Follow for more.