0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

رسم اشکال در CSS

نویسنده پشتیبانی وب یار
امتیاز مطلب
Rate this post
تعداد بازدید 1692
تاریخ بروزرسانی ۳۰ فروردین ۱۴۰۱

اشکال در CSS

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

با CSS  می توانید انواع اشکال مربع و مستطیل را ترسیم کنید، ترسیم این اشکال ساده است زیرا آنها اشکال طبیعی در بستر وب هستند. فقط کافی است تا عرض و ارتفاع را اضافه کنید و در نهایت به اندازه دقیق مستطیل مورد نیاز خود خواهید رسید. در گام بعدی می توانید شعاع حاشیه را اضافه کنید و شکل دایره مانند ایجاد کنید.
همچنین شبه عناصر ::before و ::after را در CSSداریم که امکان ایجاد دو شکل دیگر را می دهد که می توانیم به عنصر اصلی اضافه کنیم. با هوشمند شدن در موقعیت‌یابی، تبدیل و بسیاری از ترفندهای دیگر، می‌توانیم اشکال زیادی را در CSS تنها با یک عنصر HTML بسازیم.
رسم اشکال در css

آموزش رسم اشکال در css

 

روش های رسم اشکال در CSS

برای رسم اشکال در CSS روش های مختلفی وجود دارد. اکثر پارامترهایی که در ساخت اشکال CSS مورد استفاده قرار می گیرند، به شرح زیل می باشد:

  • – Border-radius
  • – Border
  • – Transform
  • – Clip-path
  • – Box-shadow

در ادامه هر کدام را با ذکر مثال توضیح می دهیم.

 

Border-radius

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

 

دایره

 

Border

با استفاده از این ویژگی می توانید خط باریکی در اطراف شکل ایجاد نمایید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.

 

مثلث رو  به بالا

به این ترتیب با تغییر border ها می توانید مثلث رو به پایین ، رو به راست و رو به چپ ایجاد نمایید.

 

ذوزنقه

 

رسم شش ضلعی

این شکل با استفاده از خصوصیت Content در CSS ایجاد شده است. اگر با این ویژگی  Content در CSS آشنایی ندارید، این آموزش ها را در سایت وب یار دنبال نمایید. در ادامه با مثال های دیگر از Content آشنا می شوید.

 

Transform

اگر می خواهید برای اشکال در CSS چرخش ایجاد نمایید، ویژگی transform با حالت rotate سودمند خواهد بود. مثلا با چرخاندن یک مربع، لوزی ایجاد می گردد.

یعنی:

 

متوازی الاضلاع

 

نوار نشان

رسم اشکال در css

 

رسم قلب در سی اس اس 

 

اشکال در CSS و رسم بی نهایت

 

ذره بین ( علامت جستجو )

 

Clip-path

ویژگی clip-path به همراه سه تابع ()inset(), polygon و ()ellipse شکل‌های متنوع‌تری طراحی می‌شود. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث ، 3 گوشه و سه ورودی نیاز است.

 

ستاره

 

Box-shadow

ویژگی box-shadow برای اضافه کردن سایه به اشکال در CSS استفاده می‌شود.

 

اشکال در CSS و هلال ماه

 

مهاجم فضایی

رسم شکل در css

 

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

 

Rate this post
مطالب مرتبط
دیدگاه ها

دیدگاهتان را بنویسید

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