راسخون

مرجع CSS

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-لیست تمام خصوصیت ها

 

مرجع کامل خصوصیت های CSS

در زیر، تمام خصوصیت های CSS، دسته بندی شده اند، لطفاً برای مشاهده خصوصیت های مربوط به هر گروه روی آن کلیک نمایید:

  • Animation
  • Background
  • Border و outline
  • Box
  • Color
  • Content Paged Media
  • Dimension
  • Flexible Box
  • Font
  • Generated content
  • Grid
  • Hyperlink
  • List
  • Margin
  • Multi-column
  • Padding
  • Paged Media
  • Positioning
  • Print
  • Speech
  • Table
  • Text
  • 2D/3D Transform
  • Transition
  • User-interface

ستون "CSS" در جداول زیر، نسخه CSS ای که این خصوصیت در آن تعریف شده است را نشان می دهد. (CSS1، CSS2، CSS3)

خصوصیت های Animation (انیمیشن)

خصوصیت توضیحات CSS
@keyframes انیمیشن را مشخص می کند. 3
animation

از خصوصیت animation می توانید برای مختصر نویسی خصوصیت های زیر  به جز خصوصیت animation-play-state استفاده نمایید.

 3
animation-delay

زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است.

 3
animation-direction اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند) 3
animation-duration زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است. 3
animation-fill-mode مقادیری که انیمیشن خارج از زمان اجرا می گیرد را مشخص می کند. 3
animation-iteration-count تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد) 3
animation-name نام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند. 3
animation-timing-function نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است. 3
animation-play-state توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است. 3

خصوصیت های Background

خصوصیت توضیحات CSS
background از خصوصیت background می توانید برای مختصر نویسی خصوصیت های مربوط به پس زمینه استفاده نمایید. 1
background-attachment مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه. 1
background-color رنگ پس زمینه یک عنصر را تنظیم می کند. 1
background-image عکس های پس زمینه را تنظیم می کند. 1
background-position شروع مکان قرارگیری عکس پس زمینه را تنظیم می کند. 1
background-repeat چگونگی تکرار عکس پس زمینه را تنظیم می کند. 1
background-clip ناحیه رنگ آمیزی پس زمینه را مشخص می کند. 3
background-origin ناحیه قرار گیری عکس پس زمینه را مشخص می کند. (تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد) 3
background-size اندازه تصویر پس زمینه را تنظیم می کند. 3

خصوصیت های Border و Outline 

خصوصیت توضیحات CSS
border

تنظیمات تمام خصوصیت ها در یک تخصیص.

 1
border-bottom با استفاده از خصوصیت border-bottom، می توانید در یک مرحله تمام خصوصیت های لبه پایینی را تنظیم نمایید. 1
border-bottom-color color لبه پایینی را مشخص می کند. 1
border-bottom-style style لبه پایینی را مشخص می کند. 1
border-bottom-width width لبه پایینی را مشخص می کند. 1
border-color color لبه ها را مشخص می کند. 1
border-left با استفاده از خصوصیت مختصر border-left، می توانید تمام خصوصیت های لبه سمت چپ را در یک اعلان، تنظیم نمایید. 1
border-left-color color لبه سمت چپ را مشخص می کند. 1
border-left-style style لبه سمت چپ را مشخص می کند. 1
border-left-width width لبه سمت چپ را مشخص می کند. 1
border-right با استفاده از خصوصیت مختصر border-right، می توانید در یک مرحله تمام خصوصیت های لبه سمت راست را تنظیم نمایید. 1
border-right-color color لبه سمت راست را مشخص می کند. 1
border-right-style Style لبه سمت راست را مشخص می کند. 1
border-right-width width لبه سمت راست را مشخص می کند. 1
border-style style لبه ها رامشخص می کند. 1
border-top با استفاده از خصوصیت مختصر border-top، می توانید در یک مرحله تمام خصوصیت های لبه بالایی را تنظیم نمایید. 1
border-top-color color لبه بالایی را مشخص می کند. 1
border-top-style style لبه بالایی را مشخص می کند. 1
border-top-width width لبه بالایی را مشخص می کند. 1
border-width width لبه ها را مشخص می کند. 1
outline فرم مختصر شده outline تمام خصوصیت های outline را در یک تخصیص تنظیم می کند. 2
outline-color رنگ outline را مشخص می کند. 2
outline-style استایل outline را مشخص می کند. 2
outline-width ضخامت outline را مشخص می کند. 2
border-bottom-left-radius شکل لبه در گوشه پایین سمت چپ را مشخص می کند. 3
border-bottom-right-radius شکل لبه در گوشه پایین سمت راست را مشخص می کند. 3
border-image با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های *-border-image را مشخص کرد. 3
border-image-outset   3
border-image-repeat با استفاده از خصوصیت border-image-repeat می توانید نحوه ی نمایش تصویر در ناحیه border را تعیین نمایید. 3
border-image-slice با استفاده از خصوصیت border-image-slice، می توانید حاشیه داخلی image-border را مشخص نمایید. 3
border-image-source با استفاده از خصوصیت border-image-source می توانید از یک عکس به جای استایل های border که توسط خصوصیات border-style داده می شود استفاده کنید 3
border-image-width با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید. 3
border-radius با استفاده از خصوصیت مختصر border-radius، می توانید چهار خصوصیت *-border-radius را در یک مرحله تنظیم نمایید. 3
border-top-left-radius با استفاده از خصوصیت border-top-left-radius، می توانید شکل لبه در گوشه بالا سمت چپ را تعیین نمایید. 3
border-top-right-radius با استفاده از خصوصیت border-top-right-radius، می توانید شکل لبه در گوشه بالا سمت راست را تعیین نمایید. 3
box-decoration-break   3
box-shadow با استفاده از خاصیت box-shadow می تواین یک یا چند سایه به box داد. 3

خصوصیت های Box

