کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش استاد CSS: درک نحوه دستکاری خصوصیات CSS - آخرین آپدیت

دانلود Master CSS: Understand How To Manipulate CSS Properties

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

استاد CSS: از مبتدی تا متخصص پرمیوم

دوره تخصصی CSS: از مبتدی تا استاد پرمیوم در یادگیری ویژگی‌های CSS. تکنیک‌های پیشرفته CSS را بیاموزید.

آنچه در این دوره خواهید آموخت:

  • درک عمیق ویژگی‌های CSS از پایه
  • تسلط بر انتخابگرهای CSS برای اهداف استایل‌دهی
  • استفاده از ویژگی‌های موقعیت نسبی، مطلق، ثابت و چسبنده
  • درک مفهوم Box Model در CSS
  • کار با واحدهای طول CSS: rem، em، px، %، vh، vw، pc، pt
  • ایجاد ستون‌های مساوی و نامساوی با رویکرد واکنش‌گرا
  • انیمیشن‌های CSS و Keyframes
  • کار با تبدیلات دوبعدی و سه‌بعدی (rotate, skew, scale, translate, matrix)
  • ساخت اشکال سفارشی با CSS clip-path
  • استفاده از CSS Media Query برای طراحی واکنش‌گرا و سازگار با موبایل
  • بهبود مهارت در ایجاد نوارهای ناوبری و منوهای مگا
  • افزودن رسانه‌ها (ویدئو، صدا و تصاویر) به صفحات وب با CSS
  • یادگیری ایجاد ستون‌های مساوی و نامساوی با استفاده از float و inline-block
  • ساخت گالری تصاویر و ویدئو با ستون
  • کار با تبدیلات دوبعدی و سه‌بعدی، transition ها و انیمیشن‌ها
  • ساخت شکل‌ها با clip-path
  • استفاده از CSS Media Query برای طراحی واکنش‌گرا و موبایل-فرست
  • ایجاد منوهای ناوبری (افقی، عمودی و مگا منوها)
  • افزودن تصاویر و ویدئوها به منوهای مگا
  • ایجاد گرادیان‌ها (خطی، شعاعی و مخروطی)
  • ساخت آکاردئون‌ها و تولتیپ‌های CSS
  • طراحی جداول قیمت
  • آشنایی با Box Model و اهمیت ویژگی box-sizing
  • ارتباط با CSS با استایل‌دهی درون‌خطی، داخلی و خارجی و وارد کردن CSS
  • کار با رنگ‌ها: Hexadecimal، RGB، HSL، HWB
  • کار با ویژگی‌های فونت: font-size، line-height، font family، font-weight
  • کار با ویژگی‌های متن و کلمات
  • وارد کردن Font Awesome برای طراحی
  • وارد کردن Google Fonts
  • شناخت انواع انتخابگرها و ترکیب آن‌ها
  • درک نحوه کار قانون آبشاری (Cascading)

پیش‌نیازها:

هیچ مهارت برنامه‌نویسی لازم نیست. این دوره پرمیوم CSS شما را از ابتدا آموزش می‌دهد.

توجه: این دوره شامل Flexbox و Grid نمی‌شود. دوره جداگانه‌ای برای آن‌ها ساخته‌ام.

برای این دوره به یک کامپیوتر و یک ویرایشگر متن مانند Visual Studio Code، Sublime Text، Brackets یا Notepad++ نیاز دارید.

نیاز به یادگیری و کنجکاوی شما ضروری است.

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

این دوره شامل Flexbox و Grid نمی‌شود. دوره جداگانه‌ای برای آن‌ها ساخته‌ام.

اگر به دنبال دوره‌ای با Flexbox و Grid هستید، می‌توانید دوره دیگر من با عنوان: تسلط بر Flexbox و Grid (دوره ۲ در ۱) - راهنمای آسان را خریداری کنید.

نظر کاربران درباره این دوره:

"این احتمالاً جامع‌ترین دوره ساخته شده است. همه چیز از ابتدایی‌ترین مفاهیم مانند رنگ‌ها، فونت‌ها و غیره تا برخی از پیشرفته‌ترین مفاهیم آموزش داده می‌شود. مدرس نیز یک گنج است! انرژی شاد او در حین تدریس به یک تجربه یادگیری خوب کمک کرد. این دوره قطعاً ارزش امتحان کردن را دارد!" - Sarthak R.

"اشتیاق مسری است :) عاشقش شدم! ممنون که مرا الهام بخشیدی!" - Savannah A.

"دوره بسیار دقیقی است." - Grig F.

"این دوره دانش و حکمت عمیقی از CSS را منتقل می‌کند - باورنکردنی است. یک گنج واقعی. اوکی - شما باید دو ساعت زودتر از خواب بیدار شوید تا دامنه وسیع دوره را دریافت کنید :=) اما در پایان شما آزاد هستید. آزاد از تمام عدم قطعیت‌ها در مورد نحوه کارکرد CSS در پشت صحنه برای پروژه‌های خود و آزاد از تمام چیزهای از پیش آماده شده Bootstrap. علاوه بر این، شما برای مراحل بعدی نردبان به سوی بهشت فرانت‌اند بهترین آمادگی را دارید: Flex و Grid. من قبلاً دوره پیگیری Pamch را شروع کرده‌ام. متشکرم! متشکرم! متشکرم!" - Rainer S.

این دوره طراحی شده تا شما را با HTML و CSS به عنوان ابزار خود، به یک طراح وب‌سایت درجه یک و جهانی تبدیل کند. اگر می‌خواهید یک طراح وب‌سایت موبایل-فرست باشید، این دوره برای شماست. با مهارت‌هایی که از این دوره کسب می‌کنید، می‌توانید با افتخار هر طراحی وب‌سایتی را از ابتدا تا انتها ایجاد کنید. این تضمین شده است زیرا این دوره CSS مدرن، دقیق، با توضیحات خوب و ساختاریافته است. در این دوره همچنین دسترسی رایگان به دوره رایگان HTML من *خواهید داشت، اگر با HTML تازه کار هستید یا می‌خواهید مهارت‌های HTML خود را تقویت کنید.*

