تخفیف ویژه همین الان — دوره‌های تخفیف‌دار را ببینید.
روز
:
ساعت
:
دقیقه
:
ثانیه
تخفیف‌های ویژه
دوره آموزشی تصاویر در CSS

دوره آموزشی تصاویر در CSS

2 ساعت 11 دقیقهپیشرفته2025-04-29

مدرسین

Carrie Dils

Carrie Dils

Development, WordPress

جزئیات دوره

CSS فقط برای استایل دادن به متن و باکس‌ها نیست! این دوره بهت یاد می‌ده چطور با CSS تصاویر سایتت رو مثل یک طراح حرفه‌ای دستکاری کنی و جلوه‌های بصری جذابی خلق کنی. از تغییر اندازه و موقعیت تصویر توی باکس گرفته تا ساخت شکل‌های سفارشی با Clip Path و ماسک‌ها.

توی این آموزش، مدرس "کری دیلز" بهت نشون می‌ده چطور تصاویر رو توی شبکه‌ها و کانتینرها به بهترین شکل قرار بدی، از افکت‌های ترکیب رنگ و فیلترها استفاده کنی، و انیمیشن‌هایی بسازی که تجربه کاربری سایتت رو ارتقا بدن. همچنین یاد می‌گیری چطور تصاویر رو بهینه کنی تا سایتت سریع‌تر و واکنش‌گرا باشه و تو همه مرورگرها عالی نمایش داده بشه.

این دوره مخصوص توسعه‌دهنده‌های فرانت‌اند طراحی شده تا مهارت‌هایشون تو زمینه تصاویر با CSS کاملاً حرفه‌ای بشه.

🎯 اهداف یادگیری:
تصاویر رو طوری تغییر بدی که دقیقاً توی کانتینر خودش جا بگیره و درست موقعیت بگیره.
با استفاده از Clip Path و ماسک‌ها، شکل‌های سفارشی و خلاقانه بسازی.
از فیلترها و blend modeها استفاده کنی تا ظاهر تصاویر رو تغییر بدی و افکت‌های جالب ایجاد کنی.
با ترنزیشن، ترنسفورم و انیمیشن، تصاویرت رو متحرک و تعاملی کنی.
تصاویر سایتت رو بهینه و واکنش‌گرا کنی تا تو تمام مرورگرها و دستگاه‌ها عملکرد خوبی داشته باشن.

مهارت ها

Web StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOne-Off

سرفصل ها

۰. مقدمه

  • 01 - کار با تصاویر در CSS
  • 02 - آنچه باید بدانید
  • 03 - استفاده از فضای کد گیت‌هاب با این دوره

۱. تنظیم و موقعیت‌یابی اولیه تصویر

  • 04 - نشانه‌گذاری تصویر مدرن
  • 05 - حذف فضای زیر تصویر
  • 06 - قرار دادن یک تصویر در داخل هر ظرفی
  • 07 - جاگذاری و قرار دادن تصویر پس زمینه در یک ظرف
  • 08 - ایجاد تصاویر مربع و متناسب
  • 09 - قرار دادن یک تصویر در داخل یک سلول شبکه
  • 10 - قرار دادن یک تصویر درون یک flexbox

۲. ماسک‌های کلیپ، مسیرها و شکل‌های سفارشی

  • 11 - گوشه‌های گرد با border-radius
  • 12 - اشکال سفارشی با استفاده از clip-path
  • 13 - ایجاد دایره و بیضی با استفاده از clip-path
  • 14 - ایجاد اشکال با خطوط مستقیم با استفاده از چندضلعی
  • 15 - ایجاد مستطیل با استفاده از clip-path
  • 16 - ایجاد مسیرهای سفارشی با clip-path
  • 17- ایجاد اشکال سفارشی با SVG
  • 18 - استفاده از جایگزینی برای clip-path - mask-image
  • 19 - ایجاد جلوه حذفی متن با background-clip

۳. فیلتر کردن و ترکیب کردن

  • 20 - فیلتر کردن و ترکیب کردن
  • 21 - بررسی ویژگی فیلتر
  • 22 - ترکیب فیلترها
  • 23- استفاده از فیلترهای سفارشی SVG
  • 24 - حالت ترکیب-ترکیب
  • 25 - آزمایش با حالت‌های ترکیبی
  • 26 - حالت ترکیبی پس‌زمینه

۴. تبدیل‌ها و انیمیشن‌ها

  • 27 - انتقال، تغییر مقیاس، چرخش و دستکاری پرسپکتیو
  • 28 - جلوه‌های متحرک با انتقال‌ها
  • 29 - انیمیشن‌های کی‌فریم برای جلوه‌های تصویری
  • 30 - نکات مهم در استفاده از انیمیشن‌ها

۵. بهینه‌سازی تصویر و عملکرد

  • 31 - ارائه تصاویر واکنش‌گرا
  • 32 - بهینه‌سازی عملکرد
  • 33 - اطمینان از سازگاری با مرورگرهای مختلف

نتیجه‌گیری

  • 34 - مراحل بعدی

دوره های مرتبط

درباره ما

لینداکده یک بستر یادگیری پیشرو است که به افراد کمک می کند تا کسب و کار ، نرم افزار ، فناوری و مهارت‌های خلاقانه را برای دستیابی به اهداف شخصی و حرفه ای بیاموزد.

شماره تلفنکانال آپاراتپشتیبانی تلگرامکانال تلگرامپیج اینستاگرام

کلیه‌ی حقوق این سایت متعلق به لینداکده می باشد

قوانین و شرایط|حریم خصوصی

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal