ایجاد شکل های زیبا با CSS — از صفر تا صد

۹۸۰ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۴ دقیقه
ایجاد شکل های زیبا با CSS — از صفر تا صد

شاید تاکنون با تصاویر زیبایی در وب مواجه شده باشید که صرفاً با استفاده از CSS ساخته شده‌اند. ممکن است از خود بپرسید چطور می‌توان با ترکیب چند مشخصه CSS چنین شکل‌های پیچیده و زیبایی را ساخت. در این مقاله با روش ایجاد شکل های زیبا با CSS آشنا خواهیم شد. رسم شکل در CSS عموماً با استفاده از ترکیبی از مشخصه‌های width ،height ،border ،top ،right ،left ،bottom و transform و شبه عناصری مانند before: و after: صورت می‌گیرد. به کادر رنگی زیر توجه کنید:

CSS آن چنین است:

1.box {
2  width: 200px;
3  height: 200px;
4  
5  border-top: 10px solid lightgreen;
6  border-right: 10px solid mediumpurple;
7  border-bottom: 10px solid lightsalmon;
8  border-left: 10px solid moccasin;
9}

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

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid lightgreen;
6  border-right: 100px solid mediumpurple;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid moccasin;
9}

اینک ناگهان 4 مثلث به دست می‌آوریم. برای این که تنها یک مثلث داشته باشیم، می‌توانیم رنگ حاشیه‌های دیگر را شفاف کنیم:

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid transparent;
6  border-right: 100px solid transparent;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid transparent;
9}

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

1.box {
2  width: 0;
3  height: 0;
4  
5  border-top: 100px solid transparent;
6  border-right: 100px solid transparent;
7  border-bottom: 100px solid lightsalmon;
8  border-left: 100px solid transparent;
9  
10  transform: translateX(-100px) translateY(-100px) rotate(-45deg);
11}

بدین ترتیب یک مثلث ابتدایی در CSS ساخته می‌شود. قطعاً اجرای این نوع استایل‌بندی با CSS نیازمند مقداری خلاقیت و تمرین است، اما زمانی که در آن مهارت یابید، تنها محدودیت شما، ذهنتان خواهد بود. در ادامه شکل‌های بسیار زیبایی می‌سازیم.

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

با این که شکل صنوبری قلب، به جهت همه انحناهایش، پیچیده به نظر می‌رسد، اما ایجاد کردن آن در CSS چندان پیچیده نیست.

در ادامه، کدهای مربوط به این شکل را ملاحضه می‌کنید.

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}

از آنجا که دو شِبه عنصر ساخته‌ایم، می‌توانیم آن‌ها را در راستای محور Y بازتاب دهیم تا شکل نهایی به صورت زیر به دست آید:

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}.heart:after {
22  left: 0;
23  
24  transform-origin: 100% 100%;
25  transform: rotate(45deg);
26}

نکته مهمی که باید توجه کنیم این است که مبدأ تبدیل (یا نمادگذاری در این مورد) با تعیین transform-origin روی گوشه راست-پایین یا 100% 100% تغییر یافته است که با یک نقطه سیاه‌رنگ در تصویر فوق مشخص شده است. همچنان که دیدید، ایجاد شکل قلب در CSS چندان پیچیده نیست.

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

شکل الماس نیز همانند قلب واقعاً پیچیده نیست. پیشنهاد می‌کنیم 10 دقیقه زمان صرف کنید و تلاش کنید شکل الماس را خودتان بسازید.

برای ساختن شکل الماس ابتدا چهار مثلثی که در ابتدای مقاله دیدیم را کمی می‌کشیم:

1.diamond {
2  width: 200px;
3  height: 0;
4  
5  border-top: 100px solid lightgreen;
6  border-right: 100px solid mediumpurple;
7  border-bottom: 100px solid hotpink;
8  border-left: 100px solid moccasin;
9}

اگر به دقت نگاه کنید، بخش فوقانی الماس را در بخش تحتانی تصویر فوق می‌بینید. اکنون رنگ‌ها را تغییر می‌دهیم، عرض حاشیه‌ها را تنظیم می‌کنیم و حاشیه فوقانی را حذف می‌کنیم، چون دیگر استفاده‌ای برای ما ندارد. در نهایت شکلی مانند زیر به دست می‌آید:

1.diamond {
2  position: relative;
3  
4  width: 200px;
5  height: 0;  /* border-top: 100px solid lightgreen; */
6  border-right: 100px solid transparent;
7  border-bottom: 80px solid hotpink;
8  border-left: 100px solid transparent;
9}

در انتها یک شِبه عنصر به صورت after: اضافه می‌کنیم و همان تکنیک‌هایی که در زمان ایجاد مثلث منفرد دیدیم را اعمال می‌کنیم:

1.diamond {
2  position: relative;
3  
4  width: 200px;
5  height: 0;
6    
7  border-right: 100px solid transparent;
8  border-bottom: 80px solid hotpink;
9  border-left: 100px solid transparent;
10}.diamond:after {
11  content: "";
12  position: absolute;  border-top: 300px solid hotpink;
13  border-right: 200px solid transparent;
14  border-left: 200px solid transparent;
15  
16  transform: translateX(-100px) translateY(80px);
17}

توجه کنید که مشخصه position روی شبه عنصر باید روی absolute تنظیم شود تا بخش تحتانی بهتر زیر بخش فوقانی الماس قرار گیرد. اکنون شما مهارت خوبی در زمینه ایجاد شکل‌های مختلف با CSS یافته‌اید.

ایجاد شکل ذره‌بین با CSS

آیا تاکنون تلاش کرده‌اید شکل آیکون ذره‌بین را به جای استفاده از SVG با استفاده از CSS ایجاد کنید؟ اگر چنین نبوده است، با ما همراه باشید تا ادامه این کار را انجام دهیم. ابتدا یک دایره با حاشیه رنگی ایجاد می‌کنیم.

1.magnifying-glass {
2  position: relative;
3  
4  width: 100px;
5  height: 100px; 
6  
7  box-sizing: border-box;
8  background-color: aliceblue;
9  
10  border: 15px solid slategray;
11  border-radius: 50%;
12}

همان طور که می‌بینید به همین سادگی نیمی از راه طی شده است. تنها بخشی که باقی مانده است، دسته ذره‌بین است که باید ایجاد کرده و در موقعیت خود قرار دهیم.

1.magnifying-glass {
2  position: relative;
3  
4  width: 100px;
5  height: 100px; 
6  
7  box-sizing: border-box;
8  background-color: aliceblue;
9  
10  border: 15px solid slategray;
11  border-radius: 50%;
12}.magnifying-glass:after {
13  content: "";
14  position: absolute;
15  bottom: 0;
16  right: 0;
17  
18  width: 50px;
19  height: 15px;
20  background-color: slategray;
21  
22  border-radius: 0 7.5px 7.5px 0;
23  
24  transform-origin: 0 50%;
25  transform: translateX(100%) rotate(45deg);
26}

ساخت شکل ذره‌بین با CSS به همین سادگی است.

چرا از SVG استفاده نکنیم؟

بدیهی است که ساخت شکل‌ها با استفاده از CSS نیازمند زمان بیشتری نسبت به استفاده از SVG یا فونت‌های آیکون است، اما از آنجا که این شکل‌ها CSS خالص هستند، تعاملی ساختن آن‌ها کاملاً آسان است. برای نمونه می‌توان به سادگی یک اثر hover برای آن‌ها ایجاد کرد. پیشنهاد می‌کنیم یک پوشش پیرامون شکلی که می‌خواهید استایل‌بندی کنید، ایجاد نمایید تا بتوانید تبدیل‌های اصلی موجود در شکل را حفظ کنید.

1<div class="heart-wrapper">
2  <div class="heart"></div>
3</div>

در ادامه برای نمونه یک تبدیل مقیاس اضافه می‌کنیم:

1.heart {
2  position: relative;
3  
4  width: 200px;
5  height: 160px;
6}.heart:before,
7.heart:after {
8  position: absolute;
9  content: "";
10  
11  width: 100px;
12  height: 160px;
13  left: 100px;
14  
15  background-color: tomato;
16  
17  border-radius: 100px 100px 0 0;
18  
19  transform: rotate(-45deg);
20  transform-origin: 0 100%;
21}.heart:after {
22  left: 0;
23  
24  transform-origin: 100% 100%;
25  transform: rotate(45deg);
26}.heart-wrapper {
27  cursor: pointer;
28  
29  width: 200px;
30  height: 160px;
31  
32  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
33}.heart-wrapper:hover {
34  transform-origin: 50% 50%;
35  transform: scale(1.3);
36}

سخن پایانی

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

 

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۴ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
itnext
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *