آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 49) : آشنایی با Writing Mode - قسمت 2



visibility  
mode_comment   ۰

css3 attributes

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی writing-mode توضیحاتی رو بهتون دادیم و شما رو با مقادیر اونا آشنا کردیم. در این جلسه با ادامه موضوع در خدمت شما هستیم. تصویر زیر رو در نظر بگیرید:

فرض کنید که بخوایم رابط کاربری بالا رو کدنویسی کنیم. از چه روشی میتونیم استفاده کنیم تا عنوان Our Works رو مثل تصویر بالا، 90 درجه بچرخونیم؟ اگر بخوایم این کار رو با CSS عملی کنیم و از ویژگی writing-mode نیز استفاده نکنیم، باید مراحل زیر رو انجام بدیم:

کدهای HTML:

کدهای CSS:

  1. همونطور که دیدید برای المنت با class = wrapper از ویژگی position استفاده کردیم و اون رو برابر با relative قرار دادیم. با اینکار میتونیم المنتهای درونش رو نسبت به اون حرکت بدیم.
  2. موقعیت title مورد نظر رو absolute یا مطلق کردیم
  3. ویژگی transform-origin رو برای اون برابر با left top قرار دادیم تا زمانی که اون رو میچرخونیم نسبت به بالا و سمت چپ خودش چرخیده بشه و از مرکز به دور خودش نچرخه.
  4. با استفاده از transform: rotate(90deg) عنوان یا title رو 90 درجه بصورت ساعتگرد دور origin خودش چرخش دادیم.
  5. در نهایت برای اینکه فضای مناسبی برای عنوان رو در سمت چپ wrapper به وجود بیاریم، 70 پیکسل padding-left رو برای wrapper اضافه میکنیم.

همونطور که میبینید اینکار رو انجام دادیم ولی کدهای زیادی رو مورد استفاده قرار دادیم و خیلی جالب نیست. همه این کارها رو میتونیم به تنهایی با استفاده از کد زیر عملی کنیم و به نتیجه مورد نظرمون دست بیابیم:

بهمین راحتی. میبینید که جهت نوشتن رو عمودی یا vertical کردیم و اون رو left to right قرار دادیم. دموی زیر رو ببینید:

همونطور که دیدید دیگه نیازی به استفاده از transform و position و padding نیست و با یک خط کد تونستیم این کار رو عملی کنیم. حالا مثال دیگری رو با هم بررسی میکنیم.

تصویر زیر رو در نظر بگیرید:

همونطور که دیدید یک سری آیکون برای اشتراک در شبکه های اجتماعی در کنار متن قرار دادیم. ما به سادگی و با استفاده از CSS میتونیم رابط کاربری بالا رو به وجود بیاریم. اما زمانی که از writing-mode استفاده کنیم، میتونیم به راحتی این آیکونها رو بصورت عمودی ترازبندی کنیم و مثلا اونا رو در بالا و پایین و مرکز قرار بدیم. کد بالا بصورت زیر خواهد بود و میتونین دموی اون رو ببینید: همونطور که میبینید این آیکونها بصورت عمودی در سمت چپ قرار گرفتند. حالا که از ویژگی writing-mode برای عملی شدن این کار استفاده کردیم، میتونیم از ویژگی text-align نیز استفاده کنیم و آیکونها رو بصورت عمودی ترازبندی کنیم. برای مثال کد زیر رو در نظر بگیرید:

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

میبینید چقد آسون هست؟ حالا مثلا اگر بخوایم اونا در مرکز قرار بدیم، بصورت زیر عمل میکنیم:

با اینکار خروجی بصورت زیر میشه:

میبینید که آیکونها در مرکز قرار گرفتن. بهمین راحتی. برای مطالعه بیشتر میتونین این لینک و این لینک رو ببینید.

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

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

موفق باشید

یا علی

Source

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

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