دوره آموزشی تصاویر در CSS
2 ساعت 4 دقیقهپیشرفته2022-11-09
مدرسین

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 - ممنون
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS