ایجاد اشکال مختلف با 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;
}
منبع: sitedesign-co.com
سایر مقالات مرتبط :
- چگونه تایمر کولر گازی را خاموش کنیم؟
- بررسی صرافی انلاین بدون نیاز به احراز هویت
- نکاتی برای خرید ایمیل شرکتی و ایرانی
- بهترین برندهای تلویزیون هوشمند کدامند؟
- اهمیت سیگنال رایگان ارز دیجیتال فیوچرز در ترید
- آشنایی با بهترین قالب های چند منظوره در وردپرس
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن
- با بهترین هاستینگ طراحان وب شمالغرب کشور آشنا شوید