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


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

حتماً به اين موضوع واقف هستيد که امروزه طراحان وب سايت‌هاي حرفه اي و بزرگ ميل به کاهش استفاده از تصاوير در طراحي‌ هايشان دارند. از اين جهت همگي مشغول سعي در استفاده از CSS کدها جهت ترسيم اشکال و يا آيکن هايشان هستند. در اين مقاله کوتاه به ايجاد چند تصوير هندسي با CSS ميپردازيم:
1. مربع و مستطيل
ساخت مربع با سي اس اس جزو آسان ترين اشکال هندسي است. شما تنها بايد يک div در صفحه html خود ساخته و با کمک CSS به آن رنگ بکگراند بدهيد اما بايد به خاطر داشت که حتماً width و height مان به يک اندازه تنظيم شوند تا مربع ما شکل بگيرد. اما براي ساخت مستطيل ميتوانيم طول و عرض را متفاوت تنظيم کنيم.

چگونه با CSS شکل هندسي درست کنيم

چگونه با CSS شکل هندسي درست کنيم

 

 

 

 

2. دايره
ساخت دايره در سي اس اس هم همانند مربع است با اين تفاوت که به آن يک border-radius 50% اضافه ميکنيم.

ساختن دايره در سي اس اس


 

 

3. مثلث
در ايجاد مثلث با CSS حتماً بايد طول و عرض را 0 قرار داده سپس border-bottom ، border-top  را transparent  کرده و به مقدار دلخواه تنظيم کنيد (قطعاً هر دو عدد ميبايست با هم برابر باشند) و در ادامه border-left را هم به همان مقدار ساير بردرها تنظيم کرده با اين تفاوت که به آن رنگ ميدهيد.

ساختن مثلث در css

 

 

 

 

جهت مشاهده نمونه زنده اين 4 شکل هندسي ميتوانيد به اين لينک آموزش زنده CSS مراجعه کنيد.

ثبت نظر در مورد مقاله چگونه با CSS شکل هندسی درست کنیم
نام شما:
ایمیل:
آدرس سایت یا وبلاگ: به همراه ://http آورده شود
نظر شما:
امتیاز شما :
کد امنیتی:
عدد بالا :
نظرات شما در مورد چگونه با CSS شکل هندسی درست کنیم
مرجان26 1395/05/16
سلام چقدر جالب بود،با CSS بتونیم شکل هندسی درست کنیم مرسی از آی تی بازار به خاطر مقاله های خوبش مطلب خوب و مفیدی بود بسیار استفاده کردیم،اگر هم کمی بیشتر در این حوزه تلاش کنیم یتونیم شکل های خوبی رو طراحی کنیم و برای شکل دادان هرچه بهتر و زیباتر به سایتمون کمک کنیم واقعا ممنون.
علیرضا 1395/05/16
css یک ابز برنامه های مورد علاقه امروزه طراحان سایت است و همگی به دنبال کارایی کامل این کد هستند برای همین نیاز به طراحی هندسی با این کد به وجود می آید . همانطور که در ای تی بازار در این مقاله به خوبی چونگی ساخت مربع ، مستطیل و مثلث آمد می توانیم از این کد ها به طور مستقیم استفاده کنیم. و از این مقاله ای تی بازار ممنونم که کار رو برای من راحت تر کرد و دیگه نیازی برای ساخت اشکال هندسی نداریم.
احمد 1395/05/16
سلام،چقدر کار خوبی کردید که نحوه کشیدن اشکال هندسی مثل مربع و مثلث رو با CSS توضیح دادید،مطلب خیلی جالبی بود ممنونم ازتون،کاش مطالب بیشتری هم میگفتید،مقاله خوبی بود،البته روش ها و فرمول های زیادی هم برای این کار وجود داره که به نظر من شما به بهترین نوع اون اشاره کردید.
محمد 1395/05/15
سلام،امروزه افرادی که کار طراحی وب سایت رو به صورت حرفه ای دنبال میکنن،دوست دارند که از تصاویر کمتری در طراحی هایشان استفاده کنند،به خاطر همین هم همگی قصد دارند از CSS کدها برای ترسیم اشکال و آیکون های سایت استفاده کنند،مثلا ساخت مرع و مستطیل و مثلث و ... که در سایت خوب آی تی بازار هم نحوه طراحی این چند نمونه در بخش مقالات قرار دادید که واقعا ازتون ممنونم.با تشکر فراوان.
فرهاد 1393/03/14
ممنون واسه کسی مثل من که از برنامه نویسی چیزی نمیدونه خیلی جالب بود و مشتاقم کرد برای یادگیری بیشتر.
موسوی 1393/02/13
خیلی عالی بود دقیقاً دنبال همین بودم
مشاهده شده توسطcustomers on 06-Aug-2016 رتبه:

تمامی حقوق سایت آی تی بازار ، نزد موسسه سروش ارتباطات محفوظ است، کپی برداری به هر نحو از محتوای سايت طبق شرع و قانون مجاز نمی باشد و بر اساس ماده 12 قانون جرايم رايانه ای پيگرد قانونی دارد.
Copyright 2005-2016, Itbazar.com