خصوصیت توضیحات CSS
overflow-x با استفاده از خصوصیت overflow-x می توان مشخص کرد هنگامی که محتوا از لبه سمت چپ یا راست سرریز می شود، چه اتفاقی رخ دهد. 3
overflow-y با استفاده از خصوصیت overflow-y می توان مشخص کرد هنگامی که محتوا از لبه بالایی یا پایینی سرریز می شود، چه اتفاقی رخ دهد. 3
overflow-style با استفاده از خصوصیت می توان روش scroll شدن یک عنصر را هنگامی که سرریز می کند، مشخص کرد. 3
rotation خصوصیت rotation یک عنصر block را حول نقطه ای که توسط خصوصیت rotation-point مشخص می شود، در جهت خلاف عقربه های ساعت می چرخاند. 3
rotation-point خصوصیت rotation-point یک زوج عدد است که یک نقطه را به عنوان افست از لبه بالایی گوشه چپ مشخص می کند. در حقیقت چرخش حول این نقطه صورت می گیرد. 3

خصوصیت های color

خصوصیت توضیحات CSS
color-profile اجازه می دهد منبع پروفایل رنگ غیر از پروفایل پیش فرض انتخاب شود. 3
opacity با استفاده از خصوصیت opacity می توان میزان شفافیت یک عنصر را مشخص کرد. 3
rendering-intent اجازه تنظیم خصوصیت rendering intent را در منبع پروفایل رنگ به غیر از مقدار پیش فرض می دهد. 3

خصوصیت های Dimension

خصوصیت توضیحات CSS
height با استفاده از خصوصیت height می توان ارتفاع عناصر را تنظیم کرد. 1
max-height استفاده از خصوصیت  می توان حداکثر ارتفاع یک عنصر را مشخص کرد. 2
max-width با استفاده از خصوصیت max-width می توان حداکثر عرض یک عنصر را مشخص کرد. 2
min-height با استفاده از خصوصیت min-height می توان حداقل ارتفاع یک عنصر را مشخص کرد. 2
min-width با استفاده از خصوصیت min-width می توان حداقل عرض یک عنصر را مشخص کرد. 2
width تمام مرورگرهای اصلی، خصوصیت width را پشتیبانی می کنند. 1

خصوصیت های Flexible Box

خصوصیت توضیحات CSS
box-align با استفاده از خصوصیت box-align می توان نحوه ترازبندی عناصر داخل یک box را مشخص کرد. 3
box-direction با استفاده از خاصیت box-direction، جهت چینش فرزندان یک عنصر box را می توان مشخص کرد. 3
box-flex با استفاده از خاصیت box-flex می توان مشخص نمود که عناصر فرزند دارای سایز انعطاف پذیر یا انعطاف ناپذیر باشند. 3
box-flex-group با استفاده از خاصیت box-flexible-group عناصر انعطاف پذیر را به یک گروه flex اختصاص می دهیم. 3
box-lines با استفاده از خاصیت box-lines مشخص می کنیم هنگامی که فضای یک عنصر از فضای box والدش بیشتر شد، این عنصر به خط بعدی برود یا خیر. 3
box-ordinal-group با استفاده از خاصیت box-ordinal-group ترتیب نمایش فرزندان یک box را می توان مشخص کرد. 3
box-orient با استفاده از خصوصیت box-orient می توان مشخص کرد که فرزندان یک عنصر عمودی یا افقی چیدمان شوند. 3
box-pack با استفاده از خاصیت box-pack می توان مشخص کرد که فرزندان یک box هنگامی که سایز box از سایز فرزندان بیشتر است در کجا قرار گیرند. 3

خصوصیت های Font

خصوصیت توضیحات CSS
font با استفاده از خاصیت مختصر شده font، می توانیم تمام ویژگی های مربوط به فونت را در یک تخصیص، تنظیم کنیم. 1
font-family نام فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-family مراجعه فرمایید 1
font-size اندازه یک فونت و فاصله بین خطوط را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-size و line-height مراجعه فرمایید. 1
font-style Style یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-style مراجعه فرمایید. 1
font-variant کوچک یا بزرگ بودن حروف را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به  font-variantمراجعه فرمایید. 1
font-weight ضخامت یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-weight مراجعه فرمایید. 1
@font-face با استفاده از از قانون font-face@، می توانید هر فونتی را که می خواهید استفاده نمایید. فقط کافی است در قانون font-face@ ابتدا یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً روی سرور آپلود کرده اید هدایت کنید. 3
font-size-adjust با استفاده از خاصیت font-size-adjust می توانیم هنگامی که اولین فونت انتخابی در دسترس نبود، کنترل بیشتری روی اندازه فونت ها داشته باشیم. 3
font-stretch با استفاده از خاصیت Font-strech می توان یک متن را کشیده تر یا باریک تر (فشرده تر) کرد. 3

خصوصیت های ایجاد محتوی

خصوصیت توضیحات CSS
content خاصیت content با ترکیب شبه عنصرهای after: و after: برای درج محتوا به کار می رود. 2
counter-increment با استفاده از خاصیت counter-increment می توان مقادیر یک یا چند شمارنده را افزایش داد. 2
counter-reset با استفاده از خاصیت counter-reset می توان یک یا چند شمارنده ایجاد نمود یا آنها را بازنشانی (reset) کرد. 2
quotes با استفاده از خصوصیت quotes می توان علامت کوتیشنی که داخل عنصر کوتیشن دیگر قرار دارد را مشخص کرد 2
     

خصوصیت های Grid

خصوصیت توضیحات CSS
grid-columns عرض هر ستون را در یک Gird مشخص می کند. 3
grid-rows ارتفاع هر ستون را در یک Grid مشخص می کند. 3

خصوصیت های Hyperlink

خصوصیت توضیحات CSS
target با استفاده از خصوصیت مختصر شده target می توان تنظیمات مربوط به خصوصیت های target-name  ،target-new  و target-position را در یک تخصیص تعیین کرد. 3
target-name مشخص می کند که لینک در کجا باز شود. (مقصد لینک کجاست) 3
target-new با استفاده از خصوصیت target-new می توان مشخص کرد که لینک های جدید در پنجره جدید باز شوند و یا در سربرگ جدیدی در پنچره جاری باز شوند. 3
target-position با استفاده از خصوصیت target-position می توان مشخص کرد که مقصد جدید لینک باید کجا باشد. 3

 خصوصیت های List