این یک دوره جامع است که الگوها را گام به گام به شما نشان می‌دهد، بنابراین این یک دوره پرمیوم CSS است. من فقط نمی‌خواهم تماشا کنید. شما را تشویق می‌کنم که همگام با من کد بزنید.

سرفصل ها و درس ها

مقدمه Introduction

  • خوش آمدید Welcome

  • در این دوره هیچ فلکس‌باکس یا گرید وجود ندارد - مهم: قبل از خرید این ویدیو را تماشا کنید There is NO flexbox or Grid in this course - IMPORTANT Watch this before you buy

  • پروژه‌هایی که خواهیم ساخت - بخش ۱ Projects we will create - part 1

  • پروژه‌هایی که خواهیم ساخت - بخش ۲ Projects we will create - part 2

  • پروژه‌هایی که خواهیم ساخت - بخش ۳ Projects we will create - part 3

  • پروژه‌هایی که خواهیم ساخت - بخش ۴ Projects we will create - part 4

  • پروژه‌هایی که خواهیم ساخت - بخش ۵ Projects we will create - part 5

  • معرفی ابزارهایی که می‌توانید برای این دوره استفاده کنید Introduction to the tools you can use for this course

  • آشنایی با ویرایشگر کد ویژوال استودیو Getting familiar with Visual Studio code

  • وارد کردن پوشه درس به ویرایشگر کد ویژوال استودیو Importing the lesson folder into the visual studio code

مقدمه‌ای بر CSS و استایل‌دهی در CSS Introduction to CSS and styling in CSS

  • مقدمه CSS Introduction to CSS

  • فشرده‌سازی کد CSS من در یک خط Minifying my CSS code on one line

  • استایل‌دهی درون‌خطی و داخلی CSS Inline and Internal CSS styling

  • استایل‌دهی خارجی CSS و دستور @import External and @import CSS styling

رنگ‌ها در CSS CSS colors

  • مقدمه رنگ‌ها در CSS CSS colors introduction

  • رنگ‌ها - کلیدواژه‌ها و هگزادسیمال Colours - Keywords and Hexadecimal

  • رنگ‌ها، شفافیت و رنگ‌های ایمن وب Colours, opacity and websafe colours

  • رنگ‌ها - تابع RGB() Colours - RGB( ) function

  • رنگ‌ها - تابع HSL() - بخش ۱ Colours - HSL( ) function - part 1

  • رنگ‌ها - تابع HSL() - بخش ۲ Colours - HSL( ) function - part 2

  • رنگ‌ها - تابع HWB() Colours - HWB() function

ویژگی‌های فونت Font properties

  • مقدمه ویژگی‌های فونت Font Properties Introduction

  • اندازه فونت، سبک فونت و انواع فونت Font-size, Font-style and Font-variant

  • ضخامت فونت و ارتفاع خط Font-weight and line-height

  • خانواده فونت Font Family

  • ویژگی خلاصه‌شده فونت Shorthand Font Property

  • فونت‌های گوگل Google Fonts

  • درک مقادیر unset, initial و inherit در CSS Understanding unset, initial and inherit CSS values

واحدهای طول در CSS CSS Length Units

  • مقدمه واحدهای طول Length units introduction

  • واحدهای طول مطلق در CSS CSS Absolute Length Units

  • واحد طول نسبی CSS _ REM CSS Relative Length unit _ REM

  • واحد طول نسبی CSS _ EM CSS Relative Length unit _ EM

  • واحد طول نسبی CSS_EX و CH - بخش ۱ CSS Relative Length unit_EX and CH - part 1

  • واحد طول نسبی CSS_EX و CH - بخش ۲ CSS Relative Length unit_EX and CH - part 2

  • واحد طول درصدی CSS CSS Percentage Length unit

  • واحد طول نمای دید در CSS - VW و VH CSS Viewport Length unit - VW and VH

  • واحد طول نمای دید در CSS - VMAX و VMIN CSS Viewport Length unit - VMAX and VMIN

ویژگی‌های متن Text properties

  • مقدمه ویژگی‌های متن Text Properties introduction

  • هم‌ترازی متن و تبدیل متن Text-align and Text-transform

  • تورفتگی متن، فاصله بین حروف و فاصله بین کلمات Text-indent, Letter-spacing and Word-spacing

  • تزئین متن Text-decoration

  • سایه متن و سایه جعبه Text shadow and Box shadow

  • تاکید بر متن Text-emphasis

  • ویژگیstroke متن Text-stroke property

  • شکستن کلمه و ادامه خط Word-wrap and Word-break

  • فضای خالی White-space

قاعده CSS CSS Rule

  • مقدمه قاعده CSS CSS Rule introduction

  • وراثت آبشاری Cascading Inheritance

  • قاعده آبشاری CSS CSS Cascade Rule

  • قاعده آبشاری CSS - بخش ۲ CSS Cascade Rule - part 2

  • قاعده آبشاری بین استایل‌دهی درون‌خطی، داخلی و خارجی CSS CSS Cascading rule between inline, internal and external styling

  • شکستن قاعده آبشاری با !important Breaking the cascading rule with !important

