آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 52) : ویژگی های با قابلیت انیمیشنی شدن و ویژگی table-layout



visibility  
mode_comment   ۰

css3 attributes

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی white-space و امکانات اون توضیحاتی رو قرار دادیم و شما رو با استفاده از مثال با اون آشنا کردیم. در این جلسه در ابتدا در مورد ویژگی هایی که میتونین اونا رو بصورت انیمیشنی در بیارید، توضیحاتی رو قرار میدیم و بعد از اون سراغ ویژگی table-layout میریم و با استفاده از اون نحوه رسم شدن و قالب بندی ردیف و ستونهای جداول رو مشخص میکنیم.

ویژگی های Animatable در CSS

همونطور که میدونین در همه پروژه ها از انیمیشنها استفاده میشه و با استفاده از اونا افکتهای جالب و زیبایی رو به وجود میاریم. بیشتر مواقع ما انیمیشنها رو بر روی ویژگی های opacity یا background-color یا top و ... اعمال میکنیم. شاید این ذهنیت رو داشته باشید که فقط میتونیم به همین چند ویژگی حالت انیمیشنی رو نسبت بدیم. اگر شما هم جزء اون دسته از افرادی هستید که این ذهنیت رو دارند، باید بهتون بگم که دارید اشتباه فکر میکنید. شما میتونین در اینجا لیست تمامی ویژگی های CSS که میتونیم اونا رو بصورت انیمیشنی در بیاریم رو ببینید. همونطور که در این صفحه مشاهده میکنید، ویژگی های بسیار زیادی هستند که میتونیم اونا رو بصورت انیمیشنی در بیاریم و به اونا روح و زندگی ببخشیم. مثلا میتونیم ویژگی letter-spacing رو بصورت انیمیشنی در بیاریم و افکت زیبایی برای متن درست کنیم. دموی زیر رو ببینید:

همونطور که میبینید در هر تکرار انیمیشن، با استفاده از ویژگی letter-spacing فاصله بین حروف متن رو در مدت زمان 5 ثانیه از 20 پیکسل به صفر میرسونیم. با اینکار یک افکت زیبا به وجود میاد.

اگر میخواید حالت انیمیشنی شده همه ویژگی های ذکر شده رو ببینید، میتونین به این لینک مراجعه کنید. در این لینک در مقابل هر ویژگی یک لینک قرار داده شده که نمونه ای از حالت انیمیشنی شده اون رو قرار داده و میتونین اون رو مشاهده کنید.

مثلا اگر بخوایم یک مثال برای ویژگی perspective بصورت انیمیشنی شده رو ببینیم، بر روی لینک مقابل اون که در تصویر بالا مشخص کردیم کلیک میکنیم.

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

میبینید که در این صفحه، ویژگی های مختلف بصورت انیمیشنی در اومدن و میتونین از اونا ایده بگیرید.

ویژگی table-layout

با استفاده از ویژگی table-layout میتونین الگوریتمی که مرورگر برای قالب بندی ردیف، ستون و سلولهای جداول استفاده میکنه رو مشخص کنید. این ویژگی میتونه برای همه جداول یا تگهای table در HTML مورد استفاده قرار بگیره. اگر برای المنتهای دیگر نیز display: table یا display: table-inline قرار بدین نیز میتونین از ویژگی table-layout براشون استفاده کنید.

مقادیر موجود:

  • auto (مقدار پیش فرض) : مرورگر بصورت اتوماتیک از الگوریتم خودش استفاده میکنه و با توجه به محتوای درون سلولها، ردیف و ستون و ... رو قالب بندی میکنه. پس نتیجه خروجی به محتوایی که درون جدول قرار داده شده است، وابسته است.
  • fixed : زمانی که از این مقدار استفاده میکنید، دیگه مرورگر کاری به محتوای درون جداول ندارد و در عوض به عرض جدول، عرض ستونها، border و مقدار Cell spacing توجه میکنه و با توجه به اونا جدول رو رسم و قالب بندی میکنه. اون عرضی که برای سلولها و ستونهای ردیف اول در نظر میگیرید برای کل جدول در نظر گرفته میشه.

برای اینکه تاثیر مقدار fixed رو متوجه بشید، باید مقدار عرض یا width مربوط به کل جدول رو چیزی بجز auto قرار بدین (auto مقدار پیش فرض برای ویژگی width می باشد). در مثالهای زیر همه جداول عرض برابر با 100% دارند تا کل عرض مربوط به المنت Parent رو اشغال کنند. همونطور که میبینید در ابتدا مقدار ویژگی table-layout برابر با auto و بصورت پیش فرض است و جدول با توجه به متن درونش قالب بندی شده است. چون متن در یکی از سلولهای ستون اول بیشتر از بقیه ستونها است، پس عرض اون ستون نیز از بقیه بیشتر است. اما اگر بر روی دکمه Toggle در دموی بالا کلیک کنید، مقدار fixed برابر table-layout قرار داده میشه و دیگه محتوا تاثیری نداره و همه ستونها به یک اندازه نمایش داده میشن.

زمانی که از مقدار fixed استفاده میکنیم، علاوه بر اینکه جداول رو منظم تر نمایش میدیم، Performance یا عملکرد سایتمون رو بالاتر میبریم و مرورگر دیگه برای رسم جداول محاسبات خاصی رو انجام نمیده و سریعا جدول رو رسم میکنه. برای مطالعه بیشتر در این زمینه میتونین این لینک رو ببینید.

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.