border-image-slice

ویژگی border-image-slice تصویری که قرار است به عنوان حاشیه از آن استفاده شود را به نه قسمت تقسیم می کند. که قسمت ها شامل چهار گوشه, چهار لبه و یک قسمت مرکز می باشند. این ویژگی عمل تقسیم کردن تصویر را بر اساس چهار مقداری که برایش تعیین می شود انجام می دهد, بطوریکه هر […]

border-image-source

از ویژگی border-image-source برای تعیین تصویری که به عنوان یک لایه پس زمینه اضافه به جای حاشیه ای که توسط ویژگی border-style مشخص می شود, استفاده می شود. اگر مقدار این ویژگی برابر با none باشد و یا تصویر قابل نمایش نباشد, استایل های مربوط به حاشیه اصلی (border) بر روی عنصر اعمال می شوند. […]

border-image

از ویژگی border-image برای تعریف یک حاشیه تصویری به جای حاشیه ای که برای یک عنصر توسط ویژگی border-style تعیین می شود, استفاده می شود. همینطور با استفاده از این ویژگی می توان یک لایه اضافی پس زمینه برای عنصر تعریف کرد. این ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده […]

background-size

از ویژگی background-size برای تعیین اندازه تصویر پس زمینه عنصر استفاده می شود. این ویژگی می تواند یک جفت مقدار درصدی و یا طولی بگیرد. همینطور کلمات کلیدی cover و contain را قبول می کند و در نهایت مقدار auto را هم می توان برای این ویژگی در نظر گرفت.   background-size: 300px 200px; /* […]

background-origin

ویژگی background-origin تعیین می کند که شروع ترسیم پس زمینه عنصر در کدام ناحیه باشد. مقادیر متفاوت برای این ویژگی زمانی که با ویژگی هایی مثل background-repeat و background-clip ترکیب می شود باعث نتایج متفاوت می شود. اگر ویژگی background-attachment برای یک عنصر مقدار fixed داشته باشد ویژگی background-origin برای آن عنصر نادیده گرفته می […]

background-position

اگر برای یک عنصر پس زمینه ای تعریف شود ویژگی background-position مکان آن پس زمینه را برای آن عنصر (بعد از هرگونه تغییر اندازه پس زمینه) با توجه به ناحیه مشخص شده برای ترسیم پس زمینه تعیین می کند. این ویژگی کلمات کلیدی مثل top, bottom,right,left و center را می پذیرد. همچنین می توان مقدار […]

outline-offset

از ویژگی outline-offset برای تنظیم فاصله outline با مرزهای عنصر استفاده می شود. بصورت پیشفرض outline دور عنصر و بعد از حاشیه آن ترسیم می شود بطوری که فاصله ای بین آنها وجود ندارد اما با استفاده از ویژگی outline-offset می توان بین آنها فاصله بوجود آورد. این فاصله رنگی نخواهد داشت و شیشه ای […]

mix-blend-mode

از ویژگی mix-blend-mode برای مشخص کردن حالت blend-mode در مورد آمیختن یک عنصر با محتوای پشت سر آن (backdrop) استفاده می شود. اول چند مفهوم را با استفاده از تصویر زیر بررسی می کنیم: source عنصر مورد نظر ما می باشد که می خواهیم ویژگی mix-blend-mode را بر روی آن اعمال کنیم. destination عنصر و […]

display

از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند. در CSS دو نوع چارچوب اصلی وجود دارند: inline و block.   inline اگر عنصری دارای چارچوبی از […]

()matrix

با استفاده از تابع matrix که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate(80deg) translate(50px,25px) skewX(10deg); معادلش یک ماتریس دو بعدی به صورت زیر خواهد بود: transform: matrix(0.173648, 0.984808, […]