You can make the UI cleaner by reducing or removing scrollbars using the scrollbar-width property

Example of a thin scrollbar :

ul {
  scrollbar-width: thin;
}

Example of a hidden scrollbar (the area remains scrollable):

.cards-container {
  scrollbar-width: none;
}

Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.

As a result, the scroll works, but the UI looks neater.


💎 @Htmlcss_channels | #css #JavaScript #HTML

🔰 Container queries in CSS

If you have not tried out container queries yet, would highly recommend that you do

This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.

👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container

👉 Some other examples include, when you want to style an individual card based on its size

💎 @Htmlcss_channels | #css #JavaScript #HTML

Icon library with 3000 icons for web and mobile

https://github.com/Richard9394/MingCute


💎 @Htmlcss_channels | #css #JavaScript #HTML

Electric Border Effect ⚡ | HTML & CSS

💎 @Htmlcss_channels | #css #JavaScript #HTML

Organic Circles Animation | HTML & CSS



💎 @Htmlcss_channels | #css #JavaScript #HTML

Sweep Light Animation | HTML & CSS

💎 @Htmlcss_channels | #css #JavaScript #HTML