Light/Dark Toggle With Morphing Icon

Theme switcher. Implemented using CSS.

⤷Get code


💎 @Htmlcss_channels | #css #JavaScript #HTML

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

3D Cards | HTML CSS



💎 @Htmlcss_channels | #css #JavaScript #HTML

Making smooth scrolling to elements using the scrollIntoView method

JS:

const links = document.querySelectorAll('.link');

links.forEach((item) => {
 item.addEventListener('click', (e) => {
  e.preventDefault();

  let id = item.getAttribute('href');
  let formattierID = id.substring(1);
  let section = document.getElementById(formattierID);

  section.scrollIntoView({
   behavior: 'smooth',
  });
 });
});

💎 @Htmlcss_channels | #css #JavaScript #HTML

Shoe Swap

The logic for switching slides is implemented in JS. Animated in SCSS.

Code


💎 @Htmlcss_channels | #css #JavaScript #HTML

⭐️ 15 افزونه مفید کروم برای توسعه‌دهندگان وبسایت

ابزارهای موجود در این مقاله به ساده‌سازی و سرعت بخشیدن به فرآیند توسعه و آزمایش front-end کمک می‌کنند.

- از استخراج سبک های CSS از وب سایت ها گرفته تا تجزیه و تحلیل و بهینه سازی SEO.

https://proglib.io/p/15-superpoleznyh-plaginov-chrome-v-pomoshch-frontenderu-2024-09-20

💎 @Htmlcss_channels | #css #JavaScript #HTML

Infinite Loop | HTML CSS


💎 @Htmlcss_channels | #css #JavaScript #HTML

Custom Scrollbar in CSS

💎 @Htmlcss_channels | #css #JavaScript #HTML

CSS Toggle Switch | HTML CSS JavaScript


💎 @Htmlcss_channels | #css #JavaScript #HTML

🟢از این وبسایت ها می تونید UI design را رایگان یاد بگیرید

Motion 👉 https://60fps.design

Patterns 👉 https://catalogue.projectsbyif.com

AB Tests 👉 https://abtest.design

Inspiration 👉https://designspells.com

Breakdowns 👉 https://uxsnaps.com

UI components 👉 https://uiplaybook.dev


💎 @Htmlcss_channels | #css #JavaScript #HTML

SVG Animation


This is an SVG image animated in SCSS

👉 code


💎 @Htmlcss_channels | #css #JavaScript #HTML