Home آموزش طراحی سایت آموزش جیکوئری ایجاد شکل مثلثی با استفاده از CSS

ایجاد شکل مثلثی با استفاده از CSS

1
10
42

ایجاد شکل مثلثی با استفاده از CSS

سلام به همه خوانندگان عزیز ویکی وردپرس

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

بعضی از برنامه نویسا با استفاده از یه سری خواص که تو CSS وجود داره اومدن اشکالی رو ایجاد کردن و حتی گاهی اوقات نقاشی های ساده ای رو با استفاده از CSS خالص کشیدن.

یکی از پرکاربردترین این اشکال که تقریبا تو هر سایتی استفاده میشه مثلث ها هستن.

قدم اول : مشاهده دمو اشکال مثلثی css

مثل پست های قبلیم دوس دارم قبل از توضیحات بیشتر اول دموی کارو با هم ببینیم (با کلیک روی دکمه های Html،Css،Js میتونید کدهای مربوط به هر قسمت رو مشاهده کنید).

See the Pen css shapes by abbas (@AbbasH90) on CodePen.


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

قدم دوم : آموزش ساخت اشکال css

خب بریم سراغ توضیحات.

توی CSS میتونیم به هر المانی که بخوایم border بدیم. اون المان میتونه خالی باشه و هیچی داخلش نباشه. اینجا هم از همین تکنیک استفاده کردیم. به هر المان یه border میدیم. اما برای ساختن مثلث باید بدونیم که المان ها چجوری border میگیرن!

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

توی این شکل یک المان خالی رو میبینیم که border های چهار طرفش با ضخامت خیلی زیاد و با رنگ های مختلف نمایش داده شدن. حالا فرض کنید که border های زرد و قرمز و آبی رو کاملا شفاف کنیم. یعنی فقط border سبز باقی بمونه. حالا متوجه شدید چطوری میشه مثلث ساخت ؟؟

برای خلوت تر شدن کار ما وقتی میخوایم یه مثلث بسازیم، border مقابل رو کامل حذف میکنیم و border های طرفینش رو شفاف میکنیم. برای مثال اگه بخوایم قسمت سبز رنگ تصویر بالا رو نگه داریم، قسمت قرمز رو کاملا حذف میکنیم و قسمت های زرد و آبی رو کاملا شفاف میکنیم. در واقع برای ساخت مثلث سبز رنگ از این کد استفاده میکنیم:

توی کد بالا ابتدا میایم هر چهار border رو به اندازه 50 پیکسل و کاملا شفاف قرار میدیم. بعد میایم border بالایی رو کاملا حذف میکنیم و در نهایت به border پایینی رنگ میدیم که دیده بشه.

خب فکر میکنم مثلث هارو کامل متوجه شدید. اما در مورد اون دایره چطور ؟

برای ایجاد اون دایره ابتدا اومدیم یه باکس ایجاد کردیم با طول و عرض 50 پیکسل و با border های رنگی 25 پیکسلی. بعد بهش border-radius دادیم. به همین سادگی!

اما در مورد چرخیدن دایره وقتی روش hover میشه هم یه توضیحی بدیم به عنوان اشانتیون 🙂

این کارو با جاوا اسکریپت انجام دادیم و برای این کار از تایع setInterval استفاده کردیم. این تابع یه فانکشن و یه عدد به عنوان مدت زمان میگیره و در فواصل زمانی معادل اون عدد میاد اون فانکشن رو اجرا میکنه. مثلا در مورد این مثال من بهش گفتم که بیا هر 1 میلی ثانیه اون span رو که باهاش دایره ساختیم 2 درجه بچرخون. اگر هم موس از روی دایره رفت کنار، یعنی از حالت hover خارج شد، اون تابع setInterval رو غیرفعال کن. به همین سادگی!

در کنار این تابع، برای اینکه بهتر متوجه ساخته شدن دایره بشید از یه انیمیشن هم استفاده کردیم که هر 2 ثانیه یک بار border-radius رو بین 0 و 50% جابجا میکنه. برای کل این کارها از کد جاوا اسکریپت زیر استفاده شده:

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

سوالاتتون رو در قسمت نظرات بپرسید حتما پاسخ میدم.

تا پست بعدی مراقب خودتون باشید 🙂

یک نظر ارسال شده

  1. ممد

    ژانویه 12, 2017 در 6:42 ب.ظ

    عالی بود . لطفا طرز ساخت مکعب هم توضيح بدید😏

    نقل قول

ارسال نظر

ایمیل شما منتشر نمیشودفیلد های ستاره دار اجباری هستند *