ساخت اشکال مختلف هندسی در CSS

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

برای مشاهده متن کامل ساخت اشکال مختلف هندسی در CSS ، به ادامه ی مطلب مراجعه فرمائید

ساخت اشکال مختلف هندسی در CSS

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

برای شروع یک صفحه ی اچ تی ام ال(HTML) ایجاد کرده و تمام تگ های دایو(Div) برای اشکال هندسی را در آن وارد می کنیم و به آنها کلاس مورد نیاز را می دهیم(کلاس ها عبارتند از:مربع square،مستطیل rectangle،مثلث triangle،بیضی oval،قلب heart،نیم دایره halfcircle،لوزی diamond،)به شیوه ی زیر:

<div class=”square”></div>

<div class=”rectangle”></div>

<div class=”triangle”></div>

<div class=”oval”></div>

<div class=”heart”></div>

<div class=”halfcircle”></div>

<div class=”diamond”></div>

سپس در بین دو تگ استایل(style) کد های سی اس اس CSS را به به ترتیب از کلاس مربع تا کلاس لوزی وارد می کنیم:

(کد های سی اس اس CSSمخصوص قلب پیچیده تر وسخت تر نسبت به دیگر استایل ها و کد هاست به همین علت برای آسان تر شدن کار شما آن را از دیگر استایل ها جدا می کنیم)

.square{

width:100px;

height:100px;

background:red;

}

.rectangle{

width:100px;

height:60px;

background:blue;

}

.triangle{

width:0;

height:0;

border-bottom:100px solid green;

border-left:50px solid transparent;

border-right:50px solid transparent;

}

.oval{

height:50px;

width:150px;

border-radius: 95px / 30px;

-moz-border-radius:95px / 30px;

-webkit-border-radius: 95px / 30px;

background:orange;

}

.halfCircle{

height:45px;

width:90px;

border-radius: 90px 90px 0 0;

-moz-border-radius: 90px 90px 0 0;

-webkit-border-radius: 90px 90px 0 0;

background:gray;

}

.diamond{

width:100px;

height:100px;

background:black;

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%;

}

در نهایت برای ساخت قلب استایل های زیر را وارد می کنیم:

.heart{

position: relative;

width: 100px;

height: 90px;

}

.heart:before, .heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: yellowgreen;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-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%;

}

.heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

جهت دریافت اطلاعات تکمیلی به W3 و Wikipedia نیز میتوانید مراجعه نمایید