با سلام . توی این کانال آموزش های HTML CSS و JS قرار خواهد گرفت

چند نکته :

🔹آموزش هایی که قرار داده میشه از 0 نخواهد بود و سطحش از مبتدی بالاتره ولی سعی میشه دستوراتی که مبهمه رو کامل توضیح بدیم (البته بعضی از ویدیو ها ممکنه مقدماتی باشه)
🔹 ممکن هست یک مینی پروژه رو چندین بار آموزش بدیم اما به روش ها مختلف و ممکنه بعضی از آموزش ها رو از دوره های دیگه براتون قرار بدیم پس نترسید و نگاه کنید
🔹 یادتون نره که این کانال فقط برای افزایش تسلط شما به HTML CSS و Js ساخته شده لذا افرادی که خیلی مبتدین نترسن و آموزش هارو نگاه کنن و تمرین کنن تا یادبگیرن


♦️اگر از دوستان کسی تدریس رو دوست داشت و میخواد به کسی چیزی یاد بده با ایدی زیر تماس داشته باشه تا آموزش های اونم در کانال قرار بگیره.

🆔 @maryam3771

:where(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
}

قبلا به این شکل انجام میدادیم

header p:hover,
main p:hover,
footer p:hover {
    color: red;
    cursor: pointer;
}

خب دوستان توی css دو تا روش جدید معرفی شده که میتونید باشون چندتا المنت رو انتخاب کنید

اون توابع ()where: و ()is: هستن

- با این توابع می‌تونیم به صورت گروهی و یکجا چندین المنت رو انتخاب کنیم. کاری که قبلاً امکان‌پذیر نبود و باید المنت‌ها رو تک تک انتخاب می‌کردیم

- این ۲ تابع کارایی مشابهی دارن. اما باید بدونیم که المنت‌هایی که با where انتخاب می‌کنیم، پایین‌ترین میزان Specificity رو دارن. اما Specificity توی is بستگی به المنت‌هایی داره که انتخاب می‌کنیم

- این دو تابع نسبتاً جدید هستن و بنابراین پشتیبانی مرورگرها اهمیت داره:
https://developer.mozilla.org/en-US/docs/Web/CSS/:where


اینکه حالا Specificity چیه رو خدمتون در پست های بعدی میگم



#css

ID Channel : @htmlcss_channels

با کلیک کردن، رنگ پس زمینه را تغییر دهید

این کد صفحه ای ایجاد می کند که با کلیک کردن یا بارگذاری صفحه، رنگ پس زمینه را تغییر می دهد. هر کلیک یک رنگ تصادفی جدید در قالب HEX ایجاد می کند:

body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

🆔 @htmlcss_channels

✅ ‌یه سایت خیلی خفن برای ساخت اسکرول بار های شخصی سازی شده برای خودتون

🔥 در اخر بهتون کد css میده که میتونید توی سایتتون ازش استفاده کنید

🌐 https://scrollbar.app


💎 Channel: @htmlcss_channels

Circle Animation | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

🌐 unocss.dev : The instant on-demand Atomic CSS engine

یه فریمورک css مشابه Tailwind هستش ، اما با فیچر های خفن تر ، اگه قبلاً با Tailwind کار کردید شدیداً پیشنهاد می‌کنم تستش کنید

https://github.com/unocss/unocss



💎 Channel: @htmlcss_channels

Buttons | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels