⭐️ CSS Clamp and font-size

p {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

💎 @Htmlcss_channels | #css #JavaScript #HTML

🔰 5 نکته و ترفند CSS برای طراحی Responsive website بهتر

💎 @Htmlcss_channels | #css #JavaScript #HTML

نکته CSS :تراز کردن متن و آیکون

💎 @Htmlcss_channels | #css #JavaScript #HTML

این آموزش به شما کمک می کند تا یک افزونه کروم بسازید که هر صفحه وب را با استفاده از جاوا اسکریپت و Manifest V3 تجزیه و تحلیل می کند.


https://www.freecodecamp.org/news/how-to-build-a-chrome-extension-using-javascript-and-manifest-v3/


💎 @Htmlcss_channels | #css #JavaScript #HTML

Color palette inspiration
🔴 🟠 🟡 🟢 🔵 🟣

Curated color palette ideas displayed in an example website.

Have a play 👇
https://www.happyhues.co


💎 @Htmlcss_channels | #css #JavaScript #HTML

JavaScript array methods


💎 @Htmlcss_channels | #css #JavaScript #HTML

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