ایجاد اشکال مختلف با 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 چیست؛ ۴ دلیل برای استفاده از آن
- با بهترین هاستینگ طراحان وب شمالغرب کشور آشنا شوید
- خلاقیت در تولید محتوا | جدیدترین متدهای افزایش خلاقیت محتوا ۲۰۲۳
- فروش مفتول گالوانیزه، سیم آرماتوربندی، سیم خاردار و فنس در فروشگاه اینترنتی حصارآنلاین
- تعمیر آنلاین ، مرکز تخصصی تعمیرات لوازم خانگی
- برد هوشمند چیست؟ + نحوه استفاده از وایت برد هوشمند
- راهنمای خرید عمده لوازم جانبی کامپیوتر
- افزایش سرعت سایت های شلوغ