ورود به سایت

لوگو آکادمی آی تی
info[at]academyit.net 026-34252294 09126492189

ایجاد اشکال با CSS

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

روش‌های مختلفی برای ایجاد شکل‌ها به‌وسیله CSS وجود دارد. پارامترهای گوناگونی که می‌توانند شما را در ساخت شکل دلخواه یاری کنند. مانند:

- Border-radius
- Border
- Transform
- Clip-path                    
- Box-shadow

 

  • Border-radius

با تنظیم این پارامتر شکل‌هایی مانند دایره یا بیضی به راحتی قابل ساخت هستند. Border Radius در اصل میزان خمیدگی یک گوشه را مشخص می‌سازد. این پارامتر می‌تواند مقداری بر اساس پیکسل یا درصد به خود بگیرد.
 

 

 

.circle{
	height: 250px;
	width: 250px;
	border-radius:50%;
	background-color:#29DBC7;
}


 

.oval{
	width: 250px;
	height: 150px;
	border-radius:50%;
	background-color:#C70E0E;
}

 

همان‌طور که گفته شد با این پارامتر می‌توانید میزان انحنای گوشه شکل‌ها را مشخص کنید. به مربع زیر دقت کنید:

.square{
	width: 200px;
	height: 200px;
	border-radius:20%;
	background-color:#A11ED3;
}

 

  • Border
با تنظیم مناسب این ویژگی که به خطوط 4 سمت شکل مربوط می‌شود، می‌توانید شکل‌های مختلفی مانند مثلث را به سادگی ایجاد کنید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.
 
 
#square{
	width: 0;
	height: 0;
	border-top:100px solid red;
	border-right:100px solid orange;
	border-bottom:100px solid green;
	border-left:100px solid blue;
}

 

 
رنگ‌های اختصاص داده شده به شما کمک می‌کنند تا قسمت‌های مختلف را به خوبی تشخیص دهید. حذف هر قسمت به وسیله transparent ، شکل‌ متفاوتی را به شما خواهد داد:
 
 
.KeepTopBottom{
	width: 0;
	height: 0;
	border-top:100px solid red;
	border-right:100px solid transparent;
	border-bottom:100px solid green;
	border-left:100px solid transparent;
}

 

 


 
.KeepRightLeft{
	width: 0;
	height: 0;
	border-top:100px solid transparent;
	border-right:100px solid orange;
	border-bottom:100px solid transparent;
	border-left:100px solid blue;
}

 


می‌توانید فقط یک مثلث را نگه دارید تا مثلا از آن به عنوان آیکون اشاره استفاده کنید:
 
.KeepRightLeft{
	width: 0;
	height: 0;
	border-top:100px solid transparent;
	border-right:100px solid orange;
	border-bottom:100px solid transparent;
	border-left:100px solid blue;
}

 


جالب است که با این روش حتی می‌توانید یک ذوزنقه رسم کنید!
 
 
.trapezium{
	width: 150px;
	height: 0;
	border-bottom:150px solid #7C0F0F;
	border-right:60px solid transparent;	
	border-left:60px solid transparent;	
}

 

  • Transform
اگر برای ایجاد شکل دلخواه خود نیاز به چرخاندن شکل دیگری داشتید، ویژگی transform با حالت rotate سودمند خواهد بود. مثلا با چرخاندن یک مربع، لوزی تشکیل می‌شود:
 
 
.diamond{
	width: 150px;
	height: 150px;
	background-color: #0AECD0;
	transform: rotate(45deg);
	margin-left:40px;
	margin-top: 40px;
}

 


حالت skew نوعی انحراف در شکل ایجاد می‌کند.
 
 
 
.parallelogram{
	width: 150px;
	height: 150px;
	transform: skew(30deg);
	background-color: #59078F;
	margin-left:40px;
}

 

  • Clip-path
با استفاده از این ویژگی به همراه سه تابع ()inset(), polygon و ()ellipse شکل‌های متنوع‌تری ساخته می‌شوند. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث 3 گوشه و در نتیجه سه ورودی نیاز است.
 
 
.marker{
	width: 400px;
	height: 150px;
	background-color:#F57709;
	background-size:cover;
	-webkit-clip-path: polygon(0% 20%,60% 20%,60% 0%,100% 50%,60% 100%,60% 80%,0% 80%);
}

 

 
.star{
	width: 250px;
	height: 250px;
	background-color:#A80F43;
	background-size:cover;
	-webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

 

برای مشاهده شکل‌های متنوع قابل ساخت و رهایی از محاسبه مقدار ورودی مناسب تابع‌های clip-path می‌توانید به سایت http://bennettfeely.com/clippy مراجعه کنید.
 
  • Box-shadow
همان‌طور که می‌دانید این ویژگی برای اضافه کردن سایه به شکل‌ها استفاده می‌شود. آیا تا به حال به استفاده از سایه شکل (box-shadow) برای ایجاد یک شکل فکر کرده‌اید؟
 
.moon{
	width: 250px;
	height: 250px;
	border-radius:50%;
	box-shadow: 45px 45px 0 0 #32172C;
}


همراه گرامی آکادمی آی تی
در این مقاله سعی کردیم تا چند ویژگی سودمند برای ایجاد شکل‌های دلخواه به‌وسیله CSS را به شما معرفی کنیم. تعداد شکل‌های قابل ساخت به‌وسیله CSS به قدری زیاد است که در یک مقاله نمی‌گنجد.



دانلود فایل pdf مقاله