انتخابگرهای CSS (از مقدماتی تا پیشرفته) CSS Selectors (Basic to Advanced Selectors)

  • مقدمه انتخابگرهای CSS CSS Selectors Introduction

  • انواع اصلی انتخابگرها و اولویت آن‌ها Main types of selectors and their Specificity

  • مقایسه قدرت انتخابگرهای id، class و type Comparing the power of the id, class and type selectors

  • گروه‌بندی و ترکیب انتخابگرها - بخش ۱ Grouping and combining selectors - part 1

  • گروه‌بندی و ترکیب انتخابگرها - بخش ۲ Grouping and combining selectors - part 2

  • ادغام انتخابگرها Merging selectors

  • انتخابگرهای رابطه‌ای - نوادگان Relational selectors - descendant

  • انتخابگرهای رابطه‌ای - فرزند مستقیم و 'فرزند نبودن' Relational selectors - direct child and 'not a child of'

  • انتخابگرهای رابطه‌ای - همسایه مجاور و عمومی Relational selectors - adjacent and general sibling

  • کلاس شبه ساختاری فرزند - بخش ۱ Structural child Pseudo Class - part 1

  • کلاس شبه ساختاری فرزند - بخش ۲ Structural child Pseudo Class - part 2

  • کلاس شبه ساختاری فرزند - بخش ۳ Structural child Pseudo Class - part 3

  • کلاس شبه ساختاری نوع - بخش ۱ Structural type Pseudo Class - part 1

  • کلاس شبه ساختاری نوع - بخش ۲ Structural type Pseudo Class - part 2

  • انتخابگرهای کلاس شبه پیوند Link Pseudo class selectors

  • انتخابگرهای کلاس شبه رابط کاربری User Interface Pseudo class selectors

  • انتخابگرهای شبه عنصر متن-محتوا Content-Textual Pseudo Element Selectors

  • انتخابگرهای تخصصی Specialized Selectors

  • غیرفعال کردن ::selection Disabling ::selection

  • انتخابگرهای ویژگی - موجود، برابر و شامل Attribute selectors - present, equals and contains

  • انتخابگرهای ویژگی - شروع با و پایان با Attribute selectors - begins with and ends with

  • انتخابگرهای ویژگی - شامل و خط‌دار Attribute selectors - includes and hyphenated

  • انتخابگر کلاس شبه :has() :has() pseudo class selector

  • کاربرد :has() با عنصر :root Application of :has() with :root element

  • انتخابگر تودرتو Nested selector

آیکون‌های Font Awesome Font Awesome Icons

  • آیکون‌های Font Awesome - مهم!!! Font Awesome Icons - Important!!!

  • استایل‌دهی Font Awesome - بخش ۱ Font Awesome Styling - part 1

  • استایل‌دهی Font Awesome - بخش ۲ Font Awesome Styling - part 2

  • استایل‌دهی Font Awesome - بخش ۳ Font Awesome Styling - part 3

  • استایل‌دهی Font Awesome - بخش ۴ Font Awesome Styling - part 4

نمادها و آیکون‌های متریال گوگل Google Material Symbols and Icons

  • مقدمه‌ای بر نمادها و آیکون‌های متریال گوگل Introduction to Google Material Symbols and Icons

  • نمادهای متریال گوگل Google Material Symbols

  • آیکون‌های متریال گوگل Google Material Icons

ویژگی display Display property

  • Display - inline, inline-block, block و غیره Display - inline, inline-block, block, etc

مدل جعبه Box Model

  • مدل جعبه - عرض Box model - width

  • مدل جعبه - حداقل و حداکثر عرض برای متن‌ها Box model - min and max width for texts

  • مدل جعبه - حداقل و حداکثر عرض برای تصاویر Box model - min and max width for images

  • مدل جعبه - ارتفاع Box model - height

  • مدل جعبه - حداقل و حداکثر ارتفاع برای متن‌ها Box model - min and max height for texts

  • مدل جعبه - حداقل و حداکثر ارتفاع برای تصاویر Box model - min and max height for images

  • کلیدواژه‌های اندازه‌دهی - min-content, max-content, auto, fit-content Sizing keywords - min-content, max-content, auto, fit-content

  • مدل جعبه - padding_بخش ۱ Box model - padding_part 1

  • مدل جعبه - padding_بخش ۲ Box model - padding_part 2

  • مدل جعبه - Border_بخش ۱ Box model - Border_part 1

  • مدل جعبه - Border_بخش ۲ Box model - Border_part 2

  • مدل جعبه - شعاع حاشیه_بخش ۱ Box model - Border radius_part 1

  • مدل جعبه - شعاع حاشیه_بخش ۲ Box model - Border radius_part 2

  • شعاع حاشیه- مقادیر افقی-عمودی - بخش ۱ Border-radius- Horizontal-Vertical values - Part 1

  • شعاع حاشیه- مقادیر افقی-عمودی - بخش ۲ Border-radius- Horizontal-Vertical values - Part 2

  • مدل جعبه - حاشیه_بخش ۱ Box model - Margin_part 1

  • مدل جعبه - حاشیه_بخش ۲ Box model - Margin_part 2

  • مدل جعبه - Margin Auto Box model - Margin Auto

  • مدل جعبه - حاشیه منفی Box model - Margin negative

  • ویژگی Outline Outline property

  • ویژگی‌های Block-size و Inline-size Block-size and Inline-size property

  • نسبت ابعاد Aspect Ratio

اندازه‌دهی جعبه Box Sizing

  • اندازه‌دهی جعبه Box sizing

  • اهمیت تنظیم اندازه‌دهی جعبه به عنوان border-box Importance of setting Box sizing as border-box

Overflow Overflow

  • ویژگی Overflow Overflow property

  • ویژگی Text overflow Text overflow property

هم‌ترازی عمودی Vertical Align

  • اعمال ویژگی Vertical align به عنصر درون‌خطی Apply Vertical align property to inline element

توابع CSS CSS Functions

  • تابع Calc() Calc ( ) Function

  • تابع Var() Var ( ) Function

  • تابع Min() و Max() Min( ) and Max ( ) function

  • تابع Clamp() Clamp ( ) function

Query رسانه CSS @media CSS Media Query @media

  • مقدمه @Media query و @media print Introduction to @Media query and @media print

  • درک اندازه‌های صفحه نمایش دستگاه‌های موبایل Understanding screen sizes of mobile devices

  • Query رسانه CSS @media screen (max-width) CSS Media Query @media screen (max-width)

  • Query رسانه CSS @media screen (min-width) - بخش ۱ CSS Media Query @media screen (min-width) - Part 1

  • Query رسانه CSS @media screen (min-width) - بخش ۲ CSS Media Query @media screen (min-width) - Part 2

ویژگی Float Float property

  • ویژگی Float Float property

  • نگه‌داشتن و پاک کردن float Containing and clearing the float

ایجاد ستون‌هایی با اندازه‌های متفاوت با استفاده از شناورها Creating columns of different sizes using floats

  • ایجاد ۲ ستون مساوی Creating 2 equal columns

  • ایجاد ۳ ستون مساوی و واکنش‌گرایی آن‌ها Creating 3 Equal columns and their responsiveness

  • ایجاد ۴ تا ۶ ستون مساوی و واکنش‌گرایی آن‌ها Creating 4 to 6 Equal columns and their responsiveness

  • ایجاد ۲ ستون نامساوی - بخش ۱ Creating 2 unequal columns - part 1

  • ایجاد ۲ ستون نامساوی - بخش ۲ Creating 2 unequal columns - part 2

  • ایجاد ۳ ستون نامساوی Creating 3 unequal columns

  • ایجاد ۴ ستون نامساوی Creating 4 unequal columns

  • تودرتو کردن ستون‌ها در ستون‌ها Nesting columns inside columns

  • افزودن شعاع حاشیه و سایه جعبه به یک ستون Adding border-radius and box-shadow to a column

  • ایجاد ستون‌های تصویری و گالری تصاویر - بخش ۱ Creating image columns and image gallery - part 1

  • ایجاد ستون‌های تصویری و گالری تصاویر - بخش ۲ Creating image columns and image gallery - part 2

  • تودرتو کردن تصاویر در ستون‌ها Nesting images in columns

  • ایجاد ستون‌های ویدئویی و گالری Creating video columns and gallery

  • ایجاد ستون‌های مساوی با فاصله Creating Equal columns with space

  • ایجاد ستون‌های نامساوی با فاصله Creating unequal columns with space

  • تودرتو کردن ستون‌های با فاصله در ستون‌ها Nesting spaced columns inside columns

  • تودرتو کردن ستون‌های کامل در ستون‌های دیگر Nesting full columns inside other columns

  • تودرتو کردن تصاویر و ویدئوهای ستون کامل در ستون‌های دیگر Nesting full column images and videos inside other columns

  • تودرتو کردن ستون‌های کامل و نیمه در یک ستون Nesting full columns and half columns inside a column

  • تودرتو کردن ستون‌ها در ستون کامل Nesting columns inside full column

  • حذف حاشیه پیش‌فرض پایین از تصاویر Removing default margin bottom from images

  • جزئیات بیشتر در مورد تودرتو کردن ستون‌های با فاصله More on Nesting spaced columns

  • ایجاد ستون با inline-block Creating columns with inline-block

  • ایجاد ستون‌های با فاصله با inline-block Creating spaced columns with inline-block

چیدمان‌های پیچیده وب با ستون با استفاده از شناورها [اختیاری] Complex Column Web layouts with floats [OPTIONAL]

  • چیدمان پیچیده شناور - ۱ Complex Float Layout - 1

  • واکنش‌گرایی چیدمان Responsiveness of layout

  • افزودن رسانه به چیدمان Adding media to the layout

  • گسترش چیدمان Extending the layout

  • چیدمان پیچیده شناور - ۲ Complex Float Layout - 2

  • واکنش‌گرایی چیدمان Responsiveness of layout

  • افزودن محتوا به چیدمان Adding Content to the layout

  • چیدمان پیچیده - ۳ - بخش ۱ Complex layout - 3 - part 1

  • چیدمان پیچیده - ۳ - بخش ۲ Complex layout - 3 - part 2

  • چیدمان پیچیده - ۳ - بخش ۳ Complex layout - 3 - part 3

  • واکنش‌گرایی چیدمان Responsiveness of layout

  • یک چالش ستونی A column challenge

  • چیدمان پیچیده شناور - ۴ Complex Float Layout - 4

ستون‌های چندگانه با column-count Multiple Columns with column-count

  • استفاده از column-count برای ایجاد ستون‌های چندگانه - بخش ۱ Using column-count to create multiple columns- part 1

  • استفاده از column-count برای ایجاد ستون‌های چندگانه - بخش ۲ Using column-count to create multiple columns- part 2

نوار اسکرول و نشانگرها Scroll bar and cursors

  • استایل‌دهی نوار اسکرول مرورگر وب Styling the scroll bar of a web browser

  • نشانگرهای CSS - بخش ۱ CSS cursors - part 1

  • نشانگرهای CSS - بخش ۲ CSS cursors - part 2

موقعیت‌یابی در CSS Positioning in CSS

  • موقعیت نسبی - بخش ۱ Relative Positioning - Part 1

  • موقعیت نسبی - بخش ۲ Relative Positioning - Part 2

  • درک ویژگی z-index Understanding z-index property

  • جزئیات بیشتر در مورد موقعیت نسبی More on Relative Positioning

  • موقعیت مطلق - بخش ۱ Absolute Positioning - Part 1

  • موقعیت مطلق - بخش ۲ Absolute Positioning - Part 2

  • موقعیت ثابت Fixed Positioning

  • موقعیت ثابت - هدر ثابت Fixed Positioning - fixed header

  • موقعیت ثابت - آیکون‌های کناری ثابت Fixed Positioning - fixed side icons

  • موقعیت ثابت - نوار کناری ثابت - بخش ۱ Fixed positioning - fixed side bar -Part 1

  • موقعیت ثابت - نوار کناری ثابت - بخش ۲ Fixed positioning - fixed side bar -Part 2

  • موقعیت چسبنده Sticky Positioning

  • تمرین موقعیت‌یابی Practice on positioning

  • موقعیت‌یابی متن روی تصویر Positioning a text over an image

