ساخت اشکال مختلف و پیچیده با استفاده از CSS خالص



visibility  
mode_comment   ۰

در این مطلب یاد میگیریم که چطور با استفاده از CSS اشکال مختلف رو به وجود بیاریم و کارهایی که قبلا به نظرمون غیر ممکن بوده رو ممکن کنیم!

CSS توانایی این رو داره که هر نوع شکلی رو به وجود بیاره. مربع و مستطیل آسون‌ترین اشکالی هستند که با استفاده از CSS میتونین اونا رو بسازید چون این موارد اشکال طبیعی در وب هستند و بصورت پیش فرض وجود دارند. شما به راحتی با مشخص کردن width و height میتونین مستطیل مدنظرتون رو به وجود بیارید.

با استفاده از ویژگی border-radius میتونین گوشه‌های اشکال رو گرد کنید و با اینکار میتونین مستطیل یا مربع رو هم به راحتی به بیضی یا دایره تبدیل کنید. در این مطلب ما زیاد از قدرت المنتهای کاذب ::before و ::after استفاده میکنیم. با استفاده از این المنتهای کاذب میتونین 1 یا 2 المنت دیگه رو به شکل خودمون اضافه کنیم و اشکال پیچیده‌تری رو به وجود بیاریم.

با استفاده از همین تکنیکها و چند ترفند دیگر شما میتونین اشکال پیچیده‌ای رو تنها با استفاده از یک المنت HTML به وجود بیارید. خب حالا میریم سراغ اشکال و از مربع شروع میکنیم:

مربع:

میبینید که طول و ارتفاع یکی هستند و به همین خاطر مربع درست میشه.

مستطیل:

در این حالت طول بیشتر از ارتفاع است.

دایره:

زمانی که برای یک مربع، ویژگی border-radius رو برابر با 50 درصد قرار بدین، دایره به وجود میاد.

بیضی:

میبینید که برای border-radius دو مقدار مختلف قرار دادیم و اونا رو با / جدا کردیم. با اینکار مقدار گرد کردن افقی و عمودی رو مشخص کردیم.

مثلث به سمت بالا:

میبینید با استفاده از border این مثلث رو به وجود آوردیم.

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

مثلث رو به پایین:

فلش منحنی دنباله‌دار:

ذوزنقه:

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

ستاره 5 پر:

پنتاگون یا 5 ضلعی:

شش ضلعی:

هشت ضلعی:

قلب:

شکل بینهایت یا infinity:

لوزی مربع:

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

لوزی بریده شده:

تخم مرغ:

میبینید که اینکار رو با استفاده از border-radius انجام دادیم.

شکل Pac-Man:

Talk bubble:

Yin young:

نوار نشان یا Badge ribbon:

Space Invader یا مهاجم فضایی:

میبینید که این شکل جالب و پیچیده رو با استفاده از box-shadow به وجود آوردیم.

ذره‌بین:

آیکون Facebook:

ماه:

شکل مخروطی:

شکل قفل:

میبینید که با استفاده از CSS میتونین اشکال مختلف و پیچیده‌ای رو به وجود بیارید.

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

اگر شما هم روش ساخت شکلی با استفاده از CSS رو بلد هستید خوشحال میشم در بخش نظرات با من و دیگر کاربرهای سون لرن به اشتراک بزارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.