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

ساخت شکل با css

اشکال در CSS

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

1 0 نظر

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

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


کار با Border-radius:

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

 

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

 

کار با border-radius

 

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


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

:به مربع زیر دقت کنید

 

میزان انحنای گوشه شکل‌ها

 

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

 


کار با Borderها:

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

 

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


با تنظیم مناسب این ویژگی که به خطوط 4 سمت شکل مربوط می‌شود، می‌توانید شکل‌های مختلفی مانند مثلث را به سادگی ایجاد کنید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.

 

طراحی شکل با borderها

 

رنگ‌های اختصاص داده شده به شما کمک می‌کنند تا قسمت‌های مختلف را به خوبی تشخیص دهید. حذف هر قسمت به وسیله transparent، شکل‌ متفاوتی را به شما خواهد داد:

 

 حذف قسمت ها به وسیله transparent

 

حذف قسمت ها به وسیله transparent

 

می‌توانید فقط یک مثلث را نگه دارید تا مثلا از آن به عنوان آیکون اشاره استفاده کنید:

 

حذف قسمت ها به وسیله transparent

 

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

 

حذف قسمت ها به وسیله transparent

 

trapezium{ width: 150px; height: 0; border-bottom:150px solid #7C0F0F; border-right:60px solid transparent;
 border-left:60px solid transparent; }

 


کار با Transform:

diamond{ width: 150px; height: 150px; background-color: #0AECD0; transform: rotate(45deg); margin-left:40px; 
margin-top: 40px;}


اگر برای ایجاد شکل دلخواه خود نیاز به چرخاندن شکل دیگری داشتید، ویژگی transform با حالت rotate سودمند خواهد بود مثلا با چرخاندن یک مربع، لوزی تشکیل می‌شود:

 

کار با Transform

 

حالت skew نوعی انحراف در شکل ایجاد می‌کند.

 

کار با Transform و حالت skew

 

parallelogram{ width: 150px; height: 150px; transform: skew(30deg); background-color: #59078F; margin-left:40px; }


کار با Clip-path:
 

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


با استفاده از این ویژگی به همراه سه تابع ()inset(), polygon و ()ellipse اشکال متنوع‌تری با سی اس اس ساخته می‌شوند. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث 3 گوشه و در نتیجه سه ورودی نیاز است.

 

کار با Clip-path در css

کار با Clip-path در css

 

برای مشاهده شکل‌های متنوع قابل ساخت و رهایی از محاسبه مقدار ورودی مناسب تابع‌های clip-path می‌توانید به سایت bennettfeely مراجعه کنید.

 

کار با Box-shadow:
 

moon{ width: 250px; height: 250px; border-radius:50%; box-shadow: 45px 45px 0 0 #32172C; }


همراه گرامی آکادمی آی تی


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

همان‌طور که می‌دانید این ویژگی برای اضافه کردن سایه به شکل‌ها استفاده می‌شود. آیا تا به حال به استفاده از سایه شکل (box-shadow) برای ایجاد یک شکل فکر کرده‌اید؟

 

کار با Box-shadow در css

 

 

امیدوارم مواردی که توی این مقاله مورد بررسی قرار دادیم تونسته باشه به شما دوست عزیزم کمک کنه که در طراحی وب سایت یک قدم جلوتر برید و کارهایی بهتر و حرفه ای تری رو انجام بدید و اما اگر شما دوست عزیز مشتاق یادگیری طراحی سایت هستید و در این رابطه نیاز به آموزش دارید میتونید با مطالبی که در صفحه آموزش طراحی سایت نوشتیم مسیر درستی رو انتخاب کنید، با استفاده از دوره آموزشی HTML و CSS حرفه ای آکادمی آی تی میتونید به صورت ویدئویی و کاملا کاربردی از صفر آموزش رو آغاز کنید.

سبد خرید

سبد خرید شما خالی است.

مشاوره رایگان تلفنی 021-44085471