تولیدکننده CSS

مولد CSS یکپارچه با 21 ابزار: مثلث، پیکان، گرادیان، جعبه سایه، شکل‌سازی شیشه‌ای، نومورفیسم، لودر، راهنمای ابزار، مسیر کلیپ، فیلتر، تبدیل، انیمیشن، فلکس‌باکس، شبکه و متغیرها، پیش‌نمایش زنده، کپی و دانلود، رایگان.

ساخت و نگهداری توسط Shehzad Munir ·

تولیدکننده CSS
Loading CSS Forge Studio
Share

21 ژنراتور CSS در یک استودیوی تصویری

یک جعبه ابزار CSS بصری و یکپارچه با ۲۱ ژنراتور، مثلث، فلش، روبان، راهنمای ابزار، لودر، گرادینت، سایه‌های جعبه و متن، شکل‌سازی شیشه‌ای، نئومورفیسم، شعاع مرزی، اشکال، مسیرهای کلیپ، فیلترها، تبدیل‌ها، انیمیشن‌ها، پرسپکتیو، باکس‌های انعطاف‌پذیر، CSS و نمای شبکه‌ای متغیر کد آماده دانلود یا کپی کنید.

CSS Forge قطعه‌های جلویی را که دائماً به آنها می‌رسید، مثلث‌ها، فلش‌ها، روبان‌ها، راهنمای ابزار، لودرها، گرادیان‌ها، سایه‌های جعبه، سایه‌های متن، شکل‌سازی شیشه‌ای، نومورفیسم، شعاع مرزی، اشکال سفارشی، مسیرهای کلیپ، فیلترها، تبدیل‌ها، انیمیشن‌ها، جعبه‌های منعطف، پرسپکتیو سی‌بعدی، جعبه‌های متحرک، پرسپکتیو سی‌بعدی بازی‌سازی شده مدیر متغیر، پشت یک رابط منفرد و سازگار. یک ژنراتور را انتخاب کنید، لغزنده‌ها را بکشید، فوراً واکنش پیش‌نمایش زنده را تماشا کنید، سپس CSS آماده تولید را با یک کلیک کپی یا دانلود کنید.

ویژگی ها

  • 21 ژنراتور CSS در یک استودیو
  • پیش نمایش زنده در زمان واقعی با پس زمینه های قابل تغییر
  • یک کلیک کپی و دانلود CSS آماده تولید
  • تصادفی و تنظیم مجدد کنترل ها در هر ژنراتور
  • سازندگان گرادیان، جعبه-سایه، شیشه‌مورفیسم و ​​نئومورفیسم
  • زمین های بازی تعاملی Flexbox و CSS Grid
  • اول محلی: هیچ چیزی از مرورگر شما خارج نمی شود

نحوه استفاده از تولیدکننده CSS

  1. 1

    یک ژنراتور انتخاب کنید

    از میان Shapes، Components، Effects یا Layout، 15 ژنراتور CSS که برای دسترسی سریع گروه بندی شده اند، انتخاب کنید.

  2. 2

    کنترل ها را تنظیم کنید

    لغزنده ها را بکشید، رنگ ها را انتخاب کنید و گزینه ها را تغییر دهید. پیش‌نمایش زنده فوراً به‌روزرسانی می‌شود، بنابراین می‌توانید با ظاهر دقیق شماره‌گیری کنید.

  3. 3

    CSS را کپی کنید

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

  4. 4

    آن را در پروژه خود رها کنید

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

موارد استفاده رایج

  • مثلث‌ها و فلش‌های CSS خالص برای راهنمایی‌ها و فهرست‌های کشویی ایجاد کنید
  • اسپینرهای بارگیری و انیمیشن های اسکلت را بدون کتابخانه بسازید
  • طرح‌بندی‌های flexbox و grid را نمونه اولیه کنید و CSS دقیق را صادر کنید
  • شکل‌های مسیر کلیپ سفارشی برای بخش‌ها و کارت‌های قهرمان ایجاد کنید
  • تنظیم دقیق فیلترهای تصویر و تبدیل های سه بعدی به صورت بصری
  • تعریف و مدیریت یک پالت نشانه طراحی با متغیرهای CSS

راهنمای تفصیلی

طراحی بصری، ارسال کد واقعی

هر کنترلی مستقیماً به یک ویژگی CSS نگاشت می‌شود، بنابراین هنگام تغییر دادن آن، قانون اساسی را یاد می‌گیرید. خروجی تولید شده CSS تمیز و منطبق با استانداردها است (با -webkit- در جایی که مهم هستند) که مستقیماً در شیوه نامه شما قرار می گیرد. پس‌زمینه پیش‌نمایش را تغییر دهید، برای بررسی ایده‌ها تصادفی را بزنید، یا به حالت پیش‌فرض بازنشانی کنید. هیچ چیزی آپلود نمی شود، همه رندرها به صورت محلی در مرورگر شما انجام می شود، بنابراین سریع و خصوصی است.

سوالات متداول

چه مولدهای CSS گنجانده شده است؟

بیست و یک: ژنراتورهای مثلث، پیکان، شکل، مسیر کلیپ و مرز شعاع. سازندگان اجزای نوار، راهنمای ابزار و لودر. ویرایشگرهای Gradient، Box-Shadow، Text-Shadow، Glassmorphism، Neumorphism، Filter، Transform، انیمیشن و افکت پرسپکتیو. به علاوه Grid Builder، Flexbox Playground، Grid Playground و یک CSS Variable Generator، همه در یک رابط.

آیا CSS تولید شده آماده تولید است؟

بله. خروجی CSS تمیز و منطبق با استانداردها است که می‌توانید مستقیماً در هر صفحه سبک یا مؤلفه‌ای قرار دهید. در جایی که مهم است (مسیر کلیپ، فیلترها)، پیشوندهای پیشوند فروشنده گنجانده شده است، و ابزارهای انیمیشن بلوک کامل @keyframes را خروجی می‌دهند.

چگونه یک مثلث CSS بسازیم؟

مولد مثلث را باز کنید، یک جهت (بالا، پایین، چپ، راست) انتخاب کنید، اندازه و رنگ را با لغزنده ها تنظیم کنید و CSS مبتنی بر حاشیه را کپی کنید. از ترفند کلاسیک حاشیه صفر با عرض / ارتفاع صفر استفاده می کند که در هر مرورگر کار می کند.

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

بله. Animation Builder از پیش تنظیمات (پرش، محو شدن، ورود به داخل، چرخش، لرزش، پاپ) را با کنترل‌هایی برای مدت زمان، تاخیر، عملکرد زمان‌بندی و تعداد تکرار ارائه می‌دهد. این خلاصه نویسی کامل انیمیشن به همراه قانون @keyframes را برای شما تولید می کند.

آیا فلکس باکس و زمین بازی گرید کد واقعی صادر می کند؟

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

آیا داده های من به سرور ارسال می شود؟

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

چگونه می توانم CSS را برای سایه یا گرادیان جعبه تولید کنم؟

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

آیا می توانم CSS گلاسه مورفیسم یا نئومورفیسم ایجاد کنم؟

بله. ژنراتور جلوه‌های مدرنی مانند گرادیان، سایه‌ها و سبک‌های شیشه‌ای/نومورفیک را با پیش‌نمایش زنده تولید می‌کند، بنابراین می‌توانید CSS آماده تولید را بدون مقادیر تنظیم دستی کپی کنید.

آیا این ابزار یک پیش نمایش زنده از CSS را نشان می دهد؟

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

از مجله

All articles →