کد انواع اشکال هندسی با CSS ( بخش اول )

با سلام خدمت کاربران گرامی یک لرن

در این پست با یک نوشته با عنوان کد انواع اشکال هندسی با CSS ( بخش اول ) در خدمت شما هستیم

برای همه ی برنامه نویسان تحت وب پیش آمده که بخواهند اشکال هندسی مانند مربع و دایره و … را طراحی کنند اما به خاطر عدم توانایی , به فتوشاپ روی آورده اند و میدانید که هر چقدر در پوسته خود از تصویر کمتری استفاده کنید ارزش پوسته شما بیشتر خواهد شد

در این قسمت از کد 5 شکل هندسی را برای شما آماده کرده ایم پس در ادامه همراه ما باشید …

کد انواع اشکال هندسی با CSS ( بخش اول )

1- کد ساخت مربع با CSS3

کد html :

<div id="square"></div>

کد CSS :

#square {
 width: 140px;
 height: 140px;
 background: blue;
}

2- کد ساخت دایره با CSS3

کد html :

<div id="circle"></div>

کد CSS :

#circle {
   width: 140px;
   height: 140px;
   background: blue;
   -moz-border-radius: 70px;
   -webkit-border-radius: 70px;
   border-radius: 70px;
}

3- کد ساخت مستطیل با CSS3

کد html :

<div id="rectangle"></div>

کد CSS :

#rectangle {
   width: 140px;
   height: 80px;
   background: blue;
}

4- کد ساخت بیضی با CSS3

کد html :

<div id="oval"></div>

کد CSS :

#oval {
   width: 200px;
   height: 100px;
   background: blue;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;
}

5- کد ساخت لوزی با CSS3

کد html :

<div id="diamond"></div>

 

کد CSS :

#diamond {
   width: 80px;
   height: 80px;
   background: blue;
   margin: 3px 0 0 30px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

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

فرادرس

برچسب ها : ، ، ، ، ، ، ، ، ، ، ، ،