آموزش Css و برنامه نوسی وب

انجمن برنامه نویسی آموزش CSS

ایجاد اشکال مختلف با Css

ایجاد اشکال مختلف با Css

در این قسمت از آموزش Css می‌خواهیم روش‌هایی را توضیح دهیم که به وسیله‌ی آن بتوانید از اشکالی که می‌خواهید استفاده کنید.

با یادگیری این موارد می‌توانید در طراحی سایت خوب یکی از بهترین‌ها باشید زیرا ایجاد شکل در طراحی بسیار مهم و برای کاربر جالب می‌باشد. در ابتدا از اشکال ساده‌ای مثل مربع و مستطیل استفاده می‌کنیم. دستور زیر شکل کلی رسم مربع یا مستطیل را نمایش می‌دهد. دقت شود که هر نامی را میتوان در بخش id در نظر گرفت اما برای مفهومی‌تر بودن بهتر است اسمهای با معنی را در نظر بگیرید. توجه داشته باشید که عرض را با width و طول را با height نمایش می‌دهیم و رنگ لازم را مشخص می‌کنیم .

#square {
width: 100px;
height: 100px;
background: #555;
}

همچنین برای رسم دایره از border-radius برای تبدیل گوشه‌های تیز مربع یا مستطیل به صورت گرد استفاده می‌کنیم و دستور کلی آن به این شکل می‌باشد .

#circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}

دقت شود که در کدهای قالب از کد <div id="square"></div> استفاده شود و در بقیه موارد نیز همچنین.(-moz- برای نمایش صحیح کد در فایرفاکس، -webkit- برای نمایش صحیح در کروم، -o- نمایش صحیح در اپرا )

از آنجاییکه رسم بیضی مانند رسم دایره می‌باشد و فقط طول و عرض آن را تغییر می‌دهیم. مانند دستور زیر:

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

برای نمایش شکل قلب نیز از دستور زیر استفاده می‌شود.

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

همچنین در پایان نمایش کادرهای گفتگو در سایت می‌توان از دستور زیر استفاده کرد:

#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;
}

همچنین می‌توان برای رسم مثلث از دستور زیر استفاده کرد:

.triangle{
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

Print

نظرات بسته شده است.

x
دی ان ان