با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد. از طریق این ویژگی می توانید تصمیم بگیرید که آیا مکان عنصر نسبت به flow صفحه مشخص شود (حالت پیشفرض) یا اینکه در عین حالی که جایگاهش در flow حفظ می شود مکانش تغییر کند و یا اینکه مکان آن […]
mix-blend-mode
از ویژگی mix-blend-mode برای مشخص کردن حالت blend-mode در مورد آمیختن یک عنصر با محتوای پشت سر آن (backdrop) استفاده می شود. اول چند مفهوم را با استفاده از تصویر زیر بررسی می کنیم: source عنصر مورد نظر ما می باشد که می خواهیم ویژگی mix-blend-mode را بر روی آن اعمال کنیم. destination عنصر و […]
display
از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند. در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. inline اگر عنصری دارای چارچوبی از […]
transform-origin
از ویژگی transform-origin برای تعیین مبدا مختصاتی تغییر شکل, مکان و یا وضعیت عناصر استفاده می شود. مثلا در مورد چرخاندن یک عنصر, اگر مبدا مختصاتی آن عنصر تغییر پیدا کند نتیجه تغییر چرخش متفاوت خواهد بود. تصویر زیر این موضوع را بهتر بیان می کند. توجه داشته باشید که نقطه سیاه مبدا مختصات عنصر […]
transform
با استفاده از ویژگی transform می توانید شکل, مکان و یا وضعیت یک عنصر را تغییر دهید. این تغییر می تواند دو بعدی و یا سه بعدی باشد. مقدار این ویژگی می تواند none باشد که به این معنی است که هیچ تغییری انجام نشود. و یا می توان یک و یا تعدادی از توابع […]
repeating-radial-gradient
از تابع ()repeating-radial-gradient برای ساخت گرادینت (<gradient>) از نوع شعاعی تکرار شونده استفاده می شود به این معنا که دو و یا چند رنگ به صورت دایره یا بیضی شکل در هم محو و به همان صورت در پس زمینه تکرار می شوند. این تابع دقیقا همان مقادیر تابع گرادینت شعاعی را می گیرد پس […]
repeating-linear-gradient
از تابع ()repeating-linear-gradient برای ساخت گرادینت (<gradient>) از نوع خطی تکرار شونده استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو و به همان صورت در پس زمینه تکرار می شوند. این تابع دقیقا همان مقادیر تابع گرادینت خطی را می گیرد […]
linear-gradient
از تابع ()linear-gradient برای ساخت گرادینت (<gradient>) از نوع خطی استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو می شوند. تصویر زیر یک گردانیت خطی که تشکیل شده از رنگ زرد و بنفش است را نشان می دهد: تعریف گرادینت خطی […]
box-shadow
از ویژگی box-shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود. تمام عناصر در یک صفحه می توانند سایه بگیرند. box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; box-shadow: 2px 3px 10px 5px #f0f; اولین مقدار فاصله سایه با باکس را در راستای محور X مشخص می کند, که […]
text-shadow
از ویژگی text-shadow برای اضافه کردن سایه به متن استفاده می شود. می توان به متن یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. اگر متنی همراه با خط هم باشد (مثلا زیر خط دار باشد) سایه به آن خط […]