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

ساخت 20 شکل هندسی جالب فقط با CSS – قسمت اول

ساخت 20 شکل هندسی جالب فقط با CSS

امروزه زبان CSS علارغم ظاهر ساده کاریی بالایی را در اختیار طراحان وب میگذارد.

مقدمه

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

در این مقاله ابتدا از اشکال ساده مانند مربع و مستطیل شروع میکنیم و به اشکال سخت تر میرسیم با ما همراه باشید…

 

شروع با HTML

ابتدا یک باید در صفحه html یک <div> درست کنیم تا تغیرات رو روی اون اعمال کنیم برای مثال ما یک از یک div با کلاس shape استفاده میکنیم

قسمت دوم

<div class="shape ">

test

</div>

 

در قسمت style  ها ما باید به این صورت عمل کنیم:

 

مربع ( همانطور که میبینید ما تنها با استفاد از یک طوول و عرض یکسان میتونیم یک مربع ایجاد کنیم)

.shape {
width:100px;
height:100px;
background:black;
}

 

مستطیل (در این قسمت هم مثل قبل عمل میکنیم و فقط کافیه اندازه های مختلف بدیم به div  موردن نظرمون)

.shape {
width:200px;
height:100px;
background:black;
}

 

دایره( برای ساخت دایره یکم موضوع فرق میکنه ما علاوه بر این که اندازه های یکاسنی باید بدین باید از خصوصیت border-radius به شکل زیر استفاده کنیم)

.shape {
width:100px;
height:100px;
border-radius: 50%;
background:black;

                 }

 

بیضی (برای ساخت بیضی هم باید به به صورت دایره عمل کنیم اما مقدار خصوصیت border-radius هر چه قدر بیشتر از 50% باشد قسمت مورد نظر ما بیشتر بیضی میشود)

.shape {
width:200px;
height:100px;
border-radius: 70%;
background:black;
                           }

 

مثلث (در مثلث  و کلا در اشیاء دیگر داستان کمی فرق میکیند ما اندازه هارا برابر 0 گذاشتیم در عوض از خصوصیت ها border-left و  border-right  همچینین  border-bottom  استفاده کریم و و اندازه های مورد نظمون رو به اون دادیم با تغیر اندازه ها در هر کدوم از سه خصوصیت متونید انواع مثلث بسازید

.shape {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
                border-bottom:100px solid #888888;
               }

 

متساوی الاضلاع( دقت کنیم که سه خصوصیت س که اول انها با – شروع میشود در واقع عملکرد یکسانی دارند اما دلیل تفاوت ان ها پشتیبانی مرورگر ها از انهاست. شما میتوانیت با تغیر اندازه انها شکل خود را تغیر دهید)

.shape {
width:150px;
height:100px;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
 -o-transform:skew(20deg);
background:black;
                   }

 

لوزی(در لوزی کمی متفاوت عمل میکینم. خصوصیت های یادی وجود دارن که باید توضیح بدم که در جلسات اموزش css به شرح همه اونها میپردازم در حال حاظر فقط کد ها اون رو برای شما میزارم )

 .shape {
width:0;
height:0;
border:50px solid transparent;
border-bottom:70px solid black;
position:relative;
top:-50px;
                }
.shape:after {
content:'';
position:absolute;
left:-50px;
top:70px;
width:0;
height:0;
border:50px solid transparent;
border-top:70px solid black;
               }

پایان قسمت اول اشکال هندسی

مربوط به اشکال هندسی در css

صفحه اول سایت

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *