از ویژگی transition-property برای تعیین ویژگی هایی که قرار است transition بر روی آنها اعمال شود استفاده می شود. به عنوان مثال اگر بخواهیم transition فقط بر روی رنگ پس زمینه یک عنصر اعمال شود داریم: div { transition-property : background-color; } شما می توانید نام یک ویژگی و یا چند ویژگی که با استفاده […]
transition-duration
ویژگی transition-duration تعیین می کند که transition چه مدت زمانی به طول می انجامد. یعنی چه مدت طول می کشد تا مقدار ویژگی که transition بر روی آن اعمال می شود از مقدار قبلی به مقدار جدید برسد. واحد زمانی این ویژگی می تواند ثانیه و یا میلی ثانیه باشد و مقدار پیشفرض آن 0 […]
transition-timing-function
از ویژگی transition-timing-function برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition در گذر زمان, استفاده می شود. این ویژگی اجازه می دهد تا فرایند تغییر یک ویژگی بتواند سرعت های مختلفی در دوره زمانیش داشته باشد. به بیان ساده تر عملیات transition می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت […]
transition-delay
ویژگی transition-delay مدت زمان مکث یا درنگ قبل از اعمال transition بر روی یک عنصر را تعیین می کند. به این معنا که اگر ویژگی از ویژگی های یک عنصر دارای transition باشد, زمانی که آن ویژگی بخواهد تغییر کند اگر ما برای آن transition-delay تعیین کنیم, آن ویژگی به همان مدت زمان مکث دارد […]
before::
before:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم. before:: به عنوان یک فرزند مجازی در اول یک عنصر HTML قرار می گیرد و محتوای آن به صورت پیشفرض در حالت inline نمایش داده می شود. div::before { content: […]
after::
after:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم. after:: به عنوان یک فرزند مجازی در آخر یک عنصر HTML قرار می گیرد و محتوای آن به صورت پیشفرض در حالت inline نمایش داده می شود. div::after { content: […]
box-sizing
از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود. هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند. […]
معرفی فیلترها در CSS
مقدمه فیلترها در CSS یک روش پردازش رندر کردن عنصر قبل از اینکه در صفحه نمایش داده شود می باشند. اگر با فیلترهای نرم افزار فوتوشاپ آشنا باشید در CSS هم تا الان ده فیلتر از همان جنس برای استفاده موجود است. معمولا از این فلیترها برای تاثیر روی تصاویر در صفحه استفاده می شود […]
شمارنده ها در CSS (قسمت دوم)
مقدمه در قسمت اول شمارنده ها مفاهیم پایه با ساخت یک مثال ساده مورد بررسی قرار گرفت. در این مطلب می خواهیم روش پیاده سازی شمارنده های چندگانه و تودرتو را بررسی کنیم. شمارنده های تودرتو برای ساخت شمارنده های تودرتو کافی است به جای تابع ()counter از تابع ()counters استفاده کنیم. برای این تابع […]
شمارنده ها در CSS (قسمت اول)
مقدمه شاید تا الان به دنبال شماره گذاری قسمت های مختلف یک مقاله بوده اید یا می خواستید عکس های یک صفحه را شماره گذاری کنید یا احتمالا جدول شماره گذاری شده محتوا داشته باشید و انواع شماره گذاری های دیگر. شاید تا الان این کار را به صورت دستی یا از طریق برنامه نویسی […]