تابع رنگ گرادیان Gradient Colour function

  • گرادیان خطی - پیش‌فرض و افقی Linear Gradient - Default and Horizontal

  • گرادیان خطی - استفاده از درجه‌ها Linear Gradient - Use of Degrees

  • گرادیان خطی - عمودی و مورب Linear Gradient - Vertical and Diagonal

  • گرادیان خطی - استفاده از درصدها با موقعیت‌های شروع و توقف Linear Gradient - Using Percentages with start and stop positions

  • گرادیان خطی - ایجاد خطوط سخت Linear Gradient - creating hardlines

  • گرادیان خطی - استفاده از واحدهای دیگر CSS Linear Gradient - Using other CSS units

  • بررسی بیشتر گرادیان خطی Exploring more on Linear Gradient

  • گرادیان شعاعی - پیش‌فرض و کلیدواژه‌ها Radial Gradient - Default and keywords

  • گرادیان شعاعی - در X و Y Radial Gradient - at X and Y

  • گرادیان شعاعی - استفاده از واحدهای CSS برای موقعیت‌های شروع و توقف Radial Gradient - Using CSS units for start and stop positions

  • گرادیان مخروطی - پیش‌فرض و از زاویه Conic Gradient - Default and from angle

  • گرادیان مخروطی - در X و Y Conic Gradient - at X and Y

  • گرادیان مخروطی - موقعیت‌های شروع و توقف Conic Gradient - start and stop positions

  • گرادیان مخروطی - ایجاد نمودار دایره‌ای Conic Gradient - creating a pie chart

تابع گرادیان‌های تکراری Repeating Gradients Function

  • گرادیان خطی تکراری Repeating linear gradient

  • گرادیان شعاعی تکراری Repeating radial gradient

  • گرادیان مخروطی تکراری Repeating conic gradient

ویژگی‌های object-fit و object-position Object-fit and object-position property

  • ویژگی object-fit تصاویر Object-fit property of images

  • ویژگی object-fit ویدئوها Object-fit property of videos

  • object position برای fill, contain و scale-down object position for fill, contain and scale-down

  • object position برای cover و none object position for cover and none

تصویر پس‌زمینه Background image

  • تکرار پس‌زمینه Background-repeat

  • موقعیت پس‌زمینه Background-position

  • اندازه پس‌زمینه Background-size

  • گروه‌بندی چندین تصویر با هم Grouping multiple images together

  • رنگ پوششی روی تصاویر - با استفاده از افست جعبه و موقعیت Overlay colour on images - using box offset and position

  • رنگ پوششی روی تصاویر - با استفاده از گرادیان خطی Overlay colour on images - using linear gradient

  • رنگ پوششی هاور روی تصاویر - بخش ۱ Hover overlay colour on images - part 1

  • رنگ پوششی هاور روی تصاویر - بخش ۲ Hover overlay colour on images - part 2

  • مرکز کردن دکمه در تصویر پس‌زمینه Centering a button in a background image

  • اثر پارالاکس با ضمیمه پس‌زمینه Parallax effect with Background-attachment

  • ریشه پس‌زمینه Background-origin

برش پس‌زمینه Background Clip

  • ویژگی Background-clip Background-clip Property

  • Background-clip با مقدار متن Background-clip with text value

  • کاربرد متن برش پس‌زمینه Application of background-clip text

  • ایجاد رنگ حاشیه گرادیان - روش اول Creating a border gradient colour - First Method

  • ایجاد رنگ حاشیه گرادیان - روش دوم Creating a border gradient colour - Second Method

ویژگی فیلتر CSS CSS filter property

  • ویژگی فیلتر CSS - روشنایی و مقیاس خاکستری CSS Filter property - brightness and grayscale

  • ویژگی فیلتر CSS - سپیا، کنتراست، اشباع، تاری CSS Filter property - sepia, contrast, saturate, blur

  • ویژگی فیلتر CSS - شفافیت، چرخش رنگ، معکوس، سایه افتاده CSS Filter property - opacity, hue-rotate, invert, drop-shadow

ویژگی blend-mode CSS CSS blend-mode property

  • Mix-blend-mode Mix-blend-mode

  • Background-blend-mode Background-blend-mode

استایل‌دهی لیست‌های <li> و ایجاد گالری با لیست <li> Styling Lists <li> and creating a gallery with list <li>

  • استایل‌دهی نشانگر لیست Styling a list marker

  • ویژگی List-style-type List-style-type property

  • موقعیت و تصویر List-style List-style-position and -image

  • ایجاد گالری لیست تصویری - بخش ۱ Creating an image List Gallery - part 1

  • ایجاد گالری لیست تصویری - بخش ۲ Creating an image List Gallery - part 2

  • ایجاد گالری لیست تصویری - بخش ۳ Creating an image List Gallery - part 3

  • ایجاد گالری لیست ویدئویی Creating a video List Gallery

فرم CSS CSS Form

  • ساختار HTML فرم - بخش ۱ HTML Structure of the form - Part 1

  • ساختار HTML فرم - بخش ۲ HTML Structure of the form - Part 2

  • استایل‌دهی فرم - بخش ۱ Styling the form - Part 1

  • استایل‌دهی فرم - بخش ۲ Styling the form - Part 2

  • واکنش‌گرایی فرم Responsiveness of the form

شمارنده CSS CSS counter

  • شمارنده CSS - بخش ۱ CSS counter - part 1

  • شمارنده CSS - بخش ۲ CSS counter - part 2

  • شمارنده CSS - بخش ۳ CSS counter - part 3

  • تابع شمارنده‌های CSS CSS counter - counters function

  • شمارنده CSS - ایجاد لینک شمارنده مرجع CSS counter - creating reference counter link

