This media is not supported in your browser
VIEW IN TELEGRAM
کلیپ طراحی چشم متحرک با :
#css #html #js
که توی پیج اینستاگراممون به ادرس زیر قرار گرفته:
https://instagram.com/mohsenmodhejofficial?igshid=1lbdalwxpdbb2
🖥 @FunProGraming
#css #html #js
که توی پیج اینستاگراممون به ادرس زیر قرار گرفته:
https://instagram.com/mohsenmodhejofficial?igshid=1lbdalwxpdbb2
🖥 @FunProGraming
#نکته_آموزشی #css
⭕ * + سلکتور
🔶️ * به شما این اختیار را می دهد تا تمام المان های یک سلکتور (selector) خاص را انتخاب کنید. برای مثال، اگر شما *p را استفاده کرده اید و سپس کد دستورهای CSS را به آن اضافه کرده اید، آن عمل برای تمام المان های موجود در سند شما که تگ <p> دارد، اعمال خواهد شد. با این روش می توانید همزمان تغییرات را در بخش های مورد نظر وب سایت خود اعمال کنید.
🖥 @FunProGraming
⭕ * + سلکتور
🔶️ * به شما این اختیار را می دهد تا تمام المان های یک سلکتور (selector) خاص را انتخاب کنید. برای مثال، اگر شما *p را استفاده کرده اید و سپس کد دستورهای CSS را به آن اضافه کرده اید، آن عمل برای تمام المان های موجود در سند شما که تگ <p> دارد، اعمال خواهد شد. با این روش می توانید همزمان تغییرات را در بخش های مورد نظر وب سایت خود اعمال کنید.
🖥 @FunProGraming
#نکته_آموزشی #css
⭕ موقعیت ثابت
🔶️ اگر همیشه می خواهید بدانید یک المان در کجای وب سایت شما قرار دارد، موقعیت قطعی و ثابت (absolute positioning)، کلید عملی کردن آن می باشد. اگر مرورگر خود را به عنوان یک جعبه اتصال بزرگ می دانید، موقعیت ثابت به شما اجازه می دهد این کنترل را داشته باشید که آن المان در کجای جعبه خواهد ماند. از کد دستوری بالا، راست، پایین و چپ همراه با یک مقدار پیکسلی استفاده کنید تا بر جایی که یک المان قرار می گیرد، کنترل داشته باشید.
✅ دستور CSS بالا تعیین می کند که یک المان در موقعیت 20 پیکسلی از لبه های بالا و راست مرورگر شما باقی بماند. همچنین می توانید از موقعیت ثابت در درون یک div استفاده کنید.
🖥 @FunProGraming
⭕ موقعیت ثابت
🔶️ اگر همیشه می خواهید بدانید یک المان در کجای وب سایت شما قرار دارد، موقعیت قطعی و ثابت (absolute positioning)، کلید عملی کردن آن می باشد. اگر مرورگر خود را به عنوان یک جعبه اتصال بزرگ می دانید، موقعیت ثابت به شما اجازه می دهد این کنترل را داشته باشید که آن المان در کجای جعبه خواهد ماند. از کد دستوری بالا، راست، پایین و چپ همراه با یک مقدار پیکسلی استفاده کنید تا بر جایی که یک المان قرار می گیرد، کنترل داشته باشید.
✅ دستور CSS بالا تعیین می کند که یک المان در موقعیت 20 پیکسلی از لبه های بالا و راست مرورگر شما باقی بماند. همچنین می توانید از موقعیت ثابت در درون یک div استفاده کنید.
🖥 @FunProGraming
#نکته_آموزشی #css
⭕ متوقف کردن تمام استایل ها
🔶️ دقت داشته باشید که از این ترفند باید خیلی کم استفاده کنید، چرا که اگر از این دستور برای هر چیزی استفاده کنید، در طولانی مدت با مشکلاتی رو به رو خواهید شد. اما در صورتی که می خواهید بخاطر یک المان خاص یک استایل CSS دیگر را نادیده بگیرید، در دستور css خود بعد از استایل!importatnt استفاده کنید. برای مثال، اگر می خواهید سرفصل های H2 در بخش خاصی از سایت بجای آبی بودن، قرمز باشد، باید از دستور یا کد CSS که در عکس بالا آمده است استفاده کنید.
🖥 @FunProGraming
⭕ متوقف کردن تمام استایل ها
🔶️ دقت داشته باشید که از این ترفند باید خیلی کم استفاده کنید، چرا که اگر از این دستور برای هر چیزی استفاده کنید، در طولانی مدت با مشکلاتی رو به رو خواهید شد. اما در صورتی که می خواهید بخاطر یک المان خاص یک استایل CSS دیگر را نادیده بگیرید، در دستور css خود بعد از استایل!importatnt استفاده کنید. برای مثال، اگر می خواهید سرفصل های H2 در بخش خاصی از سایت بجای آبی بودن، قرمز باشد، باید از دستور یا کد CSS که در عکس بالا آمده است استفاده کنید.
🖥 @FunProGraming
#نکته_آموزشی #css
⭕ وسط چین
✅ وسط چین گول زننده است، چون به چیزی که می خواهید وسط باشد بستگی دارد. بیایید نگاهی به CSS آیتم هایی که بر اساس محتوا باید وسط باشند، بیندازیم.
🔶️ متن
متن با استفاده از text-align:center; در وسط قرار می گیرد. اگر می خواهید در یک سمت قرار گیرد، به جای وسط چین از چپ و راست استفاده کنید.
🔶️ محتوا
تگ div (یا هر المان دیگری) می تواند با اضافه کردن حالت block و استفاده از حاشیه های خودکار (auto margins) در وسط قرار بگیرد. کد دستوری CSS به شکل زیر خواهد بود.
در تصویر بالا به این علت برای عرض، مقدار «هرچیز کمتر از 100% یا anything under 100%» گذاشته شده است که اگر مقدار آن 100% باشد، در آن زمان تمام پهنا را در بر می گیرد و دیگر نیازی به وسط گذاری نبود. بهتر است یک عرض ثابت مثل 60% یا 550 پیکسل یا غیره داشته باشیم.
🖥 @FunProGraming
⭕ وسط چین
✅ وسط چین گول زننده است، چون به چیزی که می خواهید وسط باشد بستگی دارد. بیایید نگاهی به CSS آیتم هایی که بر اساس محتوا باید وسط باشند، بیندازیم.
🔶️ متن
متن با استفاده از text-align:center; در وسط قرار می گیرد. اگر می خواهید در یک سمت قرار گیرد، به جای وسط چین از چپ و راست استفاده کنید.
🔶️ محتوا
تگ div (یا هر المان دیگری) می تواند با اضافه کردن حالت block و استفاده از حاشیه های خودکار (auto margins) در وسط قرار بگیرد. کد دستوری CSS به شکل زیر خواهد بود.
در تصویر بالا به این علت برای عرض، مقدار «هرچیز کمتر از 100% یا anything under 100%» گذاشته شده است که اگر مقدار آن 100% باشد، در آن زمان تمام پهنا را در بر می گیرد و دیگر نیازی به وسط گذاری نبود. بهتر است یک عرض ثابت مثل 60% یا 550 پیکسل یا غیره داشته باشیم.
🖥 @FunProGraming
#نکته_آموزشی #css
⭕ تنظیم عمودی (برای یک خط متن)
🔶️ از این تکنیک CSS قطعاً در منو استفاده می شود. رمز آن یکسان قرار دادن ارتفاع منو و ارتفاع خط متن است. در زمان ادیت وب سایت ها، با این تکنیک زیاد مواجه خواهید شد. برای مثال:
🖥 @FunProGraming
⭕ تنظیم عمودی (برای یک خط متن)
🔶️ از این تکنیک CSS قطعاً در منو استفاده می شود. رمز آن یکسان قرار دادن ارتفاع منو و ارتفاع خط متن است. در زمان ادیت وب سایت ها، با این تکنیک زیاد مواجه خواهید شد. برای مثال:
🖥 @FunProGraming
#نکته_آموزشی #css
⭕افکت های هاور
✅ از این تکنیک CSS برای دکمه ها، لینک های متن، بخش هایی از سایت، آیکون ها و غیره استفاده می شود. اگر می خواهید وقتی یک فرد موس را بر روی چیزی تکان می دهد رنگ آن تغییر پیدا کند، از همان کد دستوری CSS استفاده کنید، اما :hover را به آن اضافه کنید و استایل آن را تغییر دهید. برای مثال به عکس بالا توجه کنید.
✅ این دستور این چنین عمل می کند که وقتی فردی بر روی تگ سرفصل شما (h2) می رود، رنگ آن از مشکی به قرمز تغییر می کند. موضوع جالب درباره ی استفاده از :hover این است که دیگر نیازی نیست بار دیگر اندازه ی فونت را مشخص کنید (اگر نمی خواهید تغییر دهید). این دستور فقط آن چیزی که شما مشخص می کنید را تغییر می دهد.
🖥 @FunProGraming
⭕افکت های هاور
✅ از این تکنیک CSS برای دکمه ها، لینک های متن، بخش هایی از سایت، آیکون ها و غیره استفاده می شود. اگر می خواهید وقتی یک فرد موس را بر روی چیزی تکان می دهد رنگ آن تغییر پیدا کند، از همان کد دستوری CSS استفاده کنید، اما :hover را به آن اضافه کنید و استایل آن را تغییر دهید. برای مثال به عکس بالا توجه کنید.
✅ این دستور این چنین عمل می کند که وقتی فردی بر روی تگ سرفصل شما (h2) می رود، رنگ آن از مشکی به قرمز تغییر می کند. موضوع جالب درباره ی استفاده از :hover این است که دیگر نیازی نیست بار دیگر اندازه ی فونت را مشخص کنید (اگر نمی خواهید تغییر دهید). این دستور فقط آن چیزی که شما مشخص می کنید را تغییر می دهد.
🖥 @FunProGraming