🔰 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

⭐️ 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