آموزش ساخت اشکال مختلف با استفاده از css

چگونه از این کدها استفاده کنم ؟

برای نمایش هر یک از اشکال زیر به راحتی می توانید از کدهای زیر در قسمت <head> قالب و یا کدهای HTML سایت خود در کنار دیگر کدهای CSS سایت خود استفاده کنید و سپس در مکانی که دوست دارید آن شکل در سایت شما نمایش داده شود کافی است از کد زیر استفاده کنید.

1 <div id="name"></div>

توجه داشته باشید که بجای عبارت name در کد بالا باید از نام هر یک از اشکال زیر در کد HTML سایت خود استفاده کنید.

نمایش مربع و مستطیل با استفاده از CSS

ساده ترین شکلی که با استفاده از کدهای CSS می توانید تولید کنید شکل یک مربع و یا مستطیل در صفحات سایت شما است. در زیر کدهای CSS مربوط به ساخت یک چهار ضلعی را در صفحات وب مشاهده می*کنید.

1
2
3
4
5 #square {
width: 100px;
height: 100px;
background: #555;
}

تنها کافی است عرض ( width ) و طول ( height ) چهار ضلعی که می خواهید نمایش پیدا کند را در کد بالا وارد کنید.

نمایش دایره با استفاده از CSS

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

1
2
3
4
5
6
7
8
9 #circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}

توجه داشته باشید که کدهایی که در ابتدای آن ها از moz استفاده شده است برای نمایش این شکل در مرورگر فایرفاکس و کدهایی که در ابتدای آن ها از webkit استفاده شده است در حقیقت برای نمایش صحیح شکل در مرورگرهایی مانند گوگل کروم و … و کدی که در ابتدای آن o برای نمایش صحیح کد ها در مروگر اپرا ( Opera ) نوشته شده اند.

نمایش بیضی با استفاده از CSS

وقتی می خواهیم با استفاده از CSS در صفحات سایت خود یک بیضی رسم کنیم تمامی مراحل مانند زمانی است که می خواستیم شکل دایره را رسم کنیم با این تفاوت که عرض و یا طول شکل شما تغییر می کند و مقدار انحنای خط دور نیز باید تغییر بکند مانند کدهای زیر که مشاهده می کنید.

1
2
3
4
5
6
7
8 #oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

با تغییر اعداد انتساب داده شده در کد بالا می توانید بهتر با رسم شکل بیضی در طراحی های وب آشنا شوید.

نمایش شکل مثلث با استفاده از CSS

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

1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #555;
}

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

1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #555;
}

مثلث به سمت پایین

1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #555;
border-bottom: 50px solid transparent;
}

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

1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #555;
border-bottom: 50px solid transparent;
}

مثلث به سمت چپ

همانطور که می بینید نمایش یک مثلث توسط کدهای CSS بسیار آسان و البته جذاب است.

نمایش شکل متوازی الاضلاع با استفاده از CSS

شکل متوازی الاضلاع نیز به ما کمک می کند در این آموزش شما را با متد جدید Skew آشنا کنیم که از آن برای تعیین انحنای درخواستی خود در رسم اشکال استفاده کنید مانند کد زیر

1
2
3
4
5
6
7
8 #parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #666;
}

باز هم پیشنهاد می کنم برای اینکه بهتر با متد Skew آشنا شوید مقدار درجه ورودی متد Skew را در کدهای بالا تغییر دهید تا متوجه شوید که چگونه انحنا را می توانیم بر اساس محور x تعیین کنیم.

نمایش ذوزنقه با استفاده از CSS

باز هم برای نمایش دادن شکل بعدی یعنی ذوزنقه مانند شکل مثلث از تنظیم خصوصیات مربوط به خط دور اشکال به صورت زیر استفاده می کنیم.

1
2
3
4
5
6
7 #trapezoid {
border-bottom: 100px solid #666;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

رسم شکل ستاره با استفاده از CSS

با استفاده از کدهای زیر می توانیم یک ستاره ۶ پر را رسم کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #starsix {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #666;
position: relative;
}
#starsix:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #666;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

همانطور که می بینید با استفاده از after می توانیم تعیین کنیم که بعد از یک شی در صفحه وب ما چه چیزی می خواهیم نمایش داده شود و ما در کدهای بالا از این خاصیت برای رسم یک مثلث دیگر برعکس مثلث قبلی استفاده کرده ایم و با استفاده از position : relative توانسته ایم که این دو شکل را بر روی همدیگر نمایش دهیم که در نهایت شکل ستاره ۶ پر را می توانید در مرورگر وب هود مشاده کنید.

نمایش پنج ضلعی در صفحات وب با استفاده از CSS

حال برای نمایش یک پنج ضلعی معمولی در صفحات وب خود با استفاده از کدهای CSS زیر این کار را انجام می دهیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #555 transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #555;
}

در رسم این شکل نیز از before در کدهای CSS استفاده کرده ایم که دقیقاً برعکس after است.

نمایش یک قلب در صفحات وب با استفاده از CSS

یکی از دیگر اشکالی که ممکن است به آن در هنگام طراحی صفحات وب نیاز داشته باشید شکل قلب است که می توانید با رنگ های مختلف و تنها با نوشتن چند خط کد CSS در صفحات وب خود از آن استفاده کنید

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 #heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-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%;
}

البته برای تغییر اندازه نمایش این قلب می توانید با تغییر مقادیر در کدهای CSS بالا به راحتی شکل ظاهری و اندازه نمایش داده شده این قلب را تغییر دهید

نمایش حباب های گفتگو با استفاده از CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 #talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}