نوارهای ناوبری Navigation bars

  • ایجاد نوار ناوبری افقی Creating a horizontal navbar

  • ایجاد نوار ناوبری واکنش‌گرا Making a responsive navbar

  • انتقال نوار ناوبری به سمت راست Pushing navigation bar to the right

  • نوار ناوبری با عرض مساوی Navigation bar with equal width

  • افزودن font awesome به نوار ناوبری Adding font awesome to navigation bar

  • نوار ناوبری چسبنده Sticky Navbar

  • نوار ناوبری در تصویر پس‌زمینه Navbar inside the background image

  • ایجاد نوار ناوبری بدون استفاده از لیست Creating a navbar without using a list

  • ایجاد نوار ناوبری با منوی کشویی - بخش ۱ Creating a Navbar with a dropdown - part 1

  • ایجاد نوار ناوبری با منوی کشویی - بخش ۲ Creating a Navbar with a dropdown - part 2

  • ایجاد نوار ناوبری با منوی کشویی - بخش ۳ Creating a Navbar with a dropdown - part 3

  • ایجاد نوار ناوبری با منوی کشویی - بخش ۴ Creating a Navbar with a dropdown - part 4

  • ایجاد زیرمنو Creating a submenu

  • ایجاد منوی بزرگ با ۳ ستون مساوی Creating a mega menu with 3 equal columns

  • واکنش‌گرایی منوی بزرگ Making the megamenu responsive

  • ایجاد منوی بزرگ با ۴ و ۵ ستون مساوی Creating a mega menu with 4 and 5 equal columns

  • ایجاد منوی بزرگی که دارای رسانه باشد Creating a mega menu that has media

  • ایجاد نوار ناوبری عمودی - بخش ۱ Creating a vertical navbar - part 1

  • ایجاد نوار ناوبری عمودی - بخش ۲ Creating a vertical navbar - part 2

  • ایجاد ناوبری کناری عمودی - بخش ۱ Creating a vertical side navigation - part 1

  • ایجاد ناوبری کناری عمودی - بخش ۲ Creating a vertical side navigation - part 2

  • ایجاد منوی کشویی ناوبری کناری عمودی - بخش ۱ Creating a vertical side nav drop down - part 1

  • ایجاد منوی کشویی ناوبری کناری عمودی - بخش ۲ Creating a vertical side nav drop down - part 2

آکاردئون CSS CSS Accordion

  • ایجاد آکاردئون CSS - بخش ۱ Creating CSS Accordion - part 1

  • ایجاد آکاردئون CSS - بخش ۲ Creating CSS Accordion - part 2

  • ایجاد آکاردئون CSS - بخش ۳ Creating CSS Accordion - part 3

راهنماهای CSS CSS Tooltips

  • ایجاد راهنماها - بخش ۱ creating tool tips - part 1

  • تفاوت بین display none و visibility hidden Difference between display none and visibility hidden

  • ایجاد راهنماها - بخش ۲ creating tool tips - part 2

  • واکنش‌گرایی راهنما Responsiveness of the tool tip

  • ایجاد راهنماهای پایینی creating bottom tool tips

  • ایجاد راهنماهای راست و چپ creating right and left tool tips

آکاردئون قابل کلیک با چک‌باکس Clickable Accordion with checkbox

  • ایجاد ساختار Creating the structure

  • استایل‌دهی آکاردئون Styling the accordion

ایجاد و استایل‌دهی جداول Creating and Styling Tables

  • ایجاد جدول HTML پایه Creating a basic HTML table

  • استایل‌دهی جدول پایه Styling a basic table

  • واکنش‌گرایی جدول Responsiveness of the table

  • طراحی جدول بدون حاشیه و راه‌راه Designing a borderless and striped table

  • طراحی جدول با اثر هاور و شعاع حاشیه Designing a table with hover effect and border-radius

  • جدول واکنش‌گرای بلوکی Block-like responsive table

  • طراحی جدول با colspan و rowspan Designing a colspan and rowspan table

ایجاد جدول/طرح قیمت Creating a pricing table/plan

  • جدول قیمت‌گذاری - بخش ۱ Pricing table - part 1

  • جدول قیمت‌گذاری - بخش ۲ Pricing table - part 2

  • جدول قیمت‌گذاری - بخش ۳ Pricing table - part 3

  • جدول قیمت‌گذاری - بخش ۴ Pricing table - part 4

  • جدول قیمت‌گذاری - بخش ۵ Pricing table - part 5

  • جدول قیمت‌گذاری واکنش‌گرا Responsive Pricing table

  • طرح قیمت با عنصر جدول - بخش ۱ Price Plan with table element - part 1

  • طرح قیمت با عنصر جدول - بخش ۲ Price Plan with table element - part 2

  • طرح قیمت با عنصر جدول - بخش ۳ Price Plan with table element - part 3

  • طرح قیمت با عنصر جدول - بخش ۴ Price Plan with table element - part 4

  • طرح قیمت با عنصر جدول - بخش ۵ Price Plan with table element - part 5

ویژگی clip path در CSS CSS clip path property

  • Clip path - دایره Clip path - circle

  • کاربرد clip path دایره‌ای Application of circle clip path

  • Clip path - بیضی Clip path - ellipse

  • کاربرد clip path بیضوی Application of ellipse clip path

  • Clip path - inset Clip path - inset

  • Clip path polygon - مثلث Clip path polygon - triangle

  • Clip path polygon - ذوزنقه و لوزی Clip path polygon - trapezoid and rhombus

  • Clip path polygon - متوازی الاضلاع و پنج ضلعی Clip path polygon - parallelogram and pentagon

  • کاربرد clip path متوازی الاضلاع Application of parallelogram clip path

  • بررسی دیگر چندضلعی‌های clip path Exploring other clip path polygons

  • کاربرد clip path نقطه چپ و راست Application of left and right point clip path

  • کاربرد clip path چندضلعی به عنوان یک نگهدارنده Application of polygon clip path as a container

ویژگی Mask-image Mask-image Property

  • ویژگی Mask-image - بخش ۱ Mask-image property - part 1

  • ویژگی Mask-image - بخش ۲ Mask-image property - part 2

تبدیل دوبعدی CSS CSS 2D Transform

  • تبدیل دوبعدی CSS - جابجایی CSS 2D Transform - translate

  • تبدیل دوبعدی CSS - مقیاس‌بندی CSS 2D Transform - scale

  • تبدیل دوبعدی CSS - چرخش CSS 2D Transform - rotate

  • تبدیل دوبعدی CSS - اریب‌سازی CSS 2D Transform - skew

  • تبدیل دوبعدی CSS - ماتریس CSS 2D Transform - matrix

تبدیل سه‌بعدی CSS CSS 3D Transform

  • تبدیل سه‌بعدی CSS - translateZ و perspective - بخش ۱ CSS 3D Transform - translateZ and perspective - part 1

  • تبدیل سه‌بعدی CSS - translateZ و perspective - بخش ۲ CSS 3D Transform - translateZ and perspective - part 2

  • مبدا نمای سه‌بعدی CSS CSS 3D perspective origin

  • تبدیل سه‌بعدی CSS - چرخش CSS 3D Transform - rotate

  • تبدیل سه‌بعدی CSS - مقیاس‌بندی CSS 3D Transform - scale

  • تبدیل سه‌بعدی CSS - ماتریس CSS 3D Transform - matrix

  • تبدیل سه‌بعدی CSS - ترکیب تبدیل‌ها CSS 3D Transform - Combining transforms

  • مبدا تبدیل سه‌بعدی CSS CSS 3D Transform Origin

  • سبک تبدیل سه‌بعدی CSS - preserve 3d CSS 3D Transform style - preserve 3d

  • جعبه سه‌بعدی با استفاده از perspective و transform - بخش ۱ 3D box using perspective and transform - part 1

  • جعبه سه‌بعدی با استفاده از perspective و transform - بخش ۲ 3D box using perspective and transform - part 2

  • جعبه سه‌بعدی با استفاده از perspective و transform - بخش ۳ 3D box using perspective and transform - part 3

  • جعبه بزرگ سه‌بعدی با استفاده از عرض، ارتفاع و translateZ 3D BIG box using the width, height and translateZ

  • جعبه تصویر مکعب سه‌بعدی 3D cube image box

  • کارت چرخان سه‌بعدی با استفاده از transform - بخش ۱ 3D flip card using transform - part 1

  • کارت چرخان سه‌بعدی با استفاده از transform - بخش ۲ 3D flip card using transform - part 2

  • کارت چرخان سه‌بعدی تصویر با استفاده از transform 3D flip card image using transform

انتقال‌های CSS CSS Transitions

  • انتقال CSS - مقدمه CSS Transition - Introduction

  • انتقال CSS - اعمال انتقال به کارت چرخان CSS Transition - Applying transition to the flip card

  • انتقال CSS - تابع زمان‌بندی انتقال - بخش ۱ CSS Transition - Transition timing function - part 1

  • انتقال CSS - تابع زمان‌بندی انتقال - بخش ۲ CSS Transition - Transition timing function - part 2

  • انتقال CSS - تابع زمان‌بندی مراحل - بخش ۱ CSS Transition - Steps Transition timing function - part 1

  • انتقال CSS - تابع زمان‌بندی مراحل - بخش ۲ CSS Transition - Steps Transition timing function - part 2

  • انتقال CSS - cubic-bezier CSS Transition - cubic-bezier

  • انتقال CSS - مقایسه آنها در translate(X) - بخش ۱ CSS Transition- comparing them in translate(X) - part 1

  • انتقال CSS - مقایسه آنها در translate(X) - بخش ۲ CSS Transition- comparing them in translate(X) - part 2

  • انتقال CSS - تکمیل جزئیات CSS Transition - finishing touches

انیمیشن CSS CSS Animation

  • انیمیشن CSS - مبانی - انیمیشن کارت چرخان CSS Animation - Basics - animating flipcard

  • انیمیشن CSS - مبانی - انیمیشن مکعب سه‌بعدی CSS Animation - Basics - animating 3D cube

  • انیمیشن مکعب تصویر سه‌بعدی - بخش ۱ Animating 3D image cube - part 1

  • انیمیشن مکعب تصویر سه‌بعدی - بخش ۲ Animating 3D image cube - part 2

  • انیمیشن شیء توپ از بالا به پایین Animation a ball object from top to bottom

  • درک قاعده @keyframes Understanding the @keyframes rule

  • درک جهت انیمیشن Understanding the animation direction

  • انیمیشن اثر توپ پرتابی Animating a bouncing ball effect

  • انیمیشن اثر تصویر پرتابی Animating a bouncing image effect

  • انیمیشن حروف الفبا Font Awesome Animating font awesome alphabets

  • تابع زمان‌بندی انیمیشن - بخش ۱ Animation timing function - part 1

  • تابع زمان‌بندی انیمیشن - بخش ۲ Animation timing function - part 2

  • تابع زمان‌بندی انیمیشن - بخش ۳ Animation timing function - part 3

  • حالت پر کردن انیمیشن Animation fill mode

  • درک مقادیر پیش‌فرض در انیمیشن Understanding the default values in animation

  • انیمیشن رشد و کوچک شدن Grow and shrink animation

  • انیمیشن اثر محو شدن Fading effect animation

  • انیمیشن لودر دایره‌ای چرخان Spinning circle loader animation

  • انیمیشن لودر متحرک Moving loader animation

  • انیمیشن توپ‌های لغزنده Sliding balls animation

  • لودر چرخنده - بخش اول Rotating loader - part 1

  • لودر چرخنده - بخش دوم Rotating loader - part 2

  • لودر مربعی - بخش اول Square loader - part 1

  • لودر مربعی - بخش دوم Square loader - part 2

  • لودر فرفره‌ای Spinning top loader

  • لودر با افکت آب Water effect loader

  • انیمیشن تار شدن متن Text Blur Animation

  • انیمیشن نمونه رنگ Swatch Animation

  • آلبوم عکس چرخنده - بخش اول Spinning image album - Part 1

  • آلبوم عکس چرخنده (افزودن پرسپکتیو) - بخش دوم Spinning image album (adding perspective) - Part 2

  • انیمیشن لرزش Wiggle Animation

  • انیمیشن ضربان Beat animation

پروژه نهایی وب | صفحه اصلی | مگا پروکسی Final Web Project | Home Page | MegaProxy

  • نکته‌ای برای بهترین روش Note to consider for best practice

  • مقدمه پروژه وب صفحه اصلی Introduction to the Home page web project

  • ایجاد ساختار پایه Creating the basic structure

  • ایجاد و استایل‌دهی نوار بالایی Creating and styling the topbar

  • واکنش‌گرایی لیست بالایی Responsiveness of the toplist

  • کار با نوار ناوبری - بخش اول Working with the navigation bar - part 1

  • کار با نوار ناوبری - بخش دوم Working with the navigation bar - part 2

  • کار با نوار ناوبری - بخش سوم Working with the navigation bar - part 3

  • کار با نوار ناوبری - بخش چهارم Working with the navigation bar - part 4

  • بخش پایانی واکنش‌گرایی نوار ناوبری Concluding part of the responsiveness of the navigation bar

  • ایجاد چارچوب اسلایدشو Creating the slideshow's framework

  • کار بیشتر بر روی اسلایدشو Working more on the slideshow

  • انیمیشن اسلایدشو Animating the slideshow

  • سفارشی‌سازی مسیر و دسته اسکرول‌بار Customizing a scrollbar track and thumb

  • واکنش‌گرایی اسلایدشو Responsiveness of the slideshow

  • ایجاد ساختار بخش خوش‌آمدگویی Creating the structure of the welcome section

  • استایل‌دهی و واکنش‌گرا کردن بخش خوش‌آمدگویی Styling and making responsive the welcome section

  • چندین لمس نهایی Some finishing touches

  • ایجاد بخش خدمات - بخش اول Creating the services section - part 1

  • ایجاد بخش خدمات - بخش دوم Creating the services section - part 2

  • ایجاد بخش خدمات - بخش سوم Creating the services section - part 3

  • ایجاد بخش فرآیند - بخش اول Creating the process section - part 1

  • ایجاد بخش فرآیند - بخش دوم Creating the process section - part 2

  • ایجاد بخش پرسش‌های متداول - بخش اول Creating the F.A.Q section - part 1

  • ایجاد بخش پرسش‌های متداول - بخش دوم Creating the F.A.Q section - part 2

  • ایجاد بخش سیاست‌گذاری - بخش اول Creating the policy section - part 1

  • ایجاد بخش سیاست‌گذاری - بخش دوم Creating the policy section - part 2

  • ایجاد فوتر - بخش اول Creating the footer - part 1

  • ایجاد فوتر - بخش دوم Creating the footer - part 2

  • ایجاد فوتر - بخش سوم Creating the footer - part 3

پروژه نهایی وب | صفحه دوره‌ها Final Web Project | Courses Page

  • مقدمه صفحه دوره‌ها Introduction to the Courses page

  • ایجاد هدر تصویر - بخش اول Creating the image header - part 1

  • ایجاد هدر تصویر - بخش دوم Creating the image header - part 2

  • ایجاد ستون دوره‌ها - بخش اول Creating the courses column - part 1

  • ایجاد ستون دوره‌ها - بخش دوم Creating the courses column - part 2

  • ایجاد ابزار راهنمای دوره‌ها - بخش اول Creating a tooltip for the courses - part 1

  • ایجاد ابزار راهنمای دوره‌ها - بخش دوم Creating a tooltip for the courses - part 2

  • ایجاد آخرین ابزار راهنما برای دوره و لمس‌های نهایی Creating the last tooltip for the course and finishing touches

  • واکنش‌گرایی صفحه دوره‌ها - بخش اول Responsiveness of the courses page - part 1

  • واکنش‌گرایی صفحه دوره‌ها - بخش دوم Responsiveness of the courses page - part 2

صفحه نهایی وب | صفحه تیم Final Web Page | Team Page

  • مقدمه صفحه تیم Introduction to the Team page

  • ایجاد صفحه تیم - بخش اول Creating the team page - part 1

  • ایجاد صفحه تیم - بخش دوم Creating the team page - part 2

  • ایجاد صفحه تیم - بخش سوم Creating the team page - part 3

  • ایجاد صفحه تیم - بخش چهارم Creating the team page - part 4

صفحه نهایی وب | بلاگ Final Web Page | Blog

  • مقدمه صفحه بلاگ Introduction to the Blog page

  • ایجاد بخش بلاگ - بخش اول Creating the blog section - part 1

  • ایجاد بخش بلاگ - بخش دوم Creating the blog section - part 2

  • ایجاد بخش بلاگ - بخش سوم Creating the blog section - part 3

  • ایجاد بخش بلاگ - بخش چهارم Creating the blog section - part 4

صفحه نهایی وب | تماس Final Web Page | Contact

  • مقدمه صفحه تماس Introduction to the Contact page

  • ایجاد بخش تماس - بخش اول Creating the contact section - part 1

  • ایجاد بخش تماس - بخش دوم Creating the contact section - part 2

  • ایجاد بخش تماس - بخش سوم Creating the contact section - part 3

صفحه نهایی وب | گالری Final Web Page | Gallery

  • مقدمه صفحه گالری Introduction to the Gallery page

  • اولین بخش تصویر گالری First gallery image section

  • دومین بخش تصویر گالری - بخش اول Second gallery image section - Part 1

  • دومین بخش تصویر گالری - بخش دوم Second gallery image section - Part 2

  • سومین بخش تصویر گالری Third gallery image section

  • واکنش‌گرایی صفحه گالری Responsiveness of the Gallery Page

  • نکته نهایی Final Note

آموزش Adobe 2-in-1 Masterclass: Photoshop PLUS Illustrator

آموزش Adobe 2-in-1 Masterclass: Photoshop PLUS Illustrator

Adobe 2-in-1 Masterclass: Photoshop PLUS Illustrator

کلاس جامع UAD LUNA – آموزش تخصصی Universal Audio LUNA

کلاس جامع UAD LUNA – آموزش تخصصی Universal Audio LUNA

دانلود UAD LUNA COMPLETE MASTERCLASS - Universal Audio LUNA class

آموزش فروشگاه Shopify خود را از طریق Google تبلیغ کنید - بازاریابی دیجیتال از یک کارمند سابق Google

آموزش فروشگاه Shopify خود را از طریق Google تبلیغ کنید - بازاریابی دیجیتال از یک کارمند سابق Google

Advertise your Shopify Store via Google - Digital Marketing From a Former Googler

نمایش نظرات

آموزش استاد CSS: درک نحوه دستکاری خصوصیات CSS
جزییات دوره
95 hours
430
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
355
4.6 از 5
دارد
دارد
دارد
Pamch Tutor

https://donyad.com/d/c40c31

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Pamch Tutor Pamch Tutor

تکنسین آموزشی