خصوصیت توضیحات CSS
list-style با استفاده از فرم مختصر شده list-style می توان تمام خصوصیات مربوط به لیست را در یک خط تخصیص داد. 1
list-style-image با استفاده از خصوصیت list-style-image می توان تصویری را جایگزین علامت لیست کرد. 1
list-style-position با استفاده از خصوصیت list-style-position می توان مشخص کرد که آیا علامت داخل فضای محتوا قرار گیرد یا خارج از فضای محتوا. 1
list-style-type با استفاده از خصوصیت list-style-type می توان نوع علامت عناصر یک لیست را مشخص کرد. 1

خصوصیت های Margin

خصوصیت توضیحات CSS
margin فرم مختصر شده margin برای تنظیم تمام خصوصیت های margin در یک اعلان می باشد. این خصوصیت می تواند از یک تا چهار مقدار داشته باشد. 1
margin-bottom با استفاده از خصوصیت margin می توان میزان margin از لبه پایین را مشخص کرد. 1
margin-left با استفاده از خصوصیت margin-left می توان میزان margin از لبه سمت چپ را مشخص کرد. 1
margin-right با استفاده از خصوصیت margin-left می توان میزان margin از لبه سمت چپ را مشخص کرد. 1
margin-top با استفاده از خصوصیت margin-top می توان میزان margin از لبه پایین را مشخص کرد. 1

خصوصیت های Multi-column

خصوصیت توضیحات CSS
column-count با استفاده از خاصیت column-count تعداد ستون هایی که یک عنصر باید به آن تعداد تقسیم شود را مشخص می کنیم. 3
column-fill با استفاده از خصوصیت column-fill مشخص می کنیم که نحوه پر شدن ستون ها به صورت متوازن (balanced) باشد یا خیر. 3
column-gap با استفاده از خاصیت column-gap می توانیم میزان فاصله (شکاف) بین هر دوستون را مشخص کنیم. 3
column-rule خصوصیت column-rule در واقع فرم مختصر شده ای برای تنظیم تمام خاصیت های *-column-rule  می باشد 3
column-rule-color رنگ خط بین ستون ها را مشخص می کند. 3
column-rule-style استایل خط بین ستون ها را مشخص می کند. 3
column-rule-width ضخامت (عرض) خط بین ستون ها را مشخص می کند. 3
column-span با استفاده از خاصیت column-span می توانیم مشخص کنیم که یک عنصر باید در چند ستون محصور و محدود شود. 3
column-width  ضخامت ستون ها را مشخص می کند 3
columns خاصیت columns فرم مختصر شده ای برای تنظیم خاصیت های column-width و  column-count می باشد. 3

خصوصیت های Padding

خصوصیت توضیحات CSS
padding با استفاده از خصوصیت مختصر شده padding می توانیم تمام خصوصیت های padding را در یک تخصیص مقدار دهی کنیم. (فاصله بین border تا شروع محتوا، padding تلقی می شود) این خصوصیت می تواند از یک تا چهار مقدار داشته باشد. 1
padding-bottom با استفاده از خصوصیت padding-bottom می توانیم padding پایین یک عنصر را مقدار دهی کنیم. 1
padding-left با استفاده از خصوصیت padding-left می توانیم padding پایین یک عنصر را مقدار دهی کنیم 1
padding-right با استفاده از خصوصیت padding-right می توانیم padding سمت راست یک عنصر را مقدار دهی کنیم. 1
padding-top با استفاده از خصوصیت padding-top می توانیم padding بالای یک عنصر را مقدار دهی کنیم. 1

خصویت های Paged Media

خصوصیت توضیحات CSS
fit   3
fit-position   3
image-orientation   3
page   3
size   3

خصوصیت های Positioning

خصوصیت توضیحات CSS
bottom برای عناصری که مکان آن ها absolute است، ویژگی bottom لبه پایینی عنصر را نسبت به عنصر والدش، بالا یا پایین می برد.
برای عناصری که مکان آن ها relative است، ویژگی bottom لبه پایینی عنصر را نسبت به مکان خودش، بالا یا پایین می برد.		 2
clear با استفاده از خاصیت clear مشخص می کنیم که در کدام سمت از یک عنصر، عناصر شناور دیگر اجازه قرار گیری ندارند. 1
clip با استفاده از خاصیت clip می توانید یک مستطیل برای بریدن عنصری که به صورت absoulote موقعیت دهی شده است، مشخص کنید. 2
cursor   2
display با استفاده از خاصیت display می توانیم نوع boxی که برای عنصر  به کار رفته است را مشخص کنیم. 1
float با استفاده از خصوصیت float مشخص می کنیم که آیا یک box (یا عنصر) باید شناور شود یا خیر. 1
left با استفاده از خصوصیت left، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت چپ عنصر را نسبت به والدش به چپ یا راست جا به جا کرد. 2
overflow با استفاده از خصوصیت overflow می توان مشخص کرد هنگامی که محتوا سرریز می شود، چه اتفاقی رخ دهد. 2
position با استفاده از خصوصیت position، می توان روش مکان دهی به یک عنصر را مشخص کرد (static, relative, absolute or fixed). 2
right با استفاده از خصوصیت right، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت راست عنصر را نسبت به والدش به چپ یا راست جا به جا کرد. 2
top برای عناصری که مکان آن ها absolute است، ویژگی top لبه بالایی عنصر را نسبت به عنصر والدش، بالا یا پایین می برد.
برای عناصری که مکان آن ها relative است، ویژگی top لبه بالایی عنصر را نسبت به مکان خودش، بالا یا پایین می برد.		 2
visibility با استفاده از خصوصیت visibility می توانید،یک عنصر را نمایش بدهید یا آن را مخفی کنید. 2
z-index خصوصيت z-index ترتيب عناصر را مشخص مي کند (کدام عنصر بايد جلو يا پشت ديگر عناصر باشد) 2

خصوصیت های Print

خصوصیت توضیحات CSS
orphans   2
page-break-after با استفاده از خصوصیت page-break-after می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را بعد از یک عنصر تنظیم کرد. 2
page-break-before با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را قبل از یک عنصر تنظیم کرد. 2
page-break-inside با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) داخل یک عنصر را تنظیم کرد. 2
widows   2

خصوصیت های Ruby

خصوصیت توضیحات CSS
ruby-align   3
ruby-overhang   3
ruby-position   3
ruby-span   3

خصوصیت های Speech

خصوصیت توضیحات CSS
mark   3
mark-after   3
mark-before   3
phonemes   3
rest   3
rest-after   3
rest-before   3
voice-balance   3
voice-duration   3
voice-pitch   3
voice-pitch-range   3
voice-rate   3
voice-stress   3
voice-volume   3

خصوصیت های Table

خصوصیت توضیحات CSS
border-collapse با استفاده از خاصیت border-collapse، می توانید لبه های دوخطی یک جدول را به لبه های یک خطی و مجزا تبدیل نمایید. 2
border-spacing با استفاده از خصوصیت border-spacing، می توانید فاصله بین لبه ها در سلول های مجاور یک جدول را مشخص نمایید. 2
caption-side با استفاده از خاصیت caption-side می توانیم مکان قرار گیری عنوان جدول را مشخص کنیم. 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
table-layout با استفاده از خصوصیت table-layout می توان الگوریتم چیدمان ظاهری جدول را تنظیم کرد. 2

خصوصیت های Text

خصوصیت توضیحات CSS
color با استفاده از خاصیت color می توانیم رنگ متن را مشخص کنیم. 1
direction با استفاده از خاصیت direction می توانیم جهت نوشتن متن را مشخص کنیم. 2
letter-spacing با استفاده از خصوصیت letter-spacing می توان فاصله حروف یک متن را افزایش یا کاهش داد. 1
line-height با استفاده از خصوصیت line-height می توان ارتفاع خطوط را مشخص کرد. 1
text-align با استفاده از خصوصیت text-align می توان ترازبندی افقی نوشته ها در یک عنصر را مشخص کرد. 1
text-decoration خصوصیت text-decoration نحوه آذین بندی نوشته ها را مشخص می کند. 1
text-indent با استفاده از خصوصیت text-indent می توان میزان تورفتگی اولین خط یک متن را مشخص کرد. 1
text-transform با استفاده از خصوصیت text-transform می توان حروف یک متن را به حروف بزرگ یا کوچک تبدیل کرد. 1
unicode-bidi با استفاده از ترکیب خصوصیت unicode-bidi با خصوصیت direction می توان مشخص کرد که آیا متن باید بازنویسی شود تا چند زبانی را در یک سند پشتیبانی کند یا خیر. 2
vertical-align با استفاده از خصوصیت vertical-align می توان تراز بندی عمودی یک عنصر را تنظیم کرد. 1
white-space با استفاده از خصوصیت white-space می توان مشخص کرد که خطوط فاصله داخل یک عنصر چگونه مدیریت شوند. 1
word-spacing : با استفاده از خصوصیت word-spacing می توان فاصله بین کلمات را کاهش یا افزایش داد. 1
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box 3
punctuation-trim Specifies whether a punctuation character should be trimmed 3
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" 3
text-justify با استفاده از خصوصیت text-justify می توان مشخص کرد، هنگامی متن justify می شود، روش justify شدن چگونه باشد. 3
text-outline با استفاده از خصوصیت text-outline می توان برای یک متن خط خارجی (outline) مشخص کرد. 3
text-overflow با استفاده از خصوصیت text-overflow می توان مشخص کرد هنگامی متن از عنصر والدش سرریز می کند، چه اتفاقی رخ دهد. 3
text-shadow با استفاده از خصوصیت text-shadow می توان به متن سایه اضافه کرد. 3
text-wrap با استفاده از خصوصیت text-wrap می توان قوانین مربوط به شکستن خط را در یک متن مشخص کرد. 3
word-break با استفاده از خصوصیت word-break می توان قانون شکستن خط را برای رسم الخط non-CJK تعیین کرد. 3
word-wrap با استفاده از خصوصیت word-wrap کلماتی با طول بلند که در خط جا نمی شوند، شکسته می شوند و در خط بعدی نمایش داده می شوند. 3

خصوصیت های 2D/3D Transform

خصوصیت توضیحات CSS
transform با استفاده از خصوصیت transform می توان تبدیل دوبعدی و سه بعدی را به یک عنصر اعمال کرد. این خصوصیت اجازه می دهد تا عناصر را بچرخایند، عناصر را کج کنید، مقیاس عناصر را افزایش و یا کاهش دهید، عناصر را حرکت دهید. 3
transform-origin با استفاده از خصوصیت transform-origin می توان مکان عنصر تبدیل شده را تغییر داد. 3
transform-style با استفاده از خصوصیت transform-style می توان نحوه چرخیدن عناصر تو در تو را در فضای سه بعدی مشخص کرد. 3
perspective با استفاده از خصوصیت perspective می توان مشخص کرد که یک عنصر سه بعدی در چند پیکسلی دید کاربر قرار گیرد. این خصوصیت به شما  اجازه می دهد تا دور نمای عناصر سه بعدی را تغییر دهید تا نمای آنها تغییر یابند. 3
perspective-origin با استفاده از خصوصیت perspective-origin می توان مشخص کرد که یک عنصر سه بعدی روی محور X و محور y از کجا شروع شود. این خصوصیت به شما اجازه می دهد، محل قرارگیری عنصر سه بعدی از پایین را مشخص کنید. 3
backface-visibility با استفاده از خصوصیت backface-visibility، می توان مشخص نمود، زمانی که پشت عنصر به سمت صفحه نمایش است، آیا دیده شود یا خیر. 3

خصوصیت های Transition

خصوصیت توضیحات CSS
transition با استفاده از فرم مختصر شده خصوصیت transition می توان چهار خصوصیت transition را یکجا تعریف کرد. 3
transition-property با استفاده از خصوصیت transition-property می توان نام خصوصیت CSSی که انتقال روی آن خصوصیت صورت می گیرد را مشخص کرد. به عبارتی transition-property نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. 3
transition-duration با استفاده از خصوصیت transiiion-duration می توان مشخص کرد عمل انتقال در چند ثانیه یا در چند میلی ثانیه تکمیل شود. 3
transition-timing-function با استفاده از خصوصیت transition-timing-function می توان سرعت منحنی انتقال را مشخص کرد. 3
transition-delay با استفاده از خصوصیت transition-delay می توان مشخص کرد که پس از چه مدت زمانی انتقال انجام شود. 3

خصوصیت های User-interface

خصوصیت توضیحات CSS
appearance با استفاده از خصوصیت appearance، می توانید نحوه نمایش عنصر را شبیه دیگر عناصر قرار دهید. 3
box-sizing با استفاده از خصوصیت box-sizing می توانید عناصر را در یک ناحیه fit کنید. 3
icon   3
nav-down با استفاده از خصوصیت nav-down می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود. 3
nav-index Specifies the tabbing order for an element 3
nav-left با استفاده از خصوصیت nav-left می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود. 3
nav-right با استفاده از خصوصیت nav-right می توان مشخص کرد که هنگام فشردن کلید مکان نمای راست، کدام عنصر انتخاب شود. 3
nav-up با استفاده از خصوصیت nav-up می توان مشخص کرد که هنگام فشردن کلید مکان نمای بالا، کدام عنصر انتخاب شود. 3
outline-offset با استفاده از خصوصیت outline-offset، می توان افستی را در اطراف border عنصر ایجاد کرد. 3
resize با استفاده از خصوصیت resize می توان مشخص کرد که یک کاربر می تواند عنصری را تغییر سایز دهد یا خیر. 3

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-لیست تمام گزینشگرها

CSS Selector - مرجع کامل گزینشگرها در CSS

در CSS، به الگوهایی که برای انتخاب عناصری که قصد دارید به آن ها استایل بدهید، Selector یا گزینشگر می گوییم.

ستون "CSS" در جدول زیر نسخه CSS ای که این الگو در آن تعریف شده است را نشان می دهد. (CSS1، CSS2، CSS3)

گزینشگر مثال توضیحات مثال CSS
.class .intro

تمام عناصر با کلاس "intro" را انتخاب می کند.

 1
#id #firstname

عنصری که id آن "firstname" می باشد را انتخاب می کند.

 1
* *

تمام عناصر را انتخاب می کند.

 2
element p

تمام عناصر <p> را انتخاب می کند.

 1
element,element div,p

تمام عناصر <P> و تمام عناصر <div> را انتخاب می کند.

 1
element element div p

تمام عناصر <p> که داخل عناصر <div> قرار دارند را انتخاب می کند.

 1
element>element div>p

تمام عناصر <p> که پدر آن ها عنصر <div> است را انتخاب می کند.

 2
element+element div+p

تمام عناصری که بلافاصله بعد از عناصر <div> قرار گرفته اند.

 2
[attribute] [target]

تمام عناصری که دارای خصوصیت target هستند را انتخاب می کند.

 2
[attribute=value] [target=_blank]

تمام عناصری که خصوصیت target آن برابر "blank_" می باشد را انتخاب می کند.

 2
[attribute~=value] [title~=flower]

تمام عناصری که خصوصیت title آن شامل واژه "flower" باشد را انتخاب می کند.

 2
[attribute|=value] [lang|=en]

تمام عناصری که خصوصیت lang آن با مقدار "en" آغاز می شود.

 2
:link a:link

تمام لینک هایی که از آن بازدید نشده است را انتخاب می کند.

 1
:visited a:visited

تمام لینک هایی که بازدید شده است را انتخاب می کند.

 1
:active a:active

لینک های فعال را انتخاب می کند.

 1
:hover a:hover

لینک هایی را که موس روی آن حرکت می کند را انتخاب می کند.

 1
:focus input:focus

تمام عناصر ورودی که فوکوس شده اند را انتخاب می کند.

 2
:first-letter p:first-letter

اولین حرف عنصر <p> را انتخاب می کند.

 1
:first-line p:first-line

اولین خط هر عنصر <p> را انتخاب می کند.

 1
:first-child p:first-child

تمام عناصر <p> که اولین فرزند پدرشان هستند (فرزند ارشد پدرشان) را انتخاب می کند.

 2
:before p:before

محتوا را قبل از محتوای تمام عناصر <p> درج می کند.

 2
:after p:after

محتوا را بعد از هر عنصر <p> درج می کند.

 2
:lang(language) p:lang(it)

تمام عناصر <p> را انتخاب می کند که خصوصیت lang آن با "it" (ایتالیایی) تنظیم شده است.

 2
element1~element2 p~ul

 تمام عناصری <ul> که قبل از یک عنصر <p> قرار دارد را بر می گرداند.

 3
[attribute^=value] a[src^="https"]

تمام عناصر <a> را انتخاب می کند که که خصوصیت scr آن با واژه "https" آغاز شود.

 3
[attribute$=value] a[src$=".pdf"]

تمام عناصر <a> را انتخاب می کند که که خصوصیت scr آن با واژه "https" خاتمه می یابد.

 3
[attribute*=value] a[src*="Beyamooz"]

تمام عناصر <a>  که خصوصیت src آن حاوی رشته "Beyamooz" ّباشد را انتخاب می کند.

 3
:first-of-type p:first-of-type

تمام عناصر <p> را که اولین عنصر <p> پدرشان باشند را انتخاب می کند.

توجه فرمایید که p:first-child باید p اولین فرزند پدرش باشد.

 3
:last-of-type p:last-of-type

تمام عناصر <p> که آخرین عنصر <p> پدرشان هستند را انتخاب می کند.

 3
:only-of-type p:only-of-type

تمام عناصر <p> که تنها عنصر <p> پدرشان هستند را انتخاب می کند.

 3
:only-child p:only-child

تمام عناصر <p> که تنها فرزند پدرشان هستند را انتخاب می کند. (تک فرزند.)

 3
:nth-child(n) p:nth-child(2)

تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-last-child(n) p:nth-last-child(2)

تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-of-type(n) p:nth-of-type(2)

تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-last-of-type(n) p:nth-last-of-type(2)

تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:last-child p:last-child

تمام عناصر <p> که آخرین فرزند پدرشان هستند را انتخاب می کند.

 3
:root :root

عنصر root سند را بر می گرداند.

 3
:empty p:empty

تمام عناصر <p> که فرزند ندارند، را انتخاب می کند.

 3
:target #news:target

تمام عناصر news# فعال جاری را بر می گرداند.

 3
:enabled input:enabled

تمام عناصر <input> را انتخاب می کند که enabled هستند.

 3
:disabled input:disabled

تمام عناصر <input> که disabled هستند را انتخاب می کند.

 3
:checked input:checked

تمام عناصر <input> که checked هستند را انتخاب می کند.

 3
:not(selector) :not(p)

تمام عناصر را به جز عناصر <p> انتخاب می کند.

 3
::selection ::selection

قسمتی از عنصر که توسط کاربر به حالت انتخاب درآمده است را انتخاب می کند.

 3

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-خصوصیت های شنیداری

Aural Style Sheet - صفحات استایل شنیداری

style sheetهای شفاهی ترکیبی از سینتکس های گفتاری و افکت های صوتی را استفاده می کند و به کاربر اجازه شنیدن اطلاعات را به جای خواندن آن می دهد.

ارائه شفاهی می تواند توسط افراد زیر استفاده شود:

  • توسط افراد نابینا
  • به افراد کمک می کند تا خواندن را یاد بگیرند.
  • به کاربران کمک می کند که مشکلات خواندن خود را درک کنند.
  • برای تفریح خانگی
  • داخل خودرو
  • توسط جوامع دچار اختلال چاپ

ارائه شفاهی، سند را به یک متن خام تبدیل می کند و سپس آن را به عنوان تغذیه به نرم افزار screen reader می دهد. (screen reader برنامه ای که تمام کاراکترهای روی صفحه را می خواند.)

مثالی از استایل های شفاهی:

h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}

در مثال بالا، ترکیب کننده صدا، صوتی را ایجاد خواهد کرد، سپس عناوین را با قدرت بیشتری بیان خواهد کرد.

مرجع CSS شفاهی یا شنیداری

ستون CSS در جدول زیر، نسخه CSS را مشخص می کند.

خصوصیت توضیحات مقادیر CSS
azimuth

تنظیم می کند که صدا از کجا پخش شود.

 angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards		 2
cue

تنظیم خصوصیت های  cue در یک خط

 cue-before
cue-after		 2
cue-after

صوتی را مشخص می کند که بعد از گفتن محتوای عنصر نمایش پخش می شود.

 none
url		 2
cue-before

صوتی را  مشخص می کند که بعد از گفتن محتوای عنصر نمایش پخش می شود.

 none
url		 2
elevation

مشخص می کند که صدا از کجا پخش شود.

 angle
below
level
above
higher
lower 		 2
pause

تنظمیم خصوصیت های مربوط به توقف پخش در یک خط

 pause-before
pause-after		 2
pause-after

مدت زمان وقفه بعد از خواندن محتوای یک عنصر

 time
%		 2
pause-before

مدت زمان وقفه قبل از خواندن محتوای یک عنصر

 time
%		 2
pitch

صدای خواندن را مشخص می کند.

 frequency
x-low
low
medium
high
x-high 		 2
pitch-range

لحن خواندن را مشخص می کند. (یک نواخت یا با فراز و فرود)

 number 2
play-during

صوتی را مشخص می کند که در حین خواندن عناصر متن پخش می شود.

 auto
none
url
mix
repeat		 2
richness

میزان رسایی صدای خواندن را مشخص می کند. (صدای قوی یا صدای ضعیف؟)

 number 2
speak

مشخص می کند که آیا محتوا به صورت شفاهی رندر شود؟

 normal
none
spell-out		 2
speak-header

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

 always
once		 2
speak-numeral

مشخص می کند که اعداد چگونه خوانده شوند.

 digits
continuous		 2
speak-punctuation

مشخص می کند که علائم نقطه گذاری چگونه خوانده شود.

 none
code		 2
speech-rate

سرعت خواندن را مشخص می کند.

 

 number
x-slow
slow
medium
fast
x-fast
faster
slower 		 2
stress

میزان تاکید را مشخص می کند.

 number 2
voice-family

نوع صدا را مشخص می کند.

 specific-voice
generic-voice		 2
volume

ولوم صدا را مشخص می کند.

 number
%
silent
x-soft
soft
medium
loud
x-loud 		 2
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-لیست فونت های رایج

ترکیب فونت های رایج 

خصوصیت font-family باید با چندین فونت مقدار دهی شود، این کار بیشترین سازگاری بین مرورگرها و سیستم عامل های مختلف را تضمین می کند. اگر مرورگر اولین فونت را پشتیبانی نکرد، فونت بعدی و به همین ترتیب این روند ادامه پیدا می کند.

با فونتی که می خواهید شروع کنید، و با یک فونت generic خاتمه دهید، این کار باعث می شود تا مرورگر، در صورتی که هیچ یک از فونت های مد نظر شما را پیدا نکرد، یک فونت مشابه را از خانواده فونت generic انتخاب کند.

مثال

p{font-family:"Times New Roman", Times, serif}

در زیر لیستی از ترکیب های رایج فونت ها که با فونت های generic ترکیب شده اند آورده شده است:

فونت های Serif

font-family Example text
Georgia, serif

This is a heading

This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph
"Times New Roman", Times, serif

This is a heading

This is a paragraph

فونت های Sans-Serif

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph
"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph
"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph
Impact, Charcoal, sans-serif

This is a heading

This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph
Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph
"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph
Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

فونت های Monospace

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph
"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-لیست فونت های رایج

ترکیب فونت های رایج 

خصوصیت font-family باید با چندین فونت مقدار دهی شود، این کار بیشترین سازگاری بین مرورگرها و سیستم عامل های مختلف را تضمین می کند. اگر مرورگر اولین فونت را پشتیبانی نکرد، فونت بعدی و به همین ترتیب این روند ادامه پیدا می کند.

با فونتی که می خواهید شروع کنید، و با یک فونت generic خاتمه دهید، این کار باعث می شود تا مرورگر، در صورتی که هیچ یک از فونت های مد نظر شما را پیدا نکرد، یک فونت مشابه را از خانواده فونت generic انتخاب کند.

مثال

p{font-family:"Times New Roman", Times, serif}

در زیر لیستی از ترکیب های رایج فونت ها که با فونت های generic ترکیب شده اند آورده شده است:

فونت های Serif

font-family Example text
Georgia, serif

This is a heading

This is a paragraph
"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph
"Times New Roman", Times, serif

This is a heading

This is a paragraph

فونت های Sans-Serif

font-family Example text
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph
"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph
"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph
Impact, Charcoal, sans-serif

This is a heading

This is a paragraph
"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph
Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph
"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph
Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

فونت های Monospace

font-family Example text
"Courier New", Courier, monospace

This is a heading

This is a paragraph
"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

مرجع CSS-واحدهای اندازه گیری

واحدهای اندازه گیری

واحد توضیحات
% درصد
in اینچ
cm سانتی متر
mm میلی متر
em

1em به معنای سایز فونت فعلی است. 2em یعنی دو برابر سایز فونت فعلی. برای مثال اگر عنصری با فونت 12pt نمایش داده می شود، آنگاه '2em' معادل 24pt است. em یکی از واحدهای بسیار مفید در CSS است، چون می تواند به صورت اتوماتیک با فونتی که کاربر خواننده استفاده می کند، منطبق شود.
ex

یک ex عبارت است از x-height فونت. (x-height معمولا حدود نصف سایز فونت است)
pt

پوینت (1pt معادل 1.72 اینچ است)
pc

پیکا (1pc معادل 12 پوینت است)
px

پیکسل (یک نقطه روی صفحه نمایش)

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 
مرجع خصوصیت های CSS

قانون @keyframes

مثال

عنصر <div> بتدریج 200 پیکسل به سمت پایین حرکت می کند:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

در طول اجرای انیمیشن می توانید چندین بار Style را تغییر دهید.

تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.

0% ابتدای انیمیشن و 100% انتهای آن است.

برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.

توجه: پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.

نحوه استفاده

@keyframes animationname {keyframes-selector {css-styles;}}
مقدار توضیحات
animationname الزامی است. نام انیمیشن را مشخص می کند.
keyframes-selector الزامی است. مشخص می کند در چه زمانی از اجرای انیمیشن، Style اعمال شود.
مقادیر مجاز:

0-100%
from (0%)
to (100%)

توجه: در یک انیمیشن می توانید چندین keyframes-selectors داشته باشید.
css-styles الزامی است. می تواند شامل یک یا چند خصوصیت CSS باشد.

مثال - خودتان امتحان کنید

مثال

مشخص کردن چندین keyframes-selector در یک انیمیشن:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

مثال

تغییر چند Style به صورت همزمان:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

مثال

چندین keyframes-selector و Style مختلف در یک انیمیشن:

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation

مثال

اتصال انیمیشن "mymove" به عنصر <div>، با استفاده از خصوصیت animation:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

از خصوصیت animation می توانید برای مختصر نویسی 6 خصوصیت مربوط به انیمیشن استفاده نمایید.

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction

در جدول انتهای این بیاموز، می توانید توضیحات بیشتری را مطالعه نمایید.

توجه: باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.

مقدار پیشفرض none 0 ease 0 1 normal none running
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animation="mymove 5s infinite"

نحوه استفاده

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
مقدار توضیحات
animation-name نام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند.
animation-duration زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است.
animation-timing-function نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است.
animation-delay زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است.
animation-iteration-count تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد)
animation-direction اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند)
animation-fill-mode

مقادیری که انیمیشن خارج از زمان اجرا می گیرد را مشخص می کند.
animation-play-state توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است.

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-delay

مثال

بعد از 2 ثانیه انتظار، انیمیشن اجرا می شود:

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-delay را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-delay می توانید زمان شروع انیمیشن را تعیین نمایید.

مقدار animation-delay به ثانیه (s) یا میلی ثانیه (ms) تعیین می شود.

نکته: مقادیر منفی قابل قبول است، بعنوان مثال، مقدار 2s- باعث می شود که انیمیشن بلافاصله اجرا شود اما شروع آن 2 ثانیه جلوتر از حالت عادی است.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationDelay="2s"

نحوه استفاده

animation-delay: time;
مقدار توضیحات نمایش دادن
time اختیاری است. تعیین می کند که قبل از شروع انیمیشن چه مقدار باید منتظر بمانیم. این مقدار به ثانیه (s) یا میلی ثانیه (ms) تعیین می شود. مقدار پیشفرض 0 است.

مثال - خودتان امتحان کنید

مثال

مقدار منفی، توجه داشته باشید که شروع انیمیشن 2 ثانیه جلوتر از حالت عادی است.

animation-delay: -2s /* W3C and Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari and Chrome */

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-direction

مثال

یکبار انیمیشن اجرا می شود و سپس بصورت وارونه یا عکس اجرا می شود:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-direction را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-direction می توانید جهت و نحوه تناوب انیمیشن را تعیین نمایید.

توجه: اگر خصوصیت animation-iteration-count را با مقدار 1 تنظیم کرده باشید (انیمیشن فقط یکبار اجرا می شود) در این صورت اگر خصوصیت animation-direction را با مقدار "alternate" یا "alternate-reverse" تنظیم نمایید، اثری نخواهد داشت.

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationDirection="alternate"

نحوه استفاده

animation-direction: value;
مقدار توضیحات نمایش دادن
normal انیمیشن بصورت معمولی اجرا می شود. مقدار پیشفرض.
reverse انیمیشن بصورت عکس اجرا می شود یعنی از آخر به اول.
alternate اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، مقدار alternate انیمیشن را به صورت عکس تکرار می کند.
alternate-reverse اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، مقدار alternate-reverse انیمیشن را به صورت عکس تکرار می کند. (نقطه شروع انیمیشن از آخر به اول است)

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-duration

مثال

انیمیشن در 2 ثانیه کامل اجرا می شود:

animation-duration:2s;
-webkit-animation-duration:2s; /* Safari and Chrome */

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-duration را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-duration می توانید زمان اجرای یک سیکل انیمیشن را مشخص نمایید.

این مقدار به ثانیه (s) یا میلی ثانیه (ms) تعیین می شود.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationDuration="3s"

نحوه استفاده

animation-duration: time;
مقدار توضیحات نمایش دادن
time زمان اجرای یک سیکل انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است.

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-fill-mode

مثال

حرکت دادن (animate) شی ای از یک مکان به مکانی دیگر و وادار کردن آن شی ء به ماندن در آن مکان:

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-fill-mode را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-fill-mode  می توان مشخص نمود که خارج از اجرای انیمیشن (قبل یا بعد از اجرا)، چه مقادیری روی عنصر اعمال شود.

بطور پیشفرض، CSSهایی که در حین اجرای انیمیشن استفاده می شوند، قبل و بعد از اجرای انیمیشن روی عنصر حرکت داده شده هیچ اثری ندارند. خصوصیت  animation-fill-mode می تواند این رفتار را لغو کند. 
 

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationFillMode="backwards"

نحوه استفاده

animation-fill-mode: none|forwards|backwards|both;
مقدار توضیحات
none بعد یا قبل از اجرای انیمیشن، هیچ Styleی روی عنصر حرکت داده شده اعمال نخواهد شد.
forwards پس از پایان انیمیشن (توسط animation-iteration-count تعیین می شود)، خصوصیت هایی که در آخرین فریم اعمال شده اند، روی عنصر حرکت داده شده نیز اعمال می شود.
backwards در طول زمان انتظار، قبل از اجرای انیمیشن (توسط خصوصیت animation-delay تعیین می شود)، مقادیر خصوصیت هایی که در اولین تکرار انیمیشن استفاده می شوند، در طول این زمان روی عنصر اعمال خواهد شد.
این مقادیر یا از فریم "from" هستند (زمانی که animation-direction با مقدار "normal" یا "alternate" تنظیم شده است) یا از فریم  "to" (زمانی که animation-direction با مقدار "reverse" یا "alternate-reverse" تنظیم شده است).
both

انیمیشن از قواعد هردوی forwards و backwards پیروی می کند. این به این معناست که خصوصیت های انیمیشن را در هر دو جهت گسترش می دهد. 

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-iteration-count

مثال

در مثال زیر، انیمیشن سه بار اجرا می شود:

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-iteration-count را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-iteration-count می توانید تعداد اجرای یک انیمیشن را مشخص نمایید.

مقدار پیشفرض 1
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationIterationCount=3

نحوه استفاده

animation-iteration-count: value;
مقدار توضیحات نمایش دادن
n یک عدد که مشخص می کند چه تعداد باید یک انیمیشن اجرا شود.
infinite مشخص می کند که انیمیشن باید تا بینهایت تکرار شود. (برای همیشه)

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-name

مثال

اتصال عنصر <div> به قانون keyframes@ با استفاده از نام انیمیشن:

animation-name:mymove;
-webkit-animation-name:mymove; /* Safari and Chrome */

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-name را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-name، می توانید قانون keyframes@ را به عنصر مورد نظرتان متصل نمایید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationName="mymove"

نحوه استفاده

animation-name: keyframename|none;
مقدار توضیحات
keyframename نامی که در قانون keyframes@ تعریف کرده ایم را مشخص می کند.
none مشخص می کند که انیمیشنی وجود ندارد. (می توان از آن برای لغو کردن انیمیشن هایی که بصورت آبشاری اجرا می شوند، استفاده نمود)

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت animation-timing-function

مثال

اجرای یک انیمیشن با سرعت یکسان، از ابتدا تا انتها:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-timing-function را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت animation-timing-function، می توانید منحنی سرعت انیمیشن را تعیین نمایید.

منحنی سرعت، زمانی را که یک انیمیشن برای تغییر از یک دسته استایل CSS به دسته ای دیگر استفاده می کند را تعیین می کند.

با استفاده از منحنی سرعت، می توانید تغییرات را آرامتر نمایش دهید.

مقدار پیشفرض ease
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationTimingFunction="linear"

نحوه استفاده

animation-timing-function: value;

برای تنظیم منحنی سرعت در خصوصیت animation-timing-function، می توانید از یک تابع ریاضی بنام ()cubic-bezier استفاده نمایید. همچنین می توانید مقادیر از پیش تعریف شده اند را استفاده نمایید.

مقدار توضیحات نمایش دادن
linear انیمیشن از ابتدا تا انتها سرعت یکسانی دارد.
ease انیمیشن  شروع کندی دارد، سپس تند می شود و قبل از اینکه پایان یابد کند می شود. (مقدار پیش فرض)
ease-in انیمیشن شروع کندی دارد.
ease-out انیمیشن پایان کندی دارد.
ease-in-out انیمیشن، شروع و پایان کندی دارد.
cubic-bezier(n,n,n,n) مقادیر ورودی شما در تابع cubic-bezier منحنی سرعت را تعیین می کنند.
مقادیر مجاز، اعداد 0 تا 1 هستند.		  

نکته: می توانید مقادیر مختلف این خصوصیت را در قسمت "خودتان امتخان کنید" زیر مشاهده نمایید.

مثال - خودتان امتحان کنید

مثال

برای تشخیص بهتر تفاوت بین مقادیر خصوصیت animation-timing-function، در زیر 5 <div> با 5 مقدار مختلف آورده شده است:

/* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

مثال

همان مثال بالا، اما سرعت منحنی انیمیشن با استفاده از تابع cubic-bezier تعریف شده است:

/* W3C and Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)