Html and Css & Jsآموزش

🔅 Light to Dark mode in CSS



💎 @Htmlcss_channels  | #HTML #css #JavaScript

CSS Grid Crash Course


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اسکرول نرم به المنت‌ها با متد scrollIntoView

یکی از زیباترین افکت‌هایی که می‌تونی به سایتت اضافه کنی، اسکرول نرم هست. وقتی کاربر روی یه لینک کلیک می‌کنه، صفحه به جای پرش ناگهانی، به‌صورت نرم و روان به المنت مورد نظر اسکرول می‌شه. بیا ببینیم چطور این کار رو انجام بدیم.
؛ 🎯 scrollIntoView چیه؟ scrollIntoView یک متد در JavaScript هست که المنت مورد نظر رو در ناحیه قابل مشاهده مرورگر قرار می‌ده. این متد از قدیمای Web API هست ولی با گزینه behavior: 'smooth' قابلیت اسکرول نرم بهش اضافه شده.

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  | #HTML #css #JavaScript

✅ هوش مصنوعی در سایت 'arxiv' ادغام شده و این سایت به 'autoarxiv' تغییر پیدا کرد.

هوش مصنوعی اضافه شده چه کار می‌کند:
• جستجوی هوشمند: به جای جستجوی کلمه‌کلیدی ساده، با زبان طبیعی می‌توانید مقاله پیدا کنید
• خلاصه‌سازی خودکار: مقالات طولانی را در چند خط خلاصه می‌کند
• پیشنهاد مقالات مرتبط: مقالات مشابه را پیشنهاد می‌دهد• پاسخ به سوال درباره مقاله: می‌توانید از محتوای مقاله سوال بپرسید
• تحلیل روندهای تحقیقاتی: کمک می‌کند موضوعات داغ هر حوزه را بشناسید

https://openresearch.sh/



💎 @Htmlcss_channels  | #HTML #css #JavaScript

🔅 Difference Between opacity, visibility and display



💎 @Htmlcss_channels  | #HTML #css #JavaScript

۶سایت برای پیدا کردن چالش‌ UIUX :دقیقاً کم‌ کم آمادت میکنن یک Case Study حرفه‌ای بسازی.

1. Daily UI → http://dailyui.co
2. UI Coach → http://uicoach.io
3. UX Challenge → http://uxchallenge.co
4. UX Tools → http://uxtools.co/challenges
5. Fake Clients → http://fakeclients.com
6. Good Brief → http://goodbrief.io


💎 @Htmlcss_channels  | #HTML #css #JavaScript

۸۰سوال مصاحبه فرانت اند به همراه پاسخ

💎 @Htmlcss_channels  | #HTML #css #JavaScript

فونت QR Font یک فونت TrueType جالب است که متن را مستقیماً به QR Code تبدیل می‌کند.

با قرار دادن متن داخل براکت، فونت آن را به کد QR تبدیل می‌کند و بقیه متن را مثل یک فونت معمولی نمایش می‌دهد. نسخه‌های مختلف این فونت برای ظرفیت‌های متفاوت در دسترس هستند.

https://github.com/jimparis/qr-font


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🎨 تکنیک‌های ایجاد پس‌زمینه فید شده (Faded Background) در CSS

پس‌زمینه فید شده یک تکنیک طراحی وب است که با ایجاد یک لایه شفاف روی تصویر پس‌زمینه، خوانایی متن و عناصر روی آن را بهبود می‌دهد. این تکنیک به‌ویژه برای تصاویر با پس‌زمینه روشن یا پیچیده بسیار مفید است.


🛠️ روش‌های مختلف ایجاد پس‌زمینه فید شده

۱. استفاده از Linear Gradient با Opacity

.section {
  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / 0.5),  /* سیاه با ۵۰٪ شفافیت */
      rgb(0 0 0 / 0)     /* کاملاً شفاف */
    ),
    url(background.png); /* تصویر پس‌زمینه */
}

نکات کلیدی:
از تابع rgb() با پارامتر alpha برای کنترل شفافیت استفاده می‌شود
rgb(0 0 0 / 0.5) یعنی سیاه با ۵۰٪ شفافیت
rgb(0 0 0 / 0) یعنی کاملاً شفاف
می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید

