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

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

2 ساعت 4 دقیقهپیشرفته2022-11-09

مدرسین

Morten Rand-Hendriksen

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

جزئیات دوره

CSS یک جعبه ابزار برای دستکاری تصویر است. چه بخواهید جلوه‌های دیداری متمایزی ایجاد کنید و چه اینکه از پهنای باند موجود به راحتی استفاده کنید، گزینه‌های دستکاری تصاویر در CSS به شما امکان می‌دهد راه حل‌های گرافیکی قابل استفاده مجدد ایجاد کنید. در این دوره، مربی Morten Rand-Hendriksen به شما نشان می‌دهد که با استفاده از CSS خالص چقدر می‌توانید تصاویر را در یک مرورگر ویرایش کنید. او اهمیت علامت گذاری مناسب تصویر HTML و نحوه برش، متناسب و قرار دادن تصویر را توضیح می‌دهد. وی در مورد چگونگی استفاده از خاصیت clip-path برای ایجاد انواع مختلف بحث می‌کند. Morten نشان می‌دهد که چگونه می‌توانید از فیلترها برای ویرایش و افزودن جلوه‌هایی به تصویر خود استفاده و ترکیب کنید. وی در پایان با ذکر چندین مثال عملی در مورد چگونگی استفاده از آموخته‌های خود و همچنین برخی از بهترین اقدامات مهم و پیشگویی‌ها، شما را راهنمایی می‌کند.

مهارت ها

CSSWeb StandardsJavaScriptWeb DesignOracleFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

سرفصل ها

0. مقدمه

  • 01 - کار با تصاویر در CSS
  • 02 - فایل های تمرینی
  • 03 - استفاده از GitHub Codespaces با این دوره

1. مبانی

  • 04 - نشانه گذاری تصویر مدرن
  • 05 - خلاص شدن از فضای زیر یک تصویر
  • 06 - قرار دادن تصویر در داخل هر ظرف
  • 07 - یک تصویر مربع (یا نسبت دیگر) ایجاد کنید
  • 08 - یک تصویر را در داخل یک ظرف قرار دهید
  • 09 - از CSS برای برش تصویر استفاده کنید
  • 10 - قرار دادن تصویر در داخل سلول شبکه
  • 11 - قرار دادن تصویر در داخل فلکس باکس
  • 12 - تطبیق تصاویر پس زمینه در هر ظرف
  • 13 - تصویر پس زمینه را در یک ظرف قرار دهید

2. اشکال

  • 14 - گوشه های گرد با شعاع حاشیه
  • 15 - برش تصاویر به یک دایره کامل
  • 16 - اشکال سفارشی با استفاده از مسیر کلیپ
  • 17 - مسیر کلیپ - دایره
  • 18 - مسیر کلیپ - بیضی
  • 19 - مسیر کلیپ - چند ضلعی
  • 20 - Clip-path - Inset
  • 21 - Clip-path - Path
  • 22 - اشکال سفارشی با استفاده از SVG
  • 23 - پوشاندن تصویر با تصویر دیگر
  • 24 - متن تصویر
  • 25 - سازگاری با مرورگر

3. فیلترها و ترکیب

  • 26 - فیلتر کردن و مخلوط کردن
  • 27 - نمای کلی فیلترها
  • 28 - ترکیب فیلترها
  • 29 - استفاده از فیلترهای سفارشی SVG
  • 30 - حالت مخلوط کردن
  • 31 - آزمایش با حالت های ترکیبی
  • 32 - Background-blend-mode

4. استفاده عملی

  • گالری شبکه 33 - 45
  • 34 - جلوه های متحرک
  • 35 - بهبود تصویر حالت ترکیبی
  • 36 - نکاتی که باید در نظر داشته باشید

نتیجه

  • 37 - ممنون

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

درباره ما

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

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

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

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

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