دوره آموزشی تصاویر در 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

سرفصل ها

مقدمه

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

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

  • نشانه‌گذاری تصویر مدرن
  • حذف فضای زیر تصویر
  • قرار دادن یک تصویر در داخل هر ظرفی
  • جاگذاری و قرار دادن تصویر پس زمینه در یک ظرف
  • ایجاد تصاویر مربع و متناسب
  • قرار دادن یک تصویر در داخل یک سلول شبکه
  • قرار دادن یک تصویر درون یک flexbox

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

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

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

  • فیلتر کردن و ترکیب کردن
  • بررسی ویژگی فیلتر
  • ترکیب فیلترها
  • استفاده از فیلترهای سفارشی SVG
  • حالت ترکیب-ترکیب
  • آزمایش با حالت‌های ترکیبی
  • حالت ترکیبی پس‌زمینه

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

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

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

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

نتیجه‌گیری

  • مراحل بعدی
۸۰,۰۰۰ تومان