۲. استفاده از RGBA

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی:
rgba(r, g, b, alpha) همان rgb(r g b / alpha) است
alpha از ۰ تا ۱ است
۰ = کاملاً شفاف
۱ = کاملاً غیرشفاف
۳. استفاده از رنگ‌های دیگر

.section {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),  /* سفید با ۷۰٪ شفافیت */
      rgba(255, 255, 255, 0)
    ),
    url(background.png);
}

۴. استفاده از رنگ‌های متعدد

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

۵. استفاده از رنگ‌های متعدد با رنگ‌های مختلف

.section {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(background.png);
}

نکات کلیدی:
می‌توانید رنگ‌های مختلف را با درصد شفافیت متفاوت استفاده کنید
این روش برای ایجاد افکت‌های پیچیده‌تر استفاده می‌شود


📝 مثال‌های عملی
مثال ۱: پس‌زمینه فید شده برای متن سفید

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

مثال ۲: پس‌زمینه فید شده برای متن سیاه

.hero {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0)
    ),
    url(hero-bg.jpg);
  color: black;
  padding: 60px 20px;
  text-align: center;
}

مثال ۳: پس‌زمینه فید شده برای متن رنگی

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: #ff6b6b;
  padding: 60px 20px;
  text-align: center;
}

🎨 افکت‌های پیشرفته
افکت ۱: پس‌زمینه فید شده با دو رنگ

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0)

),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۲: پس‌زمینه فید شده با رنگ‌های مختلف

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

افکت ۳: پس‌زمینه فید شده با رنگ‌های متعدد

.hero {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.4),
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    url(hero-bg.jpg);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

@Htmlcss_channels

🔅CSS: Faded Background

کدها به همراه مثال های عملی در پست بعدی


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Clean Code JavaScript :

مجموعه‌ای از اصول برای نوشتن کدهای تمیزتر و قابل نگهداری‌تر در JavaScript

در این ریپو نکاتی مثل نام‌گذاری بهتر، ساده‌سازی توابع، کاهش پیچیدگی و ساختاردهی بهتر کد بررسی شده تا توسعه و رفع باگ راحت‌تر شود.

https://github.com/ryanmcdermott/clean-code-javascript


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی ریپو Awesome Web Design Tools :

در این ریپو ابزارها، سایت‌ها، کتابخانه‌ها و منابع مختلفی برای طراحی و توسعه وب و رابط کاربری جمع‌آوری شده‌

https://github.com/nafasebra/awesome-webdesign-tools


💎 @Htmlcss_channels  | #HTML #css #JavaScript

معرفی بهترین منابع برای Front End Design

🌈 Color Sites:
1. colorhunt.co
2. coolors.co
3. color.adobe.com
4. pigment.shapefactory.co

💻 Sites To Download Fonts:
1. dafont.com
2. 1001fonts.com
3. fontsquirrel.com
4. fontfreak.com/fonts-new.htm

🖼 Sites To Download Vector Logos:
1. seeklogo.com
2. logovector.net
3. logotypes101.com
4. logos-vector.com

🔵 Sites To Download Icons:
1. flaticon.com
2. freeicons.io
3. iconstore.co
4. iconfinder.com
5. digitalnomadicons.com
6. iconstore.co

🖌 Brushes Download Sites:
1. brushking.eu
2. brusheezy.com/brushes
3. myphotoshopbrushes.com
4. fbrushes.com
5. gfxfever.com

📁 Sites To Download Files:
1. freepik.com
2. all-free-download.com
3. vecteezy.com
4. freeimages.com

📸 Sites To Download Mockups:
1. mockupsforfree.com
2. mockupworld.co
3. graphicburger.com
4. zippypixels.com

✨ Inspiration Sites:
1. inspirationde.com
2. designspiration.net
3. pinterest.com
4. dribbble.com

🎥 Video Sites:
1. mixkit.co
2. coverr.co
3. motionplaces.com
4. videezy.com

🖼 Photo Sites Without Background:
1. cleanpng.com
2. pngimg.com
3. footyrenders.com
4. pngtree.com

📷 Photo Sites:
1. unsplash.com
2. pexels.com
3. pixabay.com
4. stocksnap.io
5. burst.shopify.com.



💎 @Htmlcss_channels  | #HTML #css #JavaScript