رسپانسیو سازی صفحات وب با کمک مدیا کوئری- قسمت سوم

مینی پروژه اول

نکته : برای اینکه خروجی شمام شبیه به خروجی من باشه باید این ویدیو رو هم نگاه بکنید
https://www.tgoop.com/htmlcss_channel/7


فایل های مورد نیاز :
https://www.tgoop.com/htmlcss_channel/15


مدرس محمد نیکو
ID Channel : @htmlcss_channel

نظر فراموش نشه که یه فید بکی بگیریم

رسپانسیو سازی صفحات وب با کمک مدیا کوئری- قسمت چهارم

مینی پروژه دوم- رسپانسیو سازی نوبار

نکته : برای اینکه خروجی شمام شبیه به خروجی من باشه باید این ویدیو رو هم نگاه بکنید
https://www.tgoop.com/htmlcss_channel/7


فایل های مورد نیاز :
https://www.tgoop.com/htmlcss_channel/15


مدرس محمد نیکو
ID Channel : @htmlcss_channel

نظر فراموش نشه که یه فید بکی بگیریم

اموزش ساخت خوده این نوبار
https://www.tgoop.com/htmlcss_channel/31

رسپانسیو سازی صفحات وب با کمک مدیا کوئری- قسمت پنجم

مینی پروژه سوم- رسپانسیو کردن پروژه تلگرام

نکته : برای اینکه خروجی شمام شبیه به خروجی من باشه باید این ویدیو رو هم نگاه بکنید
https://www.tgoop.com/htmlcss_channel/7


فایل های مورد نیاز :
https://www.tgoop.com/htmlcss_channel/15


مدرس محمد نیکو
ID Channel : @htmlcss_channel

نظر فراموش نشه که یه فید بکی بگیریم

منطق پیاده سازی تم دارک یا هر تم دیگه ای به چه شکله؟

داخل این ویدیو با یک مثال خیلی ساده توضیح دادم

مدرس محمد نیکو
ID Channel : @htmlcss_channel

سورسی که به زودی قرار هست آموزش ساختشو بزاریم اینه

فوتر رو تغییر میدیم البته یه خورده

اگر نظری دارید کامنت کنید

حالا که فلا وقت نمیکنیم به صورت ویدیو آموزش بزاریم یک خورده هم متنی اموزش میزاریم

در مورد واحد های نسبی em و rem

em
—————————————————————————

مثلا اگر ما به تگ p اگه بگیم
font-size:10px = 1em
این میشه یکem
بعد اگر باز بگیم 2em میشه 20 پیکسل
width:2em = 2 * 10 = 20px

حالا اگر برای این تگ p فونت سایزی اول ست نکنیم فونت سایز عنصر پدرشو در نظر میگیره باز اگر برا والد شم در نظر نگرفته باشیم فونت سازی رو همینطوری یه پله یه پله والد ها دیگه رو چک میکنه تا به فونت سایز برسه
اگرم دیگه هیشکدوم فونت سایز نداشتن به عنصر روت html میرسه که فونت سایز پیشفرضش 16px هستش که 16 پیکسل میشه یکem

—————————————————————————

rem



فونت سایز عنصر html که 16 باشه هستش که میشه یک rem = 16px

و هرجا بگیم مثلا 2rem میشه 32px
16* 2 = 32px

ویژیگی Position در Css بخش اول

در این ویدیو برسی میکیم
مفهوم Flow
مفهوم ViewPort

مدرس محمد نیکو
ID Channel : @htmlcss_channel

ویژیگی Position در Css بخش دوم

در این ویدیو برسی میکیم
کار ویژیگی position
مقادیر ویژیگی position
نقطه مبدا مختصات


مدرس محمد نیکو
ID Channel : @htmlcss_channel

ویژیگی Position در Css بخش سوم

پوزشین relative

توصیه میکنم همه دوستان ببینن حتی اونایی بلدن پوزشین هارو

مدرس محمد نیکو
ID Channel : @htmlcss_channel

ویژیگی Position در Css بخش چهارم

پوزشین absolute
فرق بین پوزشین absolute و relative
مدرس محمد نیکو
ID Channel : @htmlcss_channel

با سلام بعضی از دوستان سوال میپرسن که فرق flex-basis و width چیه خب من سعی میکنم یه چندتاشو که حضور ذهن دارم و مهم تر هستن رو بگم

یکی از فرق هاش اینکه تا وقتی عنصر پدر دیس پلی فلکس نگیره فلکس بیسیس کار نمیکنه ولی width اینطوری نیست
و اگر فلکس دایرکشن row باشه به عرض اون مقدار اختصاص داده میشه اگر کالمن باشه به ارتقاعش اختصاص داده میشه
و اینکه فلکس بیسس رو با شرینگ و گرو میتونیم به خوبی استفاده کنیم جهت اینکه به تغییر دلخواهمون برسیم
وقتی فلکس بیسیس میدیم به عصر نگه داره اندازه ایتم های فرزندشو نادیدیده میگیره ولی توی width اینطوری نیست
وقتی وید و فلکس بیسس رو باهم استفاده میکی بیسس الویت داره

: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_channel

گروه چت برنامه نویسی

https://www.tgoop.com/programmerscht

سلام
گروه جدید فرانتمون دوستان جوین شید

https://www.tgoop.com/Frontend_Grp

اموزش ساخت این اسلایدر رو با جاوا اسکریپت

قسمت اول

برا پست ها ری اکشن بزارید آموزش های بیشتری میزارم

آموزش صفحه بندی ساده در پست بعدی

html css js jquery