column-width

ویژگی column-width به ما این امکان را می دهد تا محتوای یک عنصر را بصورت ستونی (روزنامه ای) در کنار هم بچینیم. این ویژگی عرض آن ستون ها را تعیین می کند که مرورگر توسط آن تعدادی ستون را در کنار هم بوجود می آورد.

column-count

ویژگی column-count به ما این امکان را می دهد تا محتوای یک عنصر را بصورت ستونی (روزنامه ای) در کنار هم بچینیم و این ویژگی تعداد ستون ها را مشخص می کند.

mask

ویژگی mask از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان تمام ویژگی های مربوط به ماسک کردن یک عنصر را با یک اعلان مقدار دهی کرد.

استفاده از قابلیت های devtools در مرورگر کروم

Devtools Device Mode

به دلیل اهمیت زیاد طراحی واکنشگرا و روش های Mobile First در طراحی صفحات وب، ما به محیطی نیاز داریم تا بتوانیم واکشگرایی طرح خود در آن آزمایش و بررسی کنیم. مرورگر کروم برای این کار راه حلی بوجود آورده است تحت عنوان Device Mode که ما در این مطلب این قسمت از ابزار توسعه دهندگان را مورد بررسی قرار می دهیم.

mask-type

زمانی که از عنصر <mask> برای ماسک کردن یک عنصر استفاده می شود ویژگی mask-type تعیین کننده حالت محتوای عنصر <mask> است که از نوع alpha باشد یا luminance.

mask-composite

ویژگی mask-composite تعیین می کند که لایه ماسکی که توسط ویژگی mask-image تعریف شده است با لایه ماسک زیرین خود چگونه ترکیب می شود.

mask-clip

ویژگی mask-clip تعیین می کند که لایه ماسک بر روی کدام نواحی عنصر تاثیر گذار باشد.

mask-origin

ویژگی mask-origin تعیین می کند که شروع ترسیم لایه ماسک در کدام ناحیه عنصر باشد.

mask-size

ویژگی mask-size اندازه لایه ماسکی که توسط ویژگی mask-image تعیین شده است را تنظیم می کند.

اشکال سی اس اس، برش و ماسک کردن در CSS

شکل ها، برش و ماسک کردن

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