السافت تولز

سلام! من Elesoft Chat (السافت چت) هستم. با کمال میل کمکتون می‌کنم این استایل CSS رو به یک وکتور زیبا و دقیق در ایلاستریتور تبدیل کنید.
این استایل یک دایره (آیکون، بولت‌پوینت یا چک‌مارک) با گردینت، حرکت داخلی (Inset Shadow) و سایه بیرونی ایجاد می‌کنه. در ایلاستریتور دقیقاً می‌تونیم همین ظاهر رو با چند قدم ساده پیاده‌سازی کنیم:

مراحل ساخت در ایلاستریتور:

۱. ساخت پایه (دایره اصلی)

  • ابزار Ellipse Tool (L) رو انتخاب کنید.
  • با نگه داشتن کلید Shift یک دایره بکشید. (چون ابعاد CSS شما ۲۸ در ۲۸ پیکسل است، می‌تونید اندازه رو دقیقاً روی 28px در پنل Transform تنظیم کنید).

۲. اعمال گردینت (Background)

  • رنگ داخل دایره رو روی گردینت تنظیم کنید.
  • برای ساختن var(--accent-grad) باید از یک Linear Gradient یا Radial Gradient استفاده کنید که شامل دو یا چند طیف رنگی دلخواه (ترجیحاً تناژ آبی یا بنفش با توجه به سایه rgba(76, 110, 245) در کد شما) باشه.

۳. شبیه‌سازی Inner Shadow (باکس شادو داخلی)

در CSS این بخش با inset 0 0 0 3px rgba(255, 255, 255, .35) یک حاشیه نیمه‌شفاف سفید ایجاد کرده. برای اینکار در ایلاستریتور:
  1. دایره اصلی رو انتخاب کنید.
  2. به پنل Appearance برید (از منوی Window > Appearance).
  3. روی آیکون Add New Stroke کلیک کنید تا یک خط دور ایجاد بشه.
  4. ضخامت خط (Stroke) رو روی 3px تنظیم کنید.
  5. رنگ خط رو روی سفید (White) بذارید.
  6. در همون پنل Appearance، روی کلمه Stroke کلیک کنید تا تنظیماتش باز بشه، یا از پنل Transparency، میزان Opacity اون خط رو روی 35% تنظیم کنید. (یا رنگ سفید رو با Opacity 35% اعمال کنید).

۴. شبیه‌سازی Drop Shadow (سایه بیرونی)

این بخش مربوط به 0 2px 6px rgba(76, 110, 245, .25) هست:
  1. دایره رو انتخاب کنید.
  2. از منوی بالا برید به: Effect > Stylize > Drop Shadow
  3. تنظیمات رو اینطور وارد کنید:
    • Mode: Normal (یا Multiply)
    • Opacity: 25%
    • X Offset: 0px
    • Y Offset: 2px
    • Blur: 6px
    • Color: سفارشی (کد رنگی نزدیک به #4C6EF5 که در کدتون بود رو وارد کنید).
حالان المان شما دقیقاً همون ظاهر CSS رو تو ایلاستریتور داره و آماده استفاده‌ست! اگر کجای کار نیاز به توضیح بیشتر داشت، من همینجا در خدمتم.
یه المان با این استایل ها
content: '';
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
background: var(--accent-grad);
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 2px 6px rgba(76, 110, 245, .25);
میخوام تو ایلاستریتور بسازم
أهلاً بك! أنا Elesoft Chat (السافت چت)، مساعدك الذكي. كيف يمكنني مساعدتك اليوم؟
سلام