ایده رسم اشکال خاص با CSS در سایت

CSS (Cascading Style Sheets) یک زبان استایل‌دهی است که برای طراحی ظاهر صفحات وب استفاده می‌شود. یعنی در کنار HTML که برای ساختن اسکلت بندی یک صفحه وب استفاده می‌شود ، از CSS برای استایل دادن و زیبا سازی ، همچنین چیدمان منظم تر ، طبق خواسته ما ، استفاده می‌شود . یکی از ویژگی‌های جذاب CSS، امکان رسم اشکال خاص و پیچیده بدون نیاز به تصاویر یا SVG است. این قابلیت می‌تواند به بهینه‌سازی عملکرد سایت و کاهش حجم صفحات کمک کند و به پردازش و بارگذاری صفحات وب بر روی مرورگر کاربر سرعت ببخشد ، که در نهایت موجب افزایش کیفیت تجربه کاربر از سایت و افزایش رتبه سئو می‌شود . در این مقاله، به معرفی روش‌های مختلف رسم اشکال خاص با CSS، کاربردهای آن در طراحی سایت و چند نمونه عملی می‌پردازیم.

 چرا باید از CSS برای رسم اشکال استفاده کنیم؟

رسم اشکال با CSS مزایای متعددی دارد، از جمله:

1. بهینه‌سازی عملکرد سایت: استفاده از CSS برای رسم اشکال به کاهش تعداد درخواست‌های HTTP که ممکن است موجب افت سرعت وب سرور شود ، و کاهش حجم فایل‌های تصویری کمک می‌کند.
2. افزایش انعطاف‌پذیری: با CSS می‌توان اشکال را به‌راحتی تغییر اندازه داد یا با انیمیشن‌ها ترکیب کرد.
3. سازگاری با طراحی واکنش‌گرا: اشکالی که با CSS رسم می‌شوند، به‌راحتی در صفحات واکنش‌گرا تنظیم می‌شوند و می‌توان آنها را در ابعاد مختلف مرورگر ها و دستگاه ها به نمایش گذاشت.
4. افزایش قابلیت دسترس‌پذیری: اشکال رسم‌شده با CSS، معمولاً راحت‌تر برای کاربران دارای نیازهای ویژه بهینه‌سازی می‌شوند.
5. امکان افزودن انیمیشن های خاص: زمانی که اشکال با CSS ترسیم شده باشند، افزودن انیمیشن به آنها بسیار آسان تر خواهد بود.

 ایده رسم اشکال خاص با CSS در سایت

1. استفاده از Border برای ایجاد اشکال مثلثی

یکی از روش‌های ساده برای رسم مثلث در  CSS، استفاده از خاصیت `border` است. در مثال زیر، یک مثلث با استفاده از `border` ساخته شده است:

<style>
  .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3498db;
  }
</style>

در این روش،  `border-left` و `border-right` شفاف تنظیم می‌شوند تا شکل مثلث ایجاد شود ، شما می‌توانید با تغییر هر کدام از مقادیر border ها شکل مثلث را به راحتی تغییر دهید ، برای مثال با صفر کردن مقدار border-left می‌توانید یک مثلث قائم الزاویه ایجاد کنید.

2. ایجاد دایره با استفاده از Border-Radius

احتمالاً مرسوم ترین شکلی که با استفاده از CSS پیاده سازی کرده باشید، یک دایره است که با کمک border-radius پیاده سازی شده است. برای رسم دایره ، می‌بایست شکل شما دارای طول و عرض مساوی باشد که برای این کار یا باید مقدار طول و عرض بصورت ثابت وارد شود (مثلا 50px) و مقدار border-radius نیز همان عدد باشد ، مقدار طول ، یا عرض را وارد کنید (با هر واحدی مقلا درصد) و aspect-ratio را 1/1 قرار دهید تا باعث برابر سازی طول و عرض شود. و مقدار border-radius را 50% قرار دهید.

<style>
  .circle-1 {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    border-radius: 100px;
  }

  .circle-2 {
    width: 50%;
    aspect-ratio: 1/1;
    background-color: #3cb7e7;
    border-radius: 50%;
  }
</style>

3. رسم چندضلعی با Clip-Path

ویژگی `clip-path` به شما این امکان را می‌دهد که اشکال پیچیده‌تری ایجاد کنید، مانند شش‌ضلعی. این خاصیت CSS به شما برای برش دادن و crop کردن یک تگ با نقطه گذاری و اتصال نقاط به یکدیگر ، کمک می‌کند. شما ممکن است با ابزار adobe photoshop کار کرده باشید ، این خاصیت تقریباً مانند mask در فتوشاپ عمل می‌کند:

<style>
  .hexagon {
    width: 100px;
    height: 100px;
    background-color: #f1c40f;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
</style>

کد بالا به این نحو کار می‌کند که ، شما اول یک شئ چهار ضلعی می‌سازید ، و بخش هایی از آن را برش می‌زنید تا تبدیل به یک شش ضلعی شود. در این حالت شما یک polygon برای clip-path تنظیم می‌کنید که دارای تعدادی نقطه (به هر تعداد که نیاز دارید) می‌باشد ، و هر کدام با یک علامت « , » از هم جدا می‌شود ، هر نقطه دارای دو عدد است که جایگاه قرار گیری آن در محور X و Y را مشخص می‌کند. در CSS گوشه‌ی بالا سمت چپ همیشه مقدار صفر می‌باشد و شما باید نسبت به آن جایگاه نقطه را مشخص کنید ، عدد اول در محور X و عدد دوم در محور Y ، جایگاه نقطه را مشخص می‌کند. در نهایت نقاط به هم متصل شده و شکل را تشکیل می‌دهند.

نکته: برای استفاده از قابلبیت transition برای ایجاد یک ، نیاز است که تعداد نقاط باهم برابر باشند ، برای مثال هر دو 6 نقطه داشته باشند

شما از همین روش برای ساختن یک دایره با استفاده از circle و ایجاد یک بیضی با استفاده از ellipse می‌توانید استفاده کنید ، پیشنهاد سوبلز برای رسم اشکال هندسی با clip-path ، استفاده از وب اپلیکیشن بسیار کاربردی https://bennettfeely.com/clippy/ است.

4 ایجاد یک ذوذنقه با استفاده از skew:

برای ایجاد یک شکل هندسی ماننده ذوذنقه، به راحتی میتوان از clip-path استفاده کرد، اما نکته ای که دارد ، ممکن است شما نیاز داشته باشید گوشه های آن را نیز با استفاده از border-radius گرد کنید تا یک شکل زیبا تر ایجاد شود.

برای این کار شما به یک چنین کدی نیاز دارید:

<style>
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100svh;
  }
  .trapezoid-wrapper {
    overflow: hidden;
    width: 30%;
    aspect-ratio: 1.5/1;
    border-radius: 40px;
  }
  .trapezoid {
    width: 100%;
    height: 100%;
    transform: skew(32deg) translateX(-25%);
    background-color: blueviolet;
    border-radius: 40px;
  }
</style>

<body>
  <div class="trapezoid-wrapper">
    <div class="trapezoid"></div>
  </div>
</body>

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

در توضیح کد بالا trapezoid-wrapper طول و عرض شکل را تعیین می‌کند و با قرار دادن overflow:hidden بخش های بیرون زده فرزندان آن ها حذف می‌شوند. در ادامه فرزند آن را با skew به یک متوازی الاضلاع تبدیل می‌کنیم و با translateX ، یک ظلع آن را به بیرون از باکس والذ منتقل می‌کنیم در نهایت ، هم برای والد و هم فرزند border-radius قرار می‌دهیم که هر چهار جهت آن گرد شود.

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

 کاربردهای رسم اشکال خاص با CSS در طراحی وب

1. ایجاد پس‌زمینه‌های زیبا: استفاده از `clip-path` برای طراحی بخش‌های مختلف سایت.
2. دکمه‌های سفارشی: طراحی دکمه‌هایی با اشکال خاص بدون نیاز به تصاویر.
3. لوگوها و آیکون‌ها: استفاده از CSS برای طراحی لوگوها بدون وابستگی به فایل‌های گرافیکی.
4. افکت‌های تعاملی: ایجاد انیمیشن‌های زیبا برای جذاب‌تر کردن رابط کاربری.

نتیجه‌گیری

CSS ابزار قدرتمندی برای رسم اشکال خاص در صفحات وب است. با استفاده از ویژگی‌هایی مانند `border`, `border-radius`, `clip-path` و `::before` و `::after` و… می‌توان اشکال متنوعی ایجاد کرد. همچنین با ترکیب انیمیشن‌های CSS می‌توان این اشکال را زنده و تعاملی کرد. استفاده از این روش‌ها نه تنها عملکرد سایت را بهبود می‌بخشد، بلکه به طراحان امکان می‌دهد طراحی‌های خلاقانه‌تری داشته باشند و همچنین به دلیل عملکرد بهتر باعث افزایش رتبه در سئو نیز می‌شود.

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