آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 50) : آشنایی با Perspective و Position و Resize



visibility  
mode_comment   ۰

css3 attributes

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی Writing Mode در CSS توضیحاتی رو دادیم و با مثالهای ارائه شده، شما رو با اون آشنا کردیم. در این جلسه میخوایم در مورد ویژگی های متداول Position و Resize و Perspective بیشتر آشنا بشیم و مقادیر اونا رو دوره کنیم.

مقادیر درصدی یا Percentage:

همونطور که میدونین زیاد از مقادیر درصدی مثل width: 10%; استفاده میکنیم. با اینکار عرض المنتی که این ویژگی رو براش قرار دادیم، برابر با 10% عرض المنت پدر یا Parent خودش میشه. ویژگی های دیگه ای مانند Padding نیز هستند که میتونین اونا رو نسبت به المنت پدر خودشون مقداردهی کنید. اگر ما یک المنت داشته باشیم که عرض و ارتفاع اون به ترتیب 400 و 300 پیکسل باشه، زمانی که مقدار padding-top و padding-left رو برابر با 10% قرار میدیم، خروجی هر دو برابر با 40 پیکسل خواهد بود. یعنی ما ابتدا این ذهنیت رو داریم که padding-top برابر با 30 و padding-left برابر با 40 پیکسل بشن اما این اتفاق نمیوفته و هر دو نسبت به عرض 400 پیکسلی مقداردهی میشن.

ویژگی Perspective

با استفاده از ویژگی Perspective میتونین به یک المنت چشم انداز سه بعدی بدین (اگر از انتقالهای سه بعدی برای اون المنت استفاده کرده باشید). با استفاده از مقداری که برای این ویژگی قرار میدین، میتونین در جهت محور z (عمود بر صفحه) جابجا بشید و فاصله نقطه دیدتون بر روی المنت سه بعدی رو کم یا زیاد کنید. مقادیر رو میتونین با واحدهای px و em قرار بدین. اگر قصد دارید این ویژگی رو غیرفعال کنید، میتونین از مقدار none استفاده کنید.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

این ویژگی رو باید به پدر یا Parent اون المنتی که قصد داریم سه بعدی بشه، اعمال کنیم. مثلا دموی زیر رو در نظر بگیرید: همونطور که میبینید، برای المنت بالایی از perspective استفاده شده و بهمین دلیل ظاهر سه بعدی و زیبایی داره اما برای المنت پایین از این ویژگی استفاده نشده و زمانی که بر روی اون هاور میشه، ظاهر جالبی نداره. برای مطالعه بیشتر میتونین این لینک رو مطالعه کنید.

ویژگی Position

به احتمال زیاد شما با ویژگی Position و مقادیر متداول اون خیلی زیاد کار کردید و با اون آشنایی دارید. مقادیری که بیشتر برای این ویژگی استفاده میشه relative و absolute و fixed و static است. اما یک مقدار کمتر شناخته شده برای این ویژگی بنام sticky وجود داره که خیلی بدرد میخوره.

اگر برای یک المنت Position: sticky قرار بدیم، موقعیت اون المنت در ابتدا و در حالت عادی relative میشه و زمانی که به نقطه یا موقعیت خاصی برسه، تبدیل به fixed خواهد شد و ثابت سر جای خودش می ایسته. برای مثال منویی رو در نظر بگیرید که در ابتدا fix نیست و زمانی که مقداری به سمت پایین اسکرول میکنیم، بصورت fix یا ثابت در میاد. این کار بصورت عادی با استفاده از javascript انجام میشه اما به سادگی میتونیم از این ویژگی استفاده کنیم و دیگه از Javascript بی نیاز بشیم. برای مثال دموی زیر رو ببینید:

میبینید که المنت از موقعیت خاصی به بعد ثابت میشه. برای مطالعه بیشتر میتونین این لینک رو ببینید.

ویژگی Resize

با استفاده از این ویژگی میتونین مشخص کنید که المنت مورد نظر میتونه توسط کاربر تغییر اندازه داده بشه یا خیر. شما میتونین قابلیت تغییر اندازه یک المنت رو بصورت افقی یا عمودی یا هر دو فعال کنید. این ویژگی مقادیر زیر رو قبول میکنه:

  • none : در این حالت المنت قابلیت تغییر اندازه ندارد. بجز المنت textarea که مقدار پیش فرض اون both است، مقدار پیش فرض بقیه المنتها none می باشد.
  • both : المنت در دو جهت افقی و عمودی قابلیت تغییر اندازه دارد
  • vertical : المنت در جهت عمودی قابلیت تغییر اندازه دارد
  • horizontal : المنت در جهت افقی قابلیت تغییر اندازه دارد

برای مطالعه بیشتر و دیدن مثالهای این ویژگی میتونین این لینک رو ببینید.

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

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

موفق باشید

یا علی

